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

389cadcom

一、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",
  }
}

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

阅读 1.2k
0 声望
0 粉丝
0 条评论
你知道吗?

0 声望
0 粉丝
文章目录
宣传栏