Having Angular Migrate TSLint to ESLint Banana-In-Box Error

Question

I'm running into significant issues with my migration from TSLint to ESLint for my Angular project. The way I'm working is I'm creating a brand new project (currently in Angular 9), and then I upgrade to Angular 10.2. I have followed the guidelines in @angular-eslint/schematic process, and I have run the npx tslint-to-eslint-config. However, when I try to run ESLint via my Visual Studio Code extension, I get the following error as it tries to ESLint my app.component.ts file:

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.

The following is my .eslintrc.js file configuration:

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

Every time I try to add that template as an extension, it gives me another error. The only thing that stops the error is if I comment that rule out. Can someone help me figure out how to get this rule to work and eliminate this error?

Duntson

Does this answer your question? ESLint error when trying to lint Angular templates – Labored

The help instructions here might be useful: github.com/typescript-eslint/tslint-to-eslint-config/issues/948 – Kharif

Answer 1

Replacing the section parser did the trick for me:

---

Your config:

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

Should replace with

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

Paralysis