在前端开发中,很多人使用 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 。