eslint vscode 自动格式化_vscode 中 prettier 和 ESLint 冲突的一点探讨

在前端开发中，很多人使用 prettier 作为代码格式化工具，用 ESLint 控制代码风格，以及检查错误。

但是这两个工具的配置是分开的，prettier 并不会根据 ESLint 的配置去格式化代码。当这两个工具同时工作时，产生的结果不一致，就会产生冲突。

例如，使用 vue-cli 创建一个项目，ESLint 配置为 standard 代码风格，prettier 没有设置规则（vue-cli 生成的项目里不包含 prettier 包，此时使用的 prettier 是 vscode 的扩展程序）。

vscode 配置了在文件保存时进行格式化和 ESLint 自动修复：

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
   "source.fixAll.eslint": true
},

这就导致了一个问题：保存文件时，ESLint 先 fix 了代码，之后 prettier 格式化了代码，导致代码变得不符合 ESLint 规则了。如图：

初始状态，错误的格式

正确的格式

这份代码在保存时，ESLint 会先从初始状态变成正确的格式，然后 prettier 又把代码变成了错误的格式。

以前当我发现这个问题时，我首先想的是把 prettier 规则配置的跟 ESLint 一致，这样就没问题了。

然而 standard 规则要求函数名和括号之间有一个空格，这就是space-before-function-paren 规则（ESLint 本身也会默认开启这个规则）。 但是 prettier 完全没有这个规则！prettier 不会处理这个空格的问题，所以根据 ESLint 配置修改 prettier 规则不可行。

后来我找到的解决办法是安装 prettier-eslint 包。其实它一共所需的依赖如下：

npm i @vue/cli-plugin-eslint babel-eslint eslint eslint-plugin-vue prettier prettier-eslint --save-dev

如果在使用 vue-cli 创建项目时已经选择了 babel、eslint，那么只需要安装缺少的包：

npm i prettier prettier-eslint --save-dev

这样，保存文件时会得到正确的代码格式。

那么 `prettier-eslint` 是怎么让结果变得正确了呢？昨天我去它的 github 看了看，原来它是先把代码用 prettier 格式化，然后再用 ESLint fix。

这和 vscode 保存文件时的流程是相反的。这样等于是调转了顺序，最后我们只要 ESLint fix 的结果就行了。

---

我转念一想，只用 ESLint fix 就可以保证代码风格了，那么关掉 vscode 保存时的自动格式化：

"editor.formatOnSave": false,

保存文件时，不用 prettier 格式化代码，只使用 ESLint fix 不就可以了吗？这样也不用安装 prettier-eslint 这个包了，简单省事。

我试验了一下确实是可行的。

但问题在于 ESLint fix 自动修复主要是针对 js、ts 的代码，对于其他代码如 html、css 等还是得用 prettier 。

如果项目中只要 ESLint 的 fix 就够了的话，我们可以关闭或者不安装 prettier 。如果仍然需要 prettier 来格式化一些文件，建议关闭 editor.formatOnSave ，在需要格式化时手动使用 prettier 。