Migrating ESLint9 Older Config to new Flat Config using @angular-eslint/template-parser as template parser not working

Question

Using the tool @eslint/migrate-config to migrate to the new ESlint (version 9) flat config is not working.

Cannot integrate @angular-eslint/template-parser properly.

.eslintrc.json

{
    "root": true,
    "ignorePatterns": ["projects/**/*"],
    "overrides": [
      {
        "files": ["*.ts"],
        "parserOptions": {
          "project": ["tsconfig.json"],
          "createDefaultProgram": true
        },
        "extends": [
          "plugin:@angular-eslint/recommended",
          "plugin:@angular-eslint/template/process-inline-templates"
        ],
        "rules": {
          "@angular-eslint/directive-selector": [
            "error",
            {
              "type": "attribute",
              "prefix": "rr",
              "style": "camelCase"
            }
          ],
          "@angular-eslint/component-selector": [
            "error",
            {
              "type": "element",
              "prefix": "rr",
              "style": "kebab-case"
            }
          ],
          "@angular-eslint/no-output-native": "off",
          "@angular-eslint/no-input-rename": "off"
        }
      },
      {
        "files": ["*.html"],
        "parser": "@angular-eslint/template-parser",
        "extends": ["plugin:@angular-eslint/template/recommended"],
        "rules": {}
      }
    ],
    "parserOptions": {
      "ecmaVersion": "latest"
    }
  }

Flat Config

import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";
import { includeIgnoreFile } from "@eslint/compat";
import  templateParser   from "@angular-eslint/template-parser"

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: js.configs.recommended,
    allConfig: js.configs.all
});
const gitignorePath = path.resolve(__dirname, ".gitignore");

export default [{
    ignores: ["electron/*", "cypress/*", "node_modules/*", "dist/*"],
}, includeIgnoreFile(gitignorePath), {
    languageOptions: {
        ecmaVersion: "latest",
        sourceType: "script",
    },
}, ...compat.extends(
    "plugin:@angular-eslint/recommended",
    "plugin:@angular-eslint/template/process-inline-templates",
).map(config => ({
    ...config,
    files: ["**/*.ts"],
})), {
    files: ["**/*.ts"],

    languageOptions: {
        ecmaVersion: 5,
        sourceType: "script",

        parserOptions: {
            project: ["tsconfig.json"],
            createDefaultProgram: true,
        },
    },

    rules: {
        "@angular-eslint/no-output-native": "off",
        "@angular-eslint/no-input-rename": "off",
    },
}, ...compat.extends("plugin:@angular-eslint/template/recommended").map(config => ({
    ...config,
    files: ["**/*.html"],
    
})), {
    files: ["**/*.html"],
    languageOptions: {
        parser: templateParser, <---- WONT WORK
        (parser: "@angular-eslint/template-parser) <----- WONT WORK EITHER

    },
    rules: {},
}];

And this is the error I get, it cannot find the parser. Docs tell me to reference the parser in the languageOptions.parser property, both with variable or directly not working.

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

I suspect the angular eslint plugin is not ready for eslint 9 yet.

Jannes · Accepted Answer · 2024-11-12 14:33:08Z

Hi is just migrated myself to ESLint 9. The only difference I can spot is me using the @angular-eslint/eslint-plugin-template instead of @angular-eslint/template/recommended.

In any case I will provide you my eslint.config.js. Maybe you can use and tweak it to your case.

import eslintParser from "@typescript-eslint/parser";
import angularTemplateParser from "@angular-eslint/template-parser";
import angularEslintPlugin from "@angular-eslint/eslint-plugin";
import angularTemplateEslintPlugin from "@angular-eslint/eslint-plugin-template";

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
    {
        ignores: ["dist/**", "node_modules/!**", "bin/!**", "build/!**"],
    },
    {
        files: ["**/*.js", "**/*.ts"],
        languageOptions: {
            sourceType: "module",
            parser: eslintParser,
            globals: {}
        },
        plugins: {
            "angular": angularEslintPlugin,
        },
        rules: {
            "semi": "error",
            "prefer-const": "error",
            "angular/component-class-suffix": "error",
            "angular/contextual-lifecycle": "error",
            // ...
        },
    },
    {
        files: ["**/*.html"],
        languageOptions: {
            sourceType: "module",
            parser: angularTemplateParser,
            globals: {}
        },
        plugins: {
            "angularTemplate": angularTemplateEslintPlugin,
        },
        rules: {
            "angularTemplate/banana-in-box" : "error",
            "angularTemplate/eqeqeq" : "error",
            "angularTemplate/no-negated-async" : "error",
        },
    }
];

Collectives™ on Stack Overflow

Migrating ESLint9 Older Config to new Flat Config using @angular-eslint/template-parser as template parser not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related