关于eslint:ESLint配置文件pluginsextendsrules的区别

一、rules

定议各种限定规定，lint 工具的根本目标，就是对代码进行各种限定，对立格调。因为每个人、每个团队谋求的格调不同，所以工具也会提供各种配置，帮忙限定代码

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

二、extends

不同我的项目，如果心愿应用雷同的 rules，间接复制粘贴显然不是一个好办法，一是 rules 太多，配置文件会显得很乱，二是无奈同步更新，举荐应用的办法是把所需的 rules 抽离成一个 npm 包，须要的时候再通过 extends 援用。而且对于这些抽离进去的包，有着对立的命名标准
extends 的模块名称以 eslint-config- 结尾，例如 eslint-config-myconfig 也反对 npm 作用域模块。例如 @scope/eslint-config 或 @scope/eslint-config-myconfig）
应用的时候能够用全称，也能够用缩写

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'
  ], 
  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",
  }
}

这样就能够清晰的看到格局问题了