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

857 阅读6分钟

提示和打印你的JavaScript代码可以帮助你及早发现错误,使你的代码更加清晰,并提高代码质量。然而,当你同时使用格式化器(用于pretty-printing)和linter时,可能会有一些摩擦。例如,格式化器可以做一些林特人认为有问题的事情。衬托者可以覆盖来自格式化器的样式变化。它们可以朝不同的方向发展。

为了成功地一起使用它们,你需要让它们站在同一起跑线上。在这篇文章中,我将讨论如何使用最流行的格式化器,Prettier,和最流行的linter,ESLint。我将向你展示如何设置它们,并在命令行和Visual Studio Code(VS Code)中一起使用它们来自动修复和格式化你的代码。

我已经看到了不同的方法来解决如何一起使用它们,但由于代码编辑器的限制,有些是黑客的解决方案。我将讨论其中一些的优点和缺点。你可以自己决定什么是最好的。

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

润色的规则

有两大类提示规则。

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

Prettier's formatting rules and ESLint's code-quality rules overlap on linting rules Venn diagram

提示规则的维恩图。

问题是,Prettier和ESLint的规则是重叠的。我们更希望它们不重叠。

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

Separation between Prettier's formatting rules and ESLint's code-quality rules

Prettier和ESLint之间的规则分界。

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

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

ESLint和Prettier的初始配置

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

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

ESLint开始时是一块白板。在你创建一个带有一些规则的配置之前,它不会做任何事情。把你的配置文件(.eslintrc.{js,yml,json})放到你的项目目录下,你就可以进行lint了。你可以设置一个全局配置,但是ESLint已经废弃了它(不鼓励使用)。我仍然使用一个全局配置。🤫

有了配置,你可以从命令行运行ESLint,如下图。你可以阅读ESLint的入门指南以了解更多细节。

Running ESLint in code

在命令行上使用ESLint。

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

Inserting Prettier code

在命令行上使用Prettier。

一个典型的package.json ,看起来就像我下面的样子。我把文件夹srctest 中的文件作为我的npm脚本的目标。如果可能的话,我更喜欢跳过.eslintignore.prettierignore 文件--更简单是最好的😅

{
  "name": "basic-project",
  "version": "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 formatterESLint

Inserting ESLint in VS Code

在VS Code中使用ESLint。

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

我推荐下面的第一种方法。它是最干净和最有效的。

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

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

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

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

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

示例.eslintrc.json

{
  // ...
  extends: [
    // ...
    'eslint:recommended',
    "prettier" // Make sure this is the last
  ],
  // ...
}

现在,你可以自由地同时运行Prettier和ESLint而没有任何副作用。

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

{
   "name": "no-worries-setup",   
   "version": "1.0.0",
   "scripts": {
    "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",
  }
  // ...
}

现在,你可以运行npm run format 命令,一次性地格式化和修复你的所有代码。

在VS代码中的配置

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

  2. 更新你的用户设置(settings.json),如下:

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

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

2020年3月(v1.44)editor.codeActionsOnSave 属性被更新为接受一个代码动作的数组,这允许有序的代码动作。如果我们安装了格式化代码动作扩展,我们可以使格式化作为一个代码动作来使用。所以现在,我们可以以我们喜欢的任何顺序运行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

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

$ npm install --save-dev prettier-eslint

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

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

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

// notice, no semicolon in the original text
const sourceCode = "const {foo} = bar";

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

const formatted = format(options);

// notice no semicolon in the formatted text
formatted; // const { foo } = bar

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

在VS代码中的配置

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

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

一般不建议这样做,因为。

  1. 你会得到被ESLint报告为问题的格式化问题。你想让Prettier为你自动修复的东西划上红线吗?
  2. 它比直接运行Prettier要慢一些。
  3. 你有另一层可以引入错误的地方。

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

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

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

然后,将该插件追加到 plugins数组中,然后将插件追加到你的.stylelintrc.* 文件中。

例如**.eslintrc.json**。****

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

几年前,Wes Bos推荐了这种方法。这在当时是一个合理的选择,但现在有了更多的选择。

在VS代码中配置

  1. 安装扩展。ESLintPrettier

  2. 更新你的用户设置(settings.json),如下:

    "eslint.alwaysShowStatus": true,
    "editor.formatOnSave": true,
    // turn it off for JS and JSX, we will do this via eslint
    "[javascript, javascriptreact]": {
      "editor.formatOnSave": false
    },
    // tell the ESLint plugin to run on save
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    },
    // Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through ESLint already
    "prettier.disableLanguages": ["javascript", "javascriptreact"],
    
    

结论

Prettier和ESLint可以非常有效地一起使用。它需要一些配置,但在读完这篇文章后,这应该是很简单的!我喜欢有这样的设置。这很好,可以从你的手中拿下一些任务,并重新获得一些头脑空间。它将帮助你提高你的代码质量,让你的代码库更加清晰,而无需人工干预。

The postAutomate formatting and fixing JavaScript code with Prettier and ESLintappeared first onLogRocket Blog.