NX 工作区的根“.eslintrc.json”文件内的规则未扩展到项目的“.eslintrc.json”文件

Question

我的 root 里面有一些规则.eslintrc.json。这是文件。

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx", "react", "@typescript-eslint", "prettier"],
  "extends": [
    "plugin:react/recommended",
    "google",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "camelcase": "off",
    "prettier/prettier": 0,
    "no-unused-vars": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-empty-function": "off",
    "require-jsdoc": 0,
    "no-invalid-this": 0,
    "valid-jsdoc": 0,
    "indent": "off",
    "linebreak-style": "off",
    "object-curly-spacing": 0,
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "operator-linebreak": [
      "error",
      "after",
      { "overrides": { "?": "before", ":": "before" } }
    ],
    // React
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0, // NEXT dynamic imports
    "comma-dangle": [
      "error",
      {
        "arrays": "only-multiline",
        "objects": "only-multiline",
        "imports": "only-multiline",
        "exports": "only-multiline",
        "functions": "only-multiline"
      }
    ],
    "max-len": [
      "error",
      {
        "code": 80,
        "ignoreTrailingComments": true,
        "ignoreRegExpLiterals": true,
        "ignoreUrls": true,
        "tabWidth": 2,
        "ignorePattern": ".*[as|import]"
      }
    ]
  },
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "*",
                "onlyDependOnLibsWithTags": ["*"]
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {}
    }
  ]
}

我有一个.eslintrc.json内部项目，它从根文件扩展规则。然而，这些规则并未得到应用。这就是文件的样子。

{
  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {}
    },
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "rules": {}
    }
  ],
  "rules": {
    "camelcase": "off",
    "prettier/prettier": 0,
    "no-unused-vars": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-empty-function": "off",
    "require-jsdoc": 0,
    "no-invalid-this": 0,
    "valid-jsdoc": 0,
    "indent": "off",
    "linebreak-style": "off",
    "object-curly-spacing": 0,
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "operator-linebreak": [
      "error",
      "after",
      { "overrides": { "?": "before", ":": "before" } }
    ],
    // React
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0, // NEXT dynamic imports
    "comma-dangle": [
      "error",
      {
        "arrays": "only-multiline",
        "objects": "only-multiline",
        "imports": "only-multiline",
        "exports": "only-multiline",
        "functions": "only-multiline"
      }
    ],
    "max-len": [
      "error",
      {
        "code": 80,
        "ignoreTrailingComments": true,
        "ignoreRegExpLiterals": true,
        "ignoreUrls": true,
        "tabWidth": 2,
        "ignorePattern": ".*[as|import]"
      }
    ]
  }
}

因此，我被迫手动将规则从根文件复制到项目内的文件。这并不理想，所以我希望有人能指出我可能做错了什么。

Answer 1

我遇到过类似的事情并找到了一些相关的帖子：

• https://github.com/nrwl/nx/issues/5866
• Nx/Angular 项目的 Esslint 配置（无主机元数据属性）
• 如何覆盖我的 nx 工作区中的 eslint 规则？
• 如何向 eslint 添加 typescript-eslint 规则
• https://github.com/nrwl/nx/issues/7759

我的情况是我想no-unreachable在我的 nx 工作区中的所有应用程序和库上启用错误级别。我正在使用 NX 版本 13。我myapp（NestJS 应用程序）中有一个文件包含一行无法访问的代码。

这是我观察到的：

场景 1：默认 eslint 配置

使用默认配置，我得到：

$ nx lint myapp
...
> NX SUCCESS 运行目标“lint”成功

我什至没有收到无法访问代码的警告。

场景 2：向 root eslint 规则添加规则

在根目录中添加rules.no-unreachable，.eslintrc.json如下所示：

$ nx lint myapp
...
>  NX   SUCCESS  Running target "lint" succeeded

结果是：

$ nx lint myapp
...
> NX SUCCESS 运行目标“lint”成功

这不是我所期望的。我预料到会失败。

场景 3：将规则添加到根 eslint 覆盖

在根目录中添加rules.overrides，.eslintrc.json如下所示：

{
  "rules": {
    "no-unreachable": "error"
  }
...

注意： overrides 数组中有多个元素，“rules”键被添加到文件与 *.ts 文件匹配且扩展的元素中@nrwl/nx/typescript。选择哪个覆盖数组元素很重要。

结果是：

$ nx lint myapp
...
/Users/myuser/src/myrepo/apps/myapp/src/app/mymodule/mymodule.service.ts
  82:9 错误 无法访问代码 no-unreachable
> NX 错误运行目标“myapp:lint”失败

耶！我预料到会失败，结果却失败了。

场景 4：向 myapp 的 eslint 规则添加规则

将 Rules.no-unreachable 添加到 myapp 中，.eslintrc.json如下所示：

$ nx lint myapp
...
>  NX   SUCCESS  Running target "lint" succeeded

结果是：

$ nx lint myapp
...
/Users/myuser/src/myrepo/apps/myapp/src/app/mymodule/mymodule.service.ts
  82:9 错误 无法访问代码 no-unreachable
> NX 错误运行目标“myapp:lint”失败

耶！我预料到会失败，结果却失败了。

场景 5：向 myapp 的 eslint 覆盖添加规则

在 myapp 中添加rules.overrides，.eslintrc.json如下所示：

{
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "rules": {
        "no-unreachable": "error"
      }
    },
...

注意：如前所述，哪个覆盖您添加到的数组元素很重要。

结果是：

$ nx lint myapp
...
/Users/myuser/src/myrepo/apps/myapp/src/app/mymodule/mymodule.service.ts
  82:9 错误 无法访问代码 no-unreachable
...
> NX 错误运行目标“myapp:lint”失败

耶！我预料到会失败，结果却失败了。

建议

我查看了问题中的 tsconfig，但我不清楚哪些规则不适用。如果你能回答我可能会有更具体的建议。

同时，根据我上面完成的这些场景，我认为您有两个一般选择：

选项 1：将规则放在根目录的“overrides”部分.eslintrc.json。这将导致该规则应用于与相关文件模式匹配的所有文件（例如*.ts、*.tsx）。

选项 2：将规则放入应用程序（或库）的“规则”部分.eslintrc.json。这将导致该规则适用于该应用程序（或库）中的所有内容。您还可以将其放在“覆盖”部分中以进行更精细的控制。

我认为“扩展”将遵循与此处的“规则”类似的模式，这意味着您可以将扩展放在根目录的覆盖部分中（选项 1），或者将扩展放在应用程序的“扩展”部分中。

eslint 文档在这里解释了有关覆盖的更多信息：https ://eslint.org/docs/user-guide/configuring/configuration-files#how-do-overrides-work 。