2022-12-06 解决 Prettier 和 ESLint

项目中的 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 的配置规则来格式化代码，轻松解决二者冲突问题。

参考资料

• eslint规则配置
• prettier插件