彻底搞懂ESLint与Prettier在vscode中的代码自动格式化

ゝ一世哀愁。 2023-10-02 23:44 5阅读 0赞

![format_png][]

### 前言 ###

前端代码格式化社区提供了两种比较常用的工具`ESLint`和`Prettier`，他们分别提供了对应的vscode的插件，二者在代码格式化方面有重叠的部分，规则不一致时会导致冲突。vscode作为前端开发编辑器已经越来越普遍了，这需要开发者在vscode对他们的使用有一定的了解，掌握其中的原理对提升开发效率保证代码质量方面会有很大的帮助，俗话中的`工欲善其事必先利其器`、`磨刀不误砍柴工`都是类似的道理。

### ESLint介绍 ###

#### ESLint的作用 ####

`ESLint`的具体的用法以及原理等不在本文的介绍范围，可自行查询资料。

[ESLint][]的作用应该大家都知道，它是一个检查代码质量与风格的工具，配置一套[规则][Link 1]，就能检查出你代码中不符合规则的地方，部分问题支持自动修复；总结起来就两个功能：

*  代码质量检查可以发现代码中存在的可能错误，如使用未声明变量、声明而未使用的变量、修改 const 变量、代码中使用debugger等等
 *  代码格式化可以用来统一团队的代码风格，比如加不加分号、使用 tab 还是空格、字符串使用单引号 等等

#### 如何在vscode中启用ESLint ####

vscode使用`ESLint`进行代码检查的条件：

*  首先，需要在vscode中安装ESLint插件并启用，同时需要在vscode配置中开启eslint的检查。具体开启在用户级别的setting或者项目级别的settings.json中进行如下设置：\{ "eslint.enable": true, // 开启eslint检查 \} 复制代码
 *  其次，需要在当前项目根目录或者全局安装eslint，另外eslint的规则配置项中的依赖也需要安装。若没有安装，则在vsconde的eslint控制台输出如下错误：
 *  最后，需要在项目根目录有配置文件.eslintrc.js或者.eslintrc.json，或者在根项目的package.json中配置项eslintConfig中配置eslint的规则。若没有任何配置文件，则eslint控制台会输出如下错误：

上面三个步骤缺一不可，都配置完后我们在`vscode`编辑中就能看到代码被eslint检查的结果，js代码结果类似如下图所示：

![format_png 1][]

eslint根据设置值的规则检查两个问题：红色波浪线提示变量定义但未使用；黄色波浪线提示字符串必须使用单引号。对于这些错误，vscode编辑器将eslint的检查结果**仅展示**给开发者。

其实，`vscode`可以用eslint在文件保存时对部分的问题代码进行自动修复，如上图中的黄色波浪线部分，这需要在vscode配置eslint进行文件保存时自动格式化代码，具体是通过vscode的`codeActionsOnSave.source.fixAll`来设置，详情如下:

{
        "eslint.enable": true, // 开启eslint检查
        "editor.codeActionsOnSave": {
            // 使用eslint来fix，包括格式化会自动fix和代码质量检查会给出错误提示
            "source.fixAll.eslint": true
          }
    }
    复制代码

Copy

修改后再次保存代码，部分不符合规则的代码自动格式化了，如下图所示：

![format_png 2][]

顺便提示下：

> 若设置codeActionsOnSave.source.fixAll: true，表示使用所有提供的代码格式工具进行代码格式化，包括eslint，猛戳这里

### Prettier介绍 ###

#### Prettier的作用 ####

[Prettier][]的作用是**对代码进行格式化**，并不关注代码质量潜在问题的检查。

`Prettier` 自身的规范倾向于团队的代码风格的规范或统一，例如每行最大长度，单引号还是双引号，等号左右空格，使用`tab`还是空格等等。

除了js/ts外，它还支持对多种语言进行格式化，如vue、html、css、less、scss、json、jsx等等，是一个比较综合的代码格式化工具。

#### 有了ESLint为啥还要用Prettier ####

介绍`ESLint`时说到它也有代码格式化的功能，为啥还需要用`Prettier`，引用[这篇文章][Link 2]介绍了几个点：

*  `ESLint` 安装和配置比较麻烦，而且 lint 的速度并不快
 *  `Prettier` 并不只针对 JavaScript，它可以格式化各种流行语言
 *  `Prettier` 的配置选项没那么眼花缭乱，比 `ESLint` 少很多，这在Prettier[选项的哲学][Link 3]中说明精简的原因。

#### 如何在vscode启用Prettier ####

在`vscode`中启用`Prettier`相对来说比较简单，并不需要在当前项目中安装`Prettier`，只需：

> 在vscode中安装Prettier插件并启用，同时需要设置Prettier为对应的代码默认格式化，或者将其设置为指定语言的代码格式化。

在用户级别的`settings.json`中设置编辑器的默认代码格式化器：

{
       "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
    复制代码

Copy

或者为指定语音设置默认格式化器：

{
       "[javascript]" {
           "editor.defaultFormatter": "esbenp.prettier-vscode"
       }
    }
    复制代码

Copy

上面虽然在vscode启用了Prettier，但是并没有在保存文件时进行代码格式化，要想实现自动保存代码进行代码格式化，需要：

*  vscode开启代码保存时进行格式化
 *  将`Prettier`作为默认的格式化工具，或者将`Prettier`设置为指定语言的格式化器
 *  是否设置需要`Prettier`的配置文件（`.prettierrc`或`.editorconfig`），有两种情况：

上面三个步骤的在vscode中的配置体现如下：

{
      "editor.formatOnSave": true, // 开启保存文件自动格式化代码
      "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的代码格式化工具
      "prettier.requireConfig": true // 需要Prettier的配置文件
    }
    复制代码

Copy

再啰嗦一句：若设置需要配置文件，则必须要求根目录下有配置文件`.prettierrc`或`.editorconfig`中的一个或者两个同时存在，否则代码保存不会进行格式化。

可能你会对上面`.editorconfig`文件作为`Prettier`的配置文件感到疑惑，vscode的`Prettier`插件中有关配置文件有这样的一段描述，如下图：

![format_png 3][]

可以看出`Prettier`插件获取配置文件有一个优先级：`.prettierrc` > `.editorconfig` > `vscode默认配置`。

上面的前两者并不是说`.prettierrc`和`.editorconfig`同时存在时，后者的配置内容就被忽略，实际的表现：

> .prettierrc和.editorconfig同时存在时，二者内容会进行合并，若配置项有冲突，这.prettierrc的优先级更高。

### ESLint与Prettier的冲突 ###

#### 冲突的原因 ####

`ESLint`和`Prettier`都可以进行代码格式化方面，若二者同时出现下面的情况就会出现冲突：

*  **重叠的格式化规则不一致**，二者重叠的配置规则可以[参考这里][Link 4]。
 *  **vscode同时开启二者进行格式化**

满足上面的条件就会出现冲突，借鉴[这篇文章][Link 5]的一幅图来展示：

![format_png 4][]

可以看出文件保存后代码格式化时会出现`闪缩`的效果，这是因为二者都对代码进行了格式化，但是最终结果取决是谁最后一个进行格式化，从上图结果来看是`Prettier`是最后执行，它的格式化的结果为最终输出结果，原因：

> Prettier的格式化耗时 > ESLint的格式化耗时

最终以`Prettier`的格式化结果来输出，但是这就与`ESLint`的规则冲突，vscode编辑器就会将`ESLint`结果给展示出来。

#### 以和为贵：ESLint与Prettier和谐共处 ####

鉴于`Prettier`在代码格式化方面的优劣:

*  **优势**：可以对多种语言进行代码格式化，不仅仅是javascript
 *  **劣势**：不具备代码质量检查的能力

所以最佳方案是整合二者，取各方之长。但上一节分析了两者同时存在时冲突的原因，那么在**二者共存**的情况下解决思路就比较明确了，有两种方案：

*  **二者重叠的格式化规则保持一致**
 *  **二者共同作用的语言使用其中一种进行格式化**

下面分别对这两种方案进行介绍。

二者重叠的格式化规则保持一致

前面提到，二者之所以出现冲突的条件之一是同时在vscode中开启:

{
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "prettier.requireConfig": true,
        "eslint.enable": true,
        "editor.codeActionsOnSave": {
           "source.fixAll.eslint": true
         }
    }
    复制代码

Copy

那么要搞清楚二者重叠的规则有哪些？重叠的规则有哪些是冲突的呢？好在社区有了答案可以[参考这里][Link 4]，针对这种情况也给出了比较好的解决方案，具体来说：

> 在使用ESLint作为代码的格式化工具时，关闭可能与Prettier有冲突的格式化规则，把Prettier当做一个linter规则。

主要是使用下面两个包：

*  eslint-config-prettier 会关闭ESLint中有关代码格式化的配置，具体参考这里。
 *  eslint-plugin-prettier 把Prettier配置成ESLint的一个插件，让其当做一个linter规则来运行，可参考其官网。

> 注意：eslint-plugin-prettier需要项目安装Prettier依赖

这样，只需在项目根目录下的`.eslintrc.js`中配置如下：

{
      "extends": ["plugin:prettier/recommended"]
    }
    复制代码

Copy

而`plugin:prettier/recommended`帮我们做了如下事情：

{
      "extends": ["prettier"], // 使用eslinst-config-prettier中的配置项
      "plugins": ["prettier"], // 注册该prettier插件
      "rules": {
        "prettier/prettier": "error", // 在eslint中运行prettier，并启用该插件提供的规则
        "arrow-body-style": "off", // 关闭规则
        "prefer-arrow-callback": "off" // 关闭规则
      }
    }
    复制代码

Copy

这样配置后，`ESLint`进行格式化时就会忽略跟`Prettier`重叠的格式规则，这些交由`Prettier`来进行格式化，这样二者可以愉快地一起分工协作了。

二者共同作用的语言使用其中一种进行格式化

**方案一**让二者协同工作的思路在`ESLint`中关闭跟`Prettier`可能存在冲突的规则，但是并没有避免二者同时格式化，也就是说**实际上二者都参与了代码的格式化，只是输出内容一致而已**。

可以从vscode的用户`settings.json`配置文件可以看出：

`"editor.formatOnSave": true`和`"editor.defaultFormatter": "esbenp.prettier-vscode"`配置，告诉vscode在文件保存时都使用默认的`Prettier`来对代码格式化。

而`editor.codeActionsOnSave.source.fixAll.eslint: true`设置代码保存时使用`ESLint`来进行格式化。

因为方案一本质上执行了两次代码格式化，所以我们可以有另一种思考：**只使用二者中的一个进行代码格式化。**

我们知道，`ESLint`只对javascript、typescript以及javascrpitreact进行代码格式化，而对其他语言则无效，而`Prettier`是可以的，所以针对二者共同作用的语言，我们可以关闭文件保存时自动格式化，也就是关闭`Prettier`作为代码格式化工具，如下配置：

{
        "editor.formatOnSave": true, 
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        //针对共用的语言如JS、TS和JSX关闭文件保存自动格式化功能，通过eslint来做这件事 
        "[javascript]": { 
            "editor.formatOnSave": false 
        }, 
        "[javascriptreact]": {
            "editor.formatOnSave": false
        },
        "[typescript]": {
            "editor.formatOnSave": false
        },
        "editor.codeActionsOnSave": { //告诉ESLint插件在保存时运行 
            "source.fixAll.eslint": true 
        }
    }
    复制代码

Copy

这样，在js、ts或者jsx的文件保存时，不会调用`Prettier`进行格式化，而是交由`ESLint`来完成，除此之前的语言则是使用`Prettier`来进行代码格式化。

### 补充：editor.formatOnSave vs editor.codeActionsOnSave ###

`ESLint`和`Prettier`存在冲突的一个原因，也在于vscode对文件保存时的配置操作有重合的地方，体现在`formatOnSave`和`codeActionsOnSave`上，二者都可以实现文件保存时格式代码，有重合的地方，对称有人在vscode社区提出是否可以删除一个：[Merge/remove "editor.formatOnSave" and "editor.codeActionsOnSave->"source.fixAll""][Merge_remove _editor.formatOnSave_ and _editor.codeActionsOnSave-_source.fixAll]。

vscode并没有采纳删除或者合并的建议，其提供这两个的配置，其出发点是不一样的，下面是社区的一段描述：

But the main difference between `codeActionsOnSave` and `formatOnSave` remains that:

*  the latter (`formatOnSave`) only formats code,
 *  while the former (`codeActionsOnSave`) can run one or several commands on the code, commands which might not be related to formatting.

The following `editor.codeActionsOnSave` will always run `Organize Imports` followed by `Fix All` once organize imports finishes:

"editor.codeActionsOnSave": [
        "source.organizeImports",
        "source.fixAll"
    ]
    复制代码

[format_png]: https://img-blog.csdnimg.cn/img_convert/8e4603e8fce89d2d39f4c9e660afecef.webp?x-oss-process=image/format,png
[ESLint]: https://link.juejin.cn/?target=https%3A%2F%2Feslint.org%2F
[Link 1]: https://link.juejin.cn/?target=https%3A%2F%2Feslint.org%2Fdocs%2Flatest%2Frules%2F
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/a864359bb63da172fc0668c0be1e9c97.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/9ad7f0fba7609bfbfedef0a51cc1d6a1.webp?x-oss-process=image/format,png
[Prettier]: https://link.juejin.cn/?target=https%3A%2F%2Fprettier.io%2F
[Link 2]: https://link.juejin.cn/?target=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000022809751
[Link 3]: https://link.juejin.cn/?target=https%3A%2F%2Fprettier.io%2Fdocs%2Fen%2Foption-philosophy.html
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/5f4a9f6d67c51831f09b27dbfb0038f4.webp?x-oss-process=image/format,png
[Link 4]: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fprettier%2Feslint-config-prettier%2Fblob%2Fmain%2Findex.js%23L23
[Link 5]: https://juejin.cn/post/7067486691270852638#heading-2
[format_png 4]: https://img-blog.csdnimg.cn/img_convert/d9abf352635f4cf4d1852844af565f68.webp?x-oss-process=image/format,png
[Merge_remove _editor.formatOnSave_ and _editor.codeActionsOnSave-_source.fixAll]: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fvscode%2Fissues%2F87096