升级到 ESLint 时导入错误以定义规则

Posted 2023-03-13

【中文标题】升级到 ESLint 时导入错误以定义规则

【英文标题】：Upgrading to ESLint with error at imports for definition of rules

【发布时间】：2022-01-03 17:50:52

【问题描述】：

我正在处理一个本地项目，我已经将 Angular v9 升级到 v10 以及将 TSLint 升级到 ESLint。 我参考了这个 github repo for migraiton https://github.com/angular-eslint/angular-eslint

所以我的项目使用库，这意味着它确实有多个项目。 我配置了 eslintrc.json，但出现错误。 即将出现的第一个错误是

Definition for rule '@angular-eslint/component-selector' was not found  @angular-eslint/component-selector

即使 @angular-eslint/component-selector 是在 *.ts 文件的每一行中定义的，它也会引发该错误。

我的 Eslint 的 main lib 它看起来像这个 eslintrc.json

  "root": true,
  "ignorePatterns": [
    "!**/*"
  ],

  "overrides": [
    
      "files": [
        "*.ts"
      ],
      "parserOptions": 
        "project": [
          "**/tsconfig.json"
        ],
        "createDefaultProgram": true
      ,
      "extends": [
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
      ],

      "rules": 
        "@angular-eslint/component-selector": [
          "error",
          
            "prefix": "lib",
            "style": "kebab-case"
          
        ],
        "@angular-eslint/directive-selector": [
          "error",
          
            "prefix": "lib",
            "style": "camelCase"
          
        ],
        "max-len": ["error",  "code": 140 ],
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/ban-ts-comment": "off",
        "@typescript-eslint/naming-convention": [
          "error",
          
            "selector": "variable",
            "format": ["camelCase", "UPPER_CASE", "PascalCase"]
          
        ]
      
    ,
    
      "files": [
        "*.html"
      ],
      "rules": 
        "arrow-body-style":"error",
        "@typescript-eslint/prefer-function-type":"error"
       
    
  ]

这是我的 eslintrc.json 库之一

  "extends": "../../.eslintrc.json",
  "ignorePatterns": [
    "!**/*"
  ],
  "overrides": [
    
      "files": [
        "*.ts"
      ],
      "parserOptions": 
        "project": [
          "apps/login/tsconfig.app.json",
          "apps/login/tsconfig.spec.json",
          "apps/login/tsconfig.json"
        ],
        "createDefaultProgram": true
      ,
      "rules": 
        "@angular-eslint/directive-selector": [
          "error",
          
            "type": "attribute",
            "prefix": "app"
          
        ],
        "@angular-eslint/component-selector": [
          "error",
          
            "type": "element",
            "prefix": "app"
          
        ]
      
    ,
    
      "files": [
        "*.html"
      ],
      "rules": 
    
  ]

【参考方案1】：

大家可能都知道，我发现了错误。 这是因为在插件中需要添加 angular-eslint 插件。 我已经添加了这个

 "plugin:@angular-eslint/recommended",

它完成了这项工作。