.eslintrc中plugins属性的作用及@typescript-eslint插件的使用场景

嘿，这个问题问到点子上了——我来帮你把plugins的作用讲明白，再拆解下为什么你当前配置里加不加它都没区别～

一、plugins属性的核心作用 #

ESLint本身的规则和功能是基础款的，plugins就是用来给它“加装扩展包”的：

• 插件可以提供额外的规则（比如TypeScript专属的语法检查规则）、自定义解析器（就像你用的@typescript-eslint/parser，其实也是这个插件的一部分）、甚至是处理器（比如处理非JS/TS文件，像.vue、.md里的代码块）。
• 注意：插件里的规则默认不会自动生效，要么你手动在rules里单独开启，要么通过extends引入插件提供的预设（比如plugin:@typescript-eslint/recommended）来批量开启规则。

二、为什么你的配置里加不加plugins: ['@typescript-eslint']都没变化？ #

看你的配置代码：

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
};

关键就在extends里的plugin:@typescript-eslint/recommended——当你使用这种plugin:插件名/预设名格式的扩展时，ESLint会自动加载对应的插件，不需要你再手动在plugins里声明。所以你写的plugins: ['@typescript-eslint']其实是冗余的，加不加都不影响ESLint的运行。

三、什么时候必须手动配置plugins？ #

只有当你不依赖插件的预设，需要直接使用插件的特定功能时，才必须手动声明：

• 场景1：单独使用插件里的某条规则，不用预设
  比如你不想用@typescript-eslint的全套推荐规则，只想开启@typescript-eslint/no-unused-vars这一条，那你就得先在plugins里声明@typescript-eslint，然后在rules里配置：

  module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'], // 必须加
    rules: {
      '@typescript-eslint/no-unused-vars': 'error'
    }
  };
  

• 场景2：使用插件提供的处理器
  比如你用eslint-plugin-vue处理.vue文件，需要指定处理器时，得先声明插件：

  module.exports = {
    plugins: ['vue'], // 必须加
    overrides: [
      {
        files: ['*.vue'],
        processor: 'vue/.vue'
      }
    ]
  };
  

• 场景3：需要给插件配置自定义选项
  有些插件支持全局配置选项，这时候你得先声明插件，再在settings里配置（比如某些代码规范插件的自定义规则集）。

内容的提问来源于stack exchange，提问作者Gieted