Angular Eslint 配置没有扩展 Project Eslint 配置

Question

I have an angular 12.x project and it uses eslint, this is the current root configuration file:

{
  "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}
}

One of the rules I need to work is the member-ordering as described on their docs .

I have a libs (created using NX) that are re-usable components, let me use MyComponent for this example. That component has its own eslintrc which extends the root one, below its contents:

{
  "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": {}
    }
  ]
}

And this is MyComponent that uses uses the above eslintrc:

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();
  }
}

Based on the default config of the rule as per the doc I linked, the code above should have errors starting on the @Dispatch() all the way to the destroy() due to violation of the rule.

But the output is different from the expected:

Now, if I add the rule config as per the docs, into my component eslintrc.json, it will work as expected which is: Method clearState will have the error, as it is annotated and it is expected to come before a non-annotated method, in this ngOnInit and errors for the private one as well.

The actual problem is that the very first line on my component eslintrc.json has extends targeting the root eslintrc, and I wanted to have all my rules overridden on that file. If I change the member-ordering to the root eslintrc, the rule stops working and it is reverted to that error of the image added.

Also, when running npx eslint --print-config .\\my-component.ts from my component directory, I get following config for member-ordering being applied:

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

I really don't know where that is coming from.

Does anyone know why my component eslint is not extending the rules from the root eslintrc?

===== Update ==========

Eslint related dependencies on package.json

"@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

May be this helps. I think you should in general tend to use "root": true in the projects.