vscode 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 的结果就行了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。