使用“typescript-eslint/推荐”和“@angular-eslint/推荐”扩展多个规则集可以这样做吗？

Question

\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\n我已将 ESLint 规则集作为包下载并安装到我当前的项目中。我下载的规则集用于向项目环境添加对 Angular、TypeScript（当然还有 ECMAScript）的 ESLint 支持。我想创建一个 ESLint 配置，其中包含我需要从事该项目的开发人员遵守的“标准化代码风格”。

\n

\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\n首先我添加了plugin:@typescript-eslint/recommended. 后来我决定做出改变，我转而使用plugin:@angular-eslint/recommended. 我认为Angular-eslint-recommended扩展了 TS-ESLint 插件的规则集：plugin:@typescript-eslint/recommended但实际上，它仅扩展了插件：@typescript-eslint。

\n

问题：可以扩展多个规则集吗？扩展\n plugin:@typescript-eslint/recommended&plugin:@angular-eslint/recommended是否是我为 TS-Angular 项目提供适当的 Linting 支持所需的所有规则？

\n
\n

---

\n
\n

\n
• 到目前为止我读过的资源： \n
  \n
  1. 我发现的唯一一份参考文献扩展了两者
  \n
  2. 打字稿推荐：
  \n
  3. 角度推荐：
  \n
  \n
\n

\n

Answer 1

\n

您可以扩展的规则集数量没有限制

\n\n

但要知道你用来扩展它们的顺序会产生影响

\n

\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0\n这是因为规则集会覆盖位于其之后的其他规则集，换句话说；您放置在.eslintrc.json文件"extends": []数组字段中的第一个规则集将优先于也使用该"extends"字段扩展的所有其他规则集。

\n
\n

这也是前面的陈述的归结

\n

\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0\n当有两个或更多规则集被扩展时，就有可能有 2 个或更多规则相互冲突。事实上，当开始扩展 3 或 4 个规则集时，这几乎是一个保证。这个问题可以通过根据规则集在文件中的放置顺序创建层次结构来.eslintrc.json解决"extends"字段中的放置顺序创建层次结构，可以解决此问题。规则只能配置一次，因此当两个规则集尝试配置它们时，位于层次结构顶部的规则集将其配置应用于该规则，尝试配置该规则的所有其他规则集将应用到该规则。对于冲突的规则，ESLint 会忽略它（并且仅对于冲突的规则）。层次结构基于扩展字段扩展规则集的顺序，因此它是一个非常线性的军事风格层次结构。\n在美国军队中，中尉向中士发出命令，中士向列兵发出命令。它是一个线性的指挥链。

\n

下面演示了在规则冲突时如何扩展规则集：

\n

"extends": ["Top priority", "2nd priority", "Has no priority"]

\n

您可以看到，当扩展 3 个规则集时，第一个规则集优先于其他两个规则集，而第三个规则集没有优先级。

\n
\n
\n

她就是一个很好的例子：

\n\n

“我们将使用一个虚构的规则来证明任何任意规则都可以在这种情况下发挥作用，并且该规则实现的任何机制都不会改变我在下面概述的任何信息。”

\n

\n

• 假设有一条规则叫做"no-understating-jD3VS-awesomeness"

  \n
\n

• 假设此规则是基本 ESLint 规则，您不需要插件即可访问它。它始终可用。

  \n
\n

• 现在假设您将以下内容添加到您的.eslintrc.json字段"extends"中

  \n

     "extends": [\n     "eslint:recommended", \n     "plugin:@angular-eslint/recommended", \n     "plugin:@typescript-eslint/recommended"\n   ]\n

  \n
\n

\n
\n
\n

考虑以下对于每个带标签的规则集都成立

\n\n

\n
• "eslint:recommended"设置以下内容： \n

    "rules": {\n    "no-understating-jD3VS-awesomeness": "error"\n  }\n

  \n
\n

\n
\n

\n
• "plugin:@angular-eslint/recommended"设置以下内容： \n

    "rules": {\n    "no-understating-jD3VS-awesomeness": "off"\n  }\n

  \n
\n

\n
\n

\n
• "plugin:@typescript-eslint/recommended"设置以下内容： \n

    "rules": {\n    "no-understating-jD3VS-awesomeness": "error"\n  }\n

  \n
\n

\n
\n
\n

考虑到“例如”一词下所述的所有内容都是正确的：

\n

"no-understating-jDEVS-awesomeness"将被设置为，"error"因为扩展规则集"eslint:recommended"首先放置在扩展数组中。

\n

假设我们移动了"eslint:recommended"，扩展字段如下所示：

\n

   "extends": [\n     "plugin:@angular-eslint/recommended", \n     "plugin:@typescript-eslint/recommended"\n     "eslint:recommended", \n   ]\n

\n

在这种情况下，"no-understating-jDEVS-awesomeness"将被禁用（也称为设置为"off"），因为现在“plugin:@angular-eslint/recommended”优先于其他规则集。

\n\n\n
\n
\n

有理由优先考虑某些规则集

\n

在讨论的这一点上，很明显，当您配置字段时，extends您需要意识到每个规则集的放置位置。

\n

正如本摘录标签中所述，

\n

\n

“有充分的理由优先考虑特定的规则集”。

\n

\n

一般来说（当然也有极少数例外），您将希望插件规则集覆盖配置本机 ESLint 规则的规则集。因此，如果您要使用eslint:recommendedand @typescript-eslint/plugin:recommended，则需要先添加后者( @typescript-eslint/plugin:recommended)，因为它改变了某些 eslint 规则的工作方式，以便 eslint 可以与 TS 一起使用。如果您以相反的方式这样做，您将使用 eslint 规则覆盖“ts-eslint/plugin”规则集，这将完全破坏首先安装“ts-eslint/plugin”的整个目的。

\n
\n
\n

规则集 包含规则集

\n\n

plugin:@angular-eslint/recommended现在，就询问是否contains而言，可以在Packages Repo"plugin:@typescript-eslint/recommended"中找到答案。从表面上看，它将旧的（现已弃用）TSLint 规则转换为 ESLint/Angular 规则。这可能是在 TypeScript/ESLint 插件首次发布之前就给了他的包 TS 支持。

\n

简短的回答是，不，不是。

\n

不过，为了将来的参考，你问的问题是一个好问题，因为我很确定当你扩展一个简单的 ESLint 规则列表的规则集时，它不能扩展其他规则集，但是，当规则集是来自 ESLint-Plugin 的规则集时，该插件可以内置来自其他插件的规则，因此在这种情况下可以很好地扩展。

\n\n

最后一点：

\n

重要的是您要知道，还有ESLint-Config-Angular存储库，我相信它也扩展了 ESLint/Angular 插件的规则集。只要确保您不会将它们与您正在扩展的规则集（这是我在上面共享的几个段落的链接中的插件）混淆即可。

\n

我还没有看到回购协议，

\n
\n

希望这一切都有道理。

\n
\n