如何在我的 nx 工作区中覆盖 eslint 规则？答案

【问题标题】：How do I override an eslint rule in my nx workspace?如何在我的 nx 工作区中覆盖 eslint 规则？
【发布时间】：2021-08-22 19:04:52
【问题描述】：

如何覆盖 plugin:@nrwl/nx/typescript 中的 eslint 规则？我已对.eslintrc.json 的根进行了此更改。

"rules": {
  "@typescript-eslint/member-ordering": "warn"
},

在引入违反规则的演示后仍然会出错

D:\me\sample\apps\my-app\src\app\app.component.ts
  16:3  error  Member outOfOrder should be declared before all instance method definitions  @typescript-eslint/member-ordering

✖ 1 problem (1 error, 0 warnings)

Lint errors found in the listed files.

我也尝试将规则更改添加到打字稿的overrides 部分。

【问题讨论】：

查看相关问题github.com/nrwl/nx/issues/5866
查看相关问题的答案：stackoverflow.com/a/67992935/2519476
我遇到了类似的问题。我采取了与此处接受的答案不同的方法。查看答案：stackoverflow.com/a/71230627/990642。

标签： typescript eslint nrwl-nx

【解决方案1】：

无法在根级别进行设置，因为您项目的 .eslintrc.json 将始终覆盖这些更改，因为在覆盖部分设置了 @nrwl/nx/typescript。

不幸的是，您必须在覆盖部分中设置这是每个项目。

如果您有多个项目和/或多个更改需要应用，您可以将其提取到eslint-custom-overrides 文件中，并将其用作extends 部分中的最后一个：

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "plugin:@nrwl/nx/typescript",
        "../../eslintrc-custom-overrides.json"
      ],
   },
   ...
  ],
  ...
}

您的eslintrc-custom-overrides.json 如下所示：

{
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
         "@typescript-eslint/member-ordering": "warn"
      }
    }
  ]
}

查看NX Issue的更多详细信息。

【讨论】：

【解决方案2】：

我找到了一个非常适合我的解决方案，它可以避免任何复制粘贴（我认为这是不可接受的），并且或多或少违背了已接受答案中的“不可能”断言。对我来说，关键不是使用基于文件的覆盖，而是使用扩展。它工作得很好，并且完全符合我的要求（并且没有看到任何缺点）。希望对您有所帮助：

NextJS / React UI 项目

NodeJS GraphQL 项目的配置

所有 NextJS / UI 项目的配置

所有可以被上面的任何东西覆盖的配置

【讨论】：