原理

eslint 的功能：

  • 代码质量问题
  • 代码风格问题

prettier：代码格式化工具

两者配合的工作原理：

  • 禁用所有和 prettier 冲突的 eslint 的代码格式规则

  • 将所有 prettier 的规则和修改导入 eslint 中，在 eslint 统一的显示这些错误

    插件

  • 安装eslint-config-prettier插件配置集，把其配置到 eslintrc 规则的尾部。执行ESLint命令，会禁用那些和Prettier配置有冲突的规则。

  • 安装eslint-plugin-prettier插件，先使用Prettier对代码进行格式化，再并对不一致的地方进行标记；

这两个包配合使用，可以达到运行eslint --fix 时，采用 prettier 的配置规则 来格式化文件

  1. module.exports = {
  2.   "plugins": ["prettier"],
  3.   "rules": {
  4.     "prettier/prettier": "warn"
  5.   }
  6. }

https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
可以一次性设置插件eslint-config-prettier

  1. {
  2.   "extends": ["plugin:prettier/recommended"]
  3. }

配置参考

  • vue-cli 默认生成的 ```json module.exports = { root: true, env: { node: true, }, extends: [“plugin:vue/essential”, “eslint:recommended”, “@vue/prettier”], parserOptions: { parser: “babel-eslint”, }, rules: { “no-console”: process.env.NODE_ENV === “production” ? “warn” : “off”, “no-debugger”: process.env.NODE_ENV === “production” ? “warn” : “off”, }, };
  2. - rules：定义验证规则
  3. - extends：使用预设lint包，数组后面覆盖前面的
  4.    - `plugin:vue/essential` [https://eslint.vuejs.org/](https://eslint.vuejs.org/)
  5.    - `eslint:recommended`：ESLint内置的推荐规则，属性启用一系列核心规则，这些规则报告一些常见问题，在 [规则页面](https://link.juejin.cn/?target=https%3A%2F%2Feslint.bootcss.com%2Fdocs%2Frules%2F) 中被标记为✅
  6.    - `@vue/prettier`：@vue/eslint-config-prettier 配置如下
  7. ```javascript
  8. module.exports = {
  9.   plugins: ['prettier'],
  10.   extends: [
  11.     require.resolve('eslint-config-prettier'),
  12.     require.resolve('eslint-config-prettier/vue')
  13.   ],
  14.   rules: {
  15.     'prettier/prettier': 'warn'
  16.   }
  17. }

参考文章