这份代码在保存时,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 的结果就行了。