用Prettier和ESLint自动格式化修复JavaScript代码

打出JavaScript代码可以帮助你及早发现错误，使你的代码更加清晰，并提高代码质量。然而，当你同时使用格式化器（用于pretty-printing）和linter时，可能会有一些问题。衬托者可以覆盖来自格式化器的样式变化。它们会朝不同的方向发展。

为了顺利的使用，需要让它们站在同一起跑线上。本文将讨论如何将最流行的格式化器Prettier与最流行的linterESLint一起使用。本文将阐述如何设置它们，并在命令行和Visual Studio Code (VS Code)中一起使用它们，以自动修正和格式化你的代码。

目前已经有很多方法解决这个问题，但有些是黑客的的解决方案。我将讨论其中一些的优点和缺点。可以自行决定选择用哪种方式。

首先，让我们广泛地了解一下提示规则，这样我们就可以理解提示器和格式化器之间的分界线是什么。

润色规则

有两大类提示规则。

格式化规则。这些规则影响代码的风格。这些规则不涉及bug。例如，ESLint中的'no-mixed-spaces-and-tabs'规则确保缩进时只使用制表符或空格。Prettier有一个'tabs'选项用于同样的事情。
代码质量规则。这些规则可以提高代码质量，并有可能防止或捕获错误。例如，ESLint中的'no-implicit-globals'规则不允许全局范围变量。从其他脚本创建的全局变量可能会发生名称冲突。这通常会导致运行时错误或意外行为。

Prettier的格式化规则和ESLint的代码质量规则在linting规则维恩图上重叠

问题是，Prettier和ESLint的规则重叠了，但我们希望它们不重叠。

一般来说，我们希望Prettier能处理第一类，而ESLint能处理第二类。有一些规则可能很难被归类为其中之一。我们不需要纠结于它们属于哪个类别。我们的兴趣在于确保Prettier或ESLint执行一个特定的动作，并且不会相互碰撞。

Prettier的格式化规则和ESLint的代码质量规则之间的分离

至于运行它们的顺序，最好是在ESLint之前运行Prettier。Prettier通过以一致的方式重新打印整个程序来格式化文件，以消除任何格式化错误的可能性。因此，如果你想让ESLint加入格式化的行动，你应该在Prettier之后运行它，以防止更改被覆盖掉。

如果你对ESLint和Prettier不熟悉，我会在下一节介绍如何对它们进行初始配置。如果你熟悉，你可以跳到【方法】部分。

ESLint和Prettier的初始配置

ESLint和Prettier都可以从npm和Yarn下载。对于每一个项目，你都要创建一个package.json，并把它们作为devDependencies加入。

npm install --save-dev eslint
npm install --save-dev --save-exact prettier

ESLint开始时是一张白纸。在你创建一个包含一些规则的配置之前，它不会做任何事情。把你的配置文件（.eslintrc.{js,yml,json}）放到你的项目目录下，你就可以进行lint了。你可以设置一个全局配置，但我不鼓励使用ESLint，我仍然使用一个全局配置。

有了配置，你可以从命令行中运行ESLint。你可以阅读ESLint的Getting Started Guide了解更多细节。

微信截图_20210609114941.png

另一方面，Prettier有一个默认配置。它可以在不创建你自己的配置文件的情况下运行，所以你可以直接开始使用它。建议在大项目上使用特定版本的Prettier，否则更新可能会导致许多文件的改变，并给你的git提交增加噪音。你可能应该使用一个[.prettierignore](https://prettier.io/docs/en/ignore.html)文件来忽略那些不应该被格式化的东西也。你可以阅读Prettier的安装指南了解更多信息。

插入Prettier代码

一个典型的package.json会像我下面的样子。我把src和test文件夹中的文件作为我的npm脚本的目标。如果可能的话，我喜欢跳过.eslintignore和.prettierignore文件--更简单的才是最好的！

{
  "name": "basic-project",
  "版本": "1.0.0",
  "main": "index.js",
  "scripts": {
    "lint": "npx eslint src test",
    "lint:fix": "npm run lint -- -- -- fix",
    "prettier": "npx prettier src test --check",
    "prettier:fix": "npm run prettier -- -- write"。
  },
  "author": "Rob o'leary",
  "license": "ISC"。
  "devDependencies": {
    "eslint": "^7.25.0",
    "prettier": "^2.2.1"
  }
}

所有主要的代码编辑器都有ESLint和Prettier的扩展。对于VS Code，官方的扩展是Prettier - Code formatter和ESLint。

在VS Code中插入ESLint

为你的代码提供提示和pret-print的各种方法

我推荐下面的第一种方法。

1. 删除冲突的规则并连续运行

在ESLint中，通过使用以下配置，很容易关闭与Prettier冲突的规则。

eslint-config-prettier for JavaScript
tslint-config-prettier 如果你使用TypeScript的话

首先，安装该配置。这只是针对JavaScript的。

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

然后，在你的本地.stylelintrc.*ESLint配置文件中，将该配置名称追加到[extends](https://stylelint.io/user-guide/configuration/#extends)数组中。确保把更漂亮的配置放在最后，这样它将覆盖其他配置的设置。

例如 .eslintrc.json:

{
  // ...
  延伸。[
    // ...
    'eslint:recommended',
    "prettier" // 确保这是最后一个
  ],
  // ...
}

现在，你可以自由地将Prettier和ESLint一起运行而没有任何副作用。

你可以像在命令行中那样，通过将它们定义为npm脚本，一个接一个地运行prettier和ESLint。以下是在package.json中的样子。

{
   "name": "no-worries-setup",   
   "版本": "1.0.0",
   "脚本": {
    "lint": "npx eslint src test",
    "lint:fix": "npm run lint -- -- -- fix",
    "prettier": "npx prettier src test --check",
    "prettier:fix": "npm run prettier -- -- write",
    "format": "npm run prettier:fix && npm run lint:fix"。
  }
  // ...
}

在VS代码中的配置

安装扩展程序。ESLint, Prettier, 和 Format Code Action.

更新你的用户设置（settings.json），如下。

{
  //...
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.probe": [
      "javascript",
      "javascriptreact",
      "vue"
  ],
  "editor.formatOnSave": false,
  // 运行Prettier，然后运行ESLint
  "editor.codeActionsOnSave": [
    "source.formatDocument",
    "source.fixAll.eslint"
  ],
  "vetur.validation.template": false
  // ...
}

首先，你需要禁用保存时的编辑器格式（editor.formatOnSave）。我们希望通过代码动作来处理一切。

在March 2020 (v1.44)中，editor.codeActionsOnSave属性被更新为接受一个代码动作的数组，这允许有序的代码动作。如果我们安装了Format Code Action扩展，我们可以使格式化作为一个代码动作来使用。所以我们可以以我们喜欢的任何顺序运行Prettier和ESLint作为代码动作。

在这个例子中，我们先用source.formatDocument动作运行Prettier（它使用默认格式），然后用source.fixAll.eslint动作运行eslint --fix。

slint.probe属性是用来锁定ESLint应该验证的语言。如果你想看到弹出信息，你可以使用eslint.validate来代替。

如果你使用Vetur扩展，确保它不做自己的验证。有一个设置vetur.validation.template，你不应该启用它。

2. 以编程方式运行Prettier和ESLint

下面的应用程序提供了一个统一的方式来运行prettier，然后立即对文件进行eslint --fix。

prettier-eslint 用于JavaScript
prettier-tslint for TypeScript

首先，安装该软件包。这只是针对JavaScript的。

$ npm install --save-dev prettier-eslint

接下来，你需要编写你自己的实现，来针对你的文件并运行格式化。

下面是一个格式化字符串的基本例子。

const format = require("prettier-eslint")。

// 注意，原文中没有分号
const sourceCode = "const {foo} = bar"。

const options = {
  text: sourceCode,
  eslintConfig: {
    parserOptions: {
      ecmaVersion: 7,
    },
    规则。{
      semi: ["error", "never"],
    },
  },
  prettierOptions: {
    bracketSpacing: true,
  },
  fallbackPrettierOptions: {
    singleQuote: false,
  },
};

const formatted = format(options);

// 注意格式化的文本中没有分号
formatted; // const { foo } = bar

很明显，这个方法需要更多的工作来锁定文件，读取内容，并写入输出。

在VS代码中的配置

你可以安装和使用Prettier ESLint扩展，阅读README中的说明。

3. 运行Prettier，就像它是一个ESLint规则一样

通常不建议这样做，因为

你会被ESLint报告为格式化问题。你想让Prettier为你自动修复的东西划上红线吗？
它比直接运行Prettier要慢一些。
你有了另一个可以引入错误的层面。

你可以使用ESLint插件，让你把Prettier当做一个linter规则来运行。

eslint-plugin-prettier 用于JavaScript
tslint-plugin-prettier 用于TypeScript

首先，安装该插件。这只是针对JavaScript的。

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

然后，在你的".stylelintrc.*"文件中的plugins数组中追加该插件。

例子 .eslintrc.json:****

{
  "plugins": ["prettier"]。
  "规则": {
    "prettier/prettier": "错误"
  }
}

韦斯-博斯几年前推荐过这种方法，在当时是一个合理的选择，但现在有了更多的选择。

在VS代码中配置

安装扩展程序。ESLint和Prettier。

更新你的用户设置（settings.json），如下。

"eslint.alwaysShowStatus": true,
"editor.formatOnSave": true,
//对JS和JJSX关闭，我们将通过eslint来做这件事
"[javascript, javascriptreact]": {
  "editor.formatOnSave": false
},
//告诉ESLint插件在保存时运行
"editor.codeActionsOnSave": {
  "source.fixAll": true
},
// 可选但重要的是：如果你为其他语言（如CSS和HTML）启用了prettier扩展，请关闭JS的扩展，因为我们已经通过ESLint做了。
"prettier.disableLanguages": ["javascript", "javascriptreact"],

结论

Prettier和ESLint可以非常有效地一起使用。它需要一些配置，但在读完这篇文章后，这应该是很简单的！这样的设置很好，可以把一些任务从你的手上拿开，重新获得一些头脑空间。它可以帮助你提高你的代码质量，让你的代码库更有可读性，而无需人工干预。

原文链接；blog.logrocket.com/automate-fo…