Angular Eslint 配置沒有擴展 Project Eslint 配置

Question

我有一個 angular 12.x 項目，它使用 eslint，這是當前的根配置文件：

{
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.base.json",
    "sourceType": "module"
  },
  "plugins": [
    "eslint-plugin-import",
    "@angular-eslint/eslint-plugin",
    "@angular-eslint/eslint-plugin-template",
    "@typescript-eslint"
  ],
  "extends": ["prettier", "eslint:recommended"],
  "rules":{... lots of rules}
}

我需要工作的規則之一是他們的文檔中描述的成員排序。

我有一個庫（使用 NX 創建）是可重用的組件，讓我在此示例中使用 MyComponent。 該組件有自己的 eslintrc，它擴展了根目錄，在其內容下方：

{
  "extends": ["../../../.eslintrc.json"], //path to the root eslintrc
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "plugin:@nrwl/nx/angular",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "suppressed",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "suppressed",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@nrwl/nx/angular-template"],
      "rules": {}
    }
  ]
}

這是使用上述 eslintrc 的MyComponent ：

export class MyComponent implements OnInit, OnDestroy {
  constructor() {}

  ngOnInit(): void {}

  @Dispatch()
  clearState() {
    return new ViewActions.ClearState();
  }

  private functio() {
    return null;
  }

  static handle() {}

  ngOnDestroy(): void {
    this.clearState();
  }
}

根據我鏈接的文檔中規則的默認配置，由於違反了規則，上面的代碼應該有從@Dispatch()開始一直到destroy()的錯誤。

但輸出與預期不同：

現在，如果我按照文檔將規則配置添加到我的組件 eslintrc.json 中，它將按預期工作，即：方法clearState將有錯誤，因為它已被注釋，並且預計會出現在未注釋之前方法，在這個ngOnInit和私有的錯誤也是如此。

實際問題是我的組件 eslintrc.json 的第一行extends針對根 eslintrc，我希望在該文件上覆蓋我的所有規則。 如果我將成員排序更改為根 eslintrc，規則將停止工作，並恢復為添加的圖像的錯誤。

此外，當從我的組件目錄運行npx eslint --print-config .\\my-component.ts ，我得到以下用於成員排序的配置：

"@typescript-eslint/member-ordering": [
      "error",
      {
        "default": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],

我真的不知道這是從哪里來的。

有誰知道為什么我的組件 eslint 沒有從根 eslintrc 擴展規則？

======更新==========

package.json 上的 Eslint 相關依賴

"@angular-eslint/eslint-plugin": "1.1.0",
"@angular-eslint/eslint-plugin-template": "1.1.0",
"@angular-eslint/template-parser": "12.3.0",
"@nrwl/eslint-plugin-nx": "12.9.0",
"@typescript-eslint/eslint-plugin": "4.28.5",
"@typescript-eslint/eslint-plugin-tslint": "4.12.0",
"@typescript-eslint/parser": "4.28.5",
"eslint": "7.32.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "2.10.3",
"eslint-plugin-import": "2.24.0",
"@angular-eslint/schematics": "12.3.1",

Answer 1

可能這有幫助。 我認為您通常應該在項目中使用"root": true 。