让 Angular 将 TSLint 迁移到 ESLint Banana-In-Box 错误

Posted 2023-03-13

【中文标题】让 Angular 将 TSLint 迁移到 ESLint Banana-In-Box 错误

【英文标题】：Having Angular Migrate TSLint to ESLint Banana-In-Box Error

【发布时间】：2021-03-14 17:14:35

【问题描述】：

我的 Angular 项目从 TSLint 迁移到 ESLint 时遇到了重大问题。我的工作方式是创建一个全新的项目（目前在 Angular 9 中），然后升级到 Angular 10.2。我遵循了@angular-eslint/schematic process 中的指南，并且运行了 npx tslint-to-eslint-config。但是，当我尝试通过我的 Visual Studio Code 扩展运行 ESLint 时，我收到以下错误，因为它尝试对我的 app.component.ts 文件进行 ESLint：

Error while loading rule '@angular-eslint/template/banana-in-box': You have used a rule which requires '@angular-eslint/template-parser' to be used as the 'parser' in your ESLint config.

以下是我的.eslintrc.js文件配置：

module.exports = 
"env": 
    "browser": true,
    "es6": true,
    "node": true
,
"extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
],
"ignorePatterns": ["node_modules/**/*", "**/node_modules/**/*", "dist/**/*"],
"parser": "@typescript-eslint/parser",
"parserOptions": 
    "project": "tsconfig.json",
    "sourceType": "module"
,
"plugins": [
    "eslint-plugin-import",
    "eslint-plugin-jsdoc",
    "@angular-eslint/eslint-plugin",
    "@angular-eslint/eslint-plugin-template",
    "eslint-plugin-prefer-arrow",
    "@typescript-eslint",
    "@typescript-eslint/tslint"
],
"rules": 
  ...
  "@angular-eslint/template/banana-in-box": "error",
  ...
,
root: true,
"overrides": [
  
    "files": ["*.ts"],
    "parserOptions": 
      "project": [
        "tsconfig.*?.json",
        "e2e/tsconfig.json"
      ],
      "createDefaultProgram": true
    ,
    "extends": [
      "plugin:@angular-eslint/recommended",
      "plugin:@angular-eslint/ng-cli-compat",
      "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
      "plugin:@angular-eslint/template/process-inline-templates"
    ],
    "rules": 
      "@angular-eslint/component-selector": [
        "error",  "type": "element", "prefix": "app", "style": "kebab-case" 
      ],
      "@angular-eslint/directive-selector": [
        "error",  "type": "attribute", "prefix": "app", "style": "camelCase" 
      ],
      "@typescript-eslint/explicit-member-accessibility": [
        "off",  "accessibility": "explicit" 
      ],
      "arrow-parens": [
        "off",
        "always"
      ],
      "import/order": "off"
    
  ,
  
    "files": [
      "*.html"
    ],
    "extends": [
      "plugin:@angular-eslint/template/recommended"
    ],
    "rules": 
  ,
  
    "files": ["*.component.html"],
    "extends": ["plugin:@angular-eslint/template/recommended"],
    "rules": 
      "max-len": ["error",  "code": 200 ]
    
  ,
  
    "files": ["*.component.ts"],
    "extends": ["plugin:@angular-eslint/template/process-inline-templates"]
  
];

每次我尝试将该模板添加为扩展时，都会出现另一个错误。唯一能阻止错误的是，如果我评论排除。有人可以帮我弄清楚如何让这个规则起作用并消除这个错误吗？

【问题讨论】：

这能回答你的问题吗？ ESLint error when trying to lint Angular templates

这里的帮助说明可能有用：github.com/typescript-eslint/tslint-to-eslint-config/issues/948

【参考方案1】：

替换 parser 部分对我有用：

---

你的配置：

"parser": "@typescript-eslint/parser",

应该替换为

"parser": "@angular-eslint/template-parser",