项目中的 ESLint 配置中使用了 Airbnb JavaScript 风格指南校验后,其规则之一是代码结束后面要加分号,而我们在 Prettier 配置文件中加了代码结束后面不加分号的配置项,这样就有冲突了,会出现用 Prettier 格式化后的代码,ESLint 检测到格式有问题的,从而抛出错误提示。
解决两者冲突问题,需要用到 eslint-plugin-prettier 和 eslint-config-prettier。
-
eslint-plugin-prettier
将 Prettier 的规则设置到 ESLint 的规则中。 -
eslint-config-prettier
关闭 ESLint 中与 Prettier 中会发生冲突的规则。
最后形成优先级:Prettier 配置规则
>ESLint 配置规则
。
安装插件
npm i eslint-plugin-prettier eslint-config-prettier -D
在.eslintrc.js
添加 prettier 插件
module.exports = {
...
extends: [
'plugin:vue/essential',
'airbnb-base',
'plugin:prettier/recommended' // 添加 prettier 插件
],
...
}
这样,在执行eslint --fix
命令时,ESLint 就会按照 Prettier 的配置规则来格式化代码,轻松解决二者冲突问题。
参考资料