eslint中插件和扩展的区别是什么？

Question

我不理解我们为什么需要插件和扩展。它们之间有什么区别，我需要其中的哪一个吗？

- jingteng

Answer 1

extends使用一个配置文件，在将其添加到extends选项时应用一组规则。而插件则提供了一组规则，您可以根据需要单独应用这些规则。仅拥有插件并不强制执行任何规则，您必须选择需要哪些规则。

插件可以提供零个、一个或多个配置文件。如果插件提供配置文件，则可以在将插件添加到插件部分后，在扩展部分加载该配置文件。

因此，插件为您提供了一些编码过的规则，您可以选择哪些规则是相关的。它还可以提供配置文件以应用作者认为逻辑上分组/相关的规则，但是插件不必提供配置文件。另一方面，extends基于配置文件规范提供了批量应用规则的能力。

示例插件 - eslint-plugin-react

{
  "plugins": [
    "react"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ]
}

示例配置 - eslint-config-google

{
  "extends": [
    "google"
  ]
}

- shmit

---

如果我扩展一个配置并且它有规则A，那么它将自动在我的配置中启用。如果我使用插件，我必须在我的规则部分中显式启用规则B。 - gaurav5430

值得注意的是，如果您使用的插件还提供了配置文件，如果您想要使用它，必须显式地将其 extends。 - Qwerty

"在插件部分添加插件后。" - 你确定吗？我只是使用了extends: ['plugin:react/recommended']，而没有将它添加到plugins: []部分中。 - Alexander Kim

在我看来，这并没有完全回答问题，这就是为什么会有一个关于该主题的后续问题：https://dev59.com/E1IH5IYBdhLWcg3wC4OJ - wedi

在使用extends时，不需要将插件添加到plugins中，我可以使用extends: ['plugin:prettier/recommended']而无需将prettier添加到plugins中。 - Bagaskara

Answer 2

此外，除了shmit提供的好答案之外:

extends

一般来说是关于扩展配置，不仅限于插件。可能的值有：

• "eslint:recommended"
• "eslint:all"
• 来自npm包的可共享配置（eslint-config-xxx或作用域名称）
• 来自npm包的插件配置（eslint-plugin-xxx或作用域名称）
• 另一个配置文件，例如"./my/path/.eslintrc.js"

插件表示法：plugin:<package name>/<configuration name>，例如对于eslint-plugin-react:

 "extends": ["plugin:react/recommended"]

通过扩展插件配置，我们可以获取推荐的规则而不需要手动添加它们。

plugins

插件是一种特殊的 eslint npm 包，提供了附加的规则定义(rules)、environments、processors 和 configs，用于不同配置的推荐/默认规则值。

.eslintrc.js文件中的plugins属性只是一个标志，在使用npm i安装后启用给定的插件。现在可以引用插件的规则，但必须手动设置所有的rules值。

把plugins看作是激活插件的一种方式——在每种情况下都需要将插件添加到链中一次以使用其规则。

如果已经在通过extends继承的配置中定义了plugins，则在自己的配置中不需要再次定义。

例如：

eslint-plugin-react已经包含了plugins: [ 'react' ]，因此在自己的配置中不再需要这个条目，直接使用插件规则即可。

- ford04

---

明确一点，如果您使用extends属性，则不必使用plugins属性。但是，如果您想设置自定义规则，则应使用plugins属性。这是正确的吗？ - Rami Chasygov

要使用特定插件的规则，您需要在每种情况下在plugins下提及该插件（将plugins视为激活插件的一种方式）。虽然您不需要在自己的配置中使用plugins，但如果它已经在通过extends扩展的配置中定义，则需要。请参见上面的eslint-plugin-react插件示例，其中已经包含了plugins：['react']。 - ford04

如果我运行 npm install eslint-plugin-react 并希望在自己的 eslintrc.js 中使用其配置，则必须首先定义 plugins: ['react']，然后才能使用 extends: ['plugin:react/recommended'] - 因此我确实需要在自己的配置中声明该插件。你是否描述了一个更具体的情况：如果我扩展了另一个插件，该插件本身使用了 eslint-plugin-react - 例如：eslint-plugin-using-react，那么我就不需要在自己的配置中激活 react 插件，因为我已经在自己的配置中有了 plugins: [plugin-using-react] 和 extends: [plugin:using-react/recommended]？ - tonywoode

eslint-plugin-react对我来说很好用，而且不需要将其包含在plugins中。我只需要添加extends: [ 'plugin:react/recommended' ]就可以了。如果我想要覆盖某个规则，我会使用rules: { 'react/react-in-jsx-scope': 'off' }，所以我真的不明白为什么需要plugins。 - Cathal Mac Donnacha

Answer 3

我发现插件可以增加额外的功能，而extends提供了一个基线，可以添加自己的自定义规则。感谢我的朋友奥利弗帮助我回答这个问题！

- jingteng