Ошибка Angular Migrate TSLint to ESLint Banana-In-Box

Question

У меня возникли серьезные проблемы при переходе с TSLint на ESLint для моего проекта Angular. Я работаю так: я создаю новый проект (в настоящее время на Angular 9), а затем перехожу на Angular 10.2. Я следовал рекомендациям в процессе @angular-eslint/schematic, и я запустил npx tslint-to-eslint-config. Однако, когда я пытаюсь запустить ESLint через расширение Visual Studio Code, я получаю следующую ошибку при попытке выполнить ESLint мой файл app.component.ts:

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"]
  }
]};

Каждый раз, когда я пытаюсь добавить этот шаблон в качестве расширения, возникает новая ошибка. Единственное, что останавливает ошибку, - это если я прокомментирую это исключение. Может ли кто-нибудь помочь мне понять, как заставить это правило работать и устранить эту ошибку?

Answer 1

Замена раздела parser сделал трюк для меня:

---

Ваш конфиг:

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

Следует заменить на

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