ESLint 插件之 prettier 的使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

随着前端开发的发展，代码的规范性和可维护性越来越受到重视。而 ESLint 作为前端开发中最常用的代码规范工具之一，其插件也越来越丰富。其中，prettier 插件是一款非常实用的插件，可以帮助我们自动格式化代码，从而让代码更加美观、易读。

本文将介绍 ESLint 插件之 prettier 的使用教程，包括安装、配置以及使用方法。同时，我们也会通过示例代码来演示其使用过程。

首先，我们需要安装 ESLint 和 prettier 插件。可以通过 npm 或 yarn 来进行安装：

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

或者

yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier --dev

在安装完插件后，我们需要对 ESLint 进行配置，以便让其支持 prettier 插件。具体操作如下：

在项目根目录下创建 .eslintrc.js 文件，然后将以下代码复制到文件中：

module.exports = {
  extends: ['plugin:prettier/recommended'],
  plugins: ['prettier'],
  rules: {},
};

这里我们使用了 plugin:prettier/recommended 扩展，以便让 ESLint 支持 prettier 插件。同时，我们也添加了 prettier 插件到 plugins 中。

在项目根目录下创建 .prettierrc.js 文件，然后将以下代码复制到文件中：

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 80,
};

这里我们配置了一些 prettier 的选项，以便让其按照我们的需求来格式化代码。

在完成了配置后，我们就可以使用 prettier 插件来格式化代码了。具体操作如下：

首先，我们可以通过命令行来格式化代码。在命令行中输入以下命令：

npx prettier --write .

这里的 . 表示当前目录，即会对当前目录下的所有文件进行格式化。如果你只想对某个文件进行格式化，可以将 . 替换为文件路径。

除了命令行外，我们还可以使用编辑器插件来格式化代码。prettier 插件已经支持多种编辑器，比如 VS Code、Sublime Text、Atom 等。

以 VS Code 为例，我们可以在 VS Code 中安装 prettier 插件，然后在设置中搜索 prettier，找到 Prettier: Require Config 选项，将其设置为 true。这样，每次保存文件时，prettier 就会自动格式化代码了。

最后，让我们通过示例代码来演示 prettier 插件的使用过程。假设我们有一个 JavaScript 文件，内容如下：

function sum(a,b){
  return a+b
}
console.log(sum(1,2))

这里的代码格式并不规范，我们可以使用 prettier 插件来格式化代码。首先，我们在命令行中输入以下命令：

npx prettier --write .

然后，我们可以看到代码已经被格式化了：

function sum(a, b) {
  return a + b;
}
console.log(sum(1, 2));

此时，我们也可以在 VS Code 中打开该文件，并保存一次文件。同样地，代码也会被自动格式化。

通过本文的讲解，我们学习了 ESLint 插件之 prettier 的使用教程。在实际开发中，我们可以通过该插件来自动格式化代码，从而让代码更加美观、易读。同时，我们也需要注意，使用插件时需要进行配置，以便让其按照我们的需求来格式化代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66271d02c9431a720c3a4700