ESLint配置文件plugins、extends、rules的区别

一、rules

定议各种限定规则，lint 工具的基本目的，就是对代码进行各种限定，统一风格。因为每个人、每个团队追求的风格不同，所以工具也会提供各种配置，帮助限定代码

module.exports = {
  extends: [],
  plugins: [],
  rules: {
    'quotes': 'single',
    'space-before-blocks': 'always',
  },
}

二、extends

指定的规范，去检查指定类型的文件,
1.根据 @typescript-eslint/recommended 规范，检查 ts 代码。
2.根据 eslint:recommended + prettier 规范，去检查 js 代码。
存在某些规范冲突时，后面的会覆盖掉前面的,
Prettier制定的规范，会覆盖掉 eslint:recommended 的某些规范

使用的时候可以用全称，也可以用缩写

module.exports = {
  extends: [
    'eslint-config-myconfig', // 全称
    //'myconfig'                   缩写
  ], 
  plugins: [],
  rules: {},
}

extends 多个模块，如果规则冲突，位置靠后的包将覆盖前面的。rules 中的规则相同，并且优先级恒定高于 extends

module.exports = {
  extends: [
    'eslint:recommend',
    'plugin:vue/vue3-recommended',
    'prettier',
    'prettier/@typescript-eslint'    //8.x所有配置已合并一个
  ], 
  plugins: [],
  rules: {},
}

三、plugin

可以使用 plugin 定义自己的规则 eslint-plugin-react, eslint-plugin-vue
引入 plugin 可以理解为引入了额外的 rules，需要在 rules、extends 中定义后才会生效

module.exports = {
  extends: [
   'myconfig'                      //缩写
    'plugin:myplugin/recommended'  //插件中的规则 extends
  ], 
  plugins: ['myplugin'],
  rules: {
    'myplugin/hello': true      //  自定义插件规则
  },
}

vue-cli配置

*extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier']*
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    'prettier',
    "prettier/vue",
    // 'plugin:@typescript-eslint/eslint-recommended',
    //"prettier/@typescript-eslint",
  ],
  plugins: [
    'prettier',
    // "@typescript-eslint"
  ],
  rules: {
    'prettier/prettier': 'warn',
  },
}

四、Prettier

统一项目中的代码风格，有两种方法避免 rules 与 Prettier 产生冲突

extends

第一种是对于 Prettier 中所有的配置，ESLint 都进行避让，如：Prettier 可以设置是否每句话后面都加分号。ESLint 进行避让的方法是不检查，也就是加或者不加都不报错，完全不校验

yarn add eslint-config-prettier -D
module.exports = {
  extends: ['prettier'],
  plugins: [],
  rules: {},
}

这样设置之后，编译器以及控制台中不会报错。保存（如果设置了自动格式化）或者执行命令行格式化的时候，会将代码按 Prettier 的配置 format

plugin

有的同学可能受不了格式错误不提示，所以希望在控制台里看到对应的标红，在控制台里看到编译失败、警告。这时候就可以使用 plugins

yarn add eslint-plugin-prettier -D
module.exports = {
  extends: [],
  plugins: ['prettier'],
  rules: {
    "prettier/prettier": "warn",
  }
}

这样就可以清晰的看到格式问题了