ESLint 擴展 vs 插件 v2020

Question

有一個已回答的問題在我看來實際上並沒有回答這個問題，關於 ESLint 中的extends: []與plugins: []之間的區別。

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

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 規則。
  • @typescript-eslint/explicit-function-return-type被擴充和強制執行。

這就是為什么當你使用plugin:@typescript-eslint/recommended時，即使plugins為空，事情也能正常工作。 編寫良好的插件/配置允許這種情況發生。