Angular Eslint 配置未扩展 Project Eslint 配置

Posted 2023-03-27

【中文标题】Angular Eslint 配置未扩展 Project Eslint 配置

【英文标题】：Angular Eslint config is not extending Project Eslint config

【发布时间】：2021-12-09 10:25:30

【问题描述】：

我有一个 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

我需要遵守的规则之一是member-ordering as described on their docs。

我有一个可重用组件的库（使用 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": 
    
  ]

这是MyComponent 使用上面的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();
  

根据我链接的文档中规则的默认配置，由于违反规则，上面的代码应该从@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",

【问题讨论】：

也许这 (***.com/a/68069447/1398461) 有帮助。我认为您通常应该在项目中倾向于使用 "root": true (github.com/facebook/create-react-app/issues/…)。

你是对的@kuldeep。如果您将选项设置为特定库，则 root 选项可能不适用于某些项目，但我的情况并非如此。我发现由于我正在尝试修复的 NX 而引发的其他一些问题，但与此没有直接关系。感谢您指出。

您可以发表您的评论作为答案，以便我将其标记为它。

当然，我希望它对你有所帮助:) 干杯

【参考方案1】：

可能是this 帮助。我认为您通常应该在项目中使用"root": true。