ESLint 扩展 vs 插件 v2020

Question

关于 ESLint 中 extends: [] 与 plugins: [] 之间的区别，我认为已回答 question 并没有真正回答问题。

就我而言，我只是使用了扩展部分：

extends: [
  'plugin:@typescript-eslint/recommended',
],
plugins: [],
rules: {
  '@typescript-eslint/explicit-function-return-type': [
    'error',
    {
      allowExpressions: true,
    },
  ],
}

如您所见，我只是使用了来自plugin:@typescript-eslint/recommended 的预定义配置，并且还在rules: {} 部分覆盖了@typescript-eslint/explicit-function-return-type 规则。但是为什么我们需要这个 PLUGINS 部分呢？如果没有它一切正常？我错过了什么？

Answer 1

你做得对。

对于您的示例，有两种方法可以添加 typescript-eslint...

• 第一种方式：

{
  parser: "@typescript-eslint/parser",
  parserOptions: { sourceType: "module" },
  plugins: ["@typescript-eslint"],
  extends: [],
  rules: {
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        allowExpressions: true
      }
    ]
  }
}

• 第二种方式：

{
  plugins: [],
  extends: ["plugin:@typescript-eslint/recommended"],
  rules: {
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        allowExpressions: true
      }
    ]
  }
}

区别是……

• 第一种方式：
  • parser、parserOptions和plugins是手动添加的，
  • 仅强制执行 @typescript-eslint/explicit-function-return-type。
• 第二种方式：
  • plugin:@typescript-eslint/recommended 已自动添加parser、parserOptions 和plugins。
  • 已添加并强制执行推荐的打字稿规则。
  • @typescript-eslint/explicit-function-return-type 得到增强和强制执行。

这就是为什么当您使用plugin:@typescript-eslint/recommended 时，即使plugins 为空，也可以正常工作。编写良好的插件/配置允许这种情况发生。