这份代码在保存时，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 的结果就行了。
网友评论