ESLint error when trying to lint Angular templates
Your config here overrides the parser used for angular templates. This means that you're not using @typescript-eslint/parser
to parse your angular templates.
{
files: ["*.component.html"],
parser: "@angular-eslint/template-parser",
parserOptions: {
project: "./tsconfig.app.json",
ecmaVersion: 2020,
sourceType: "module",
},
plugins: ["@angular-eslint/template"],
},
This makes sense, because @typescript-eslint/parser
cannot understand angular templates.
However @angular-eslint/template-parser
also does not have the infrastructure required to provide the information for type-aware linting.
This is why the lint rule fails on your file.
You need to disable all type-aware lint rules on your files parsed with @angular-eslint/template-parser
Richard
Updated on July 25, 2022Comments
-
Richard almost 2 years
I have an Angular 10 app set up with eslint and prettier, which worked fine so far for linting Typescript files. I'm now trying to lint my component template files as well following this doc.
But when I run it with
eslint . --ext .js,.ts,.component.html --fix
I keep gettingError while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
My
.eslintrc.js
looks like this (note the second block in theoverrides
section):module.exports = { extends: [ "plugin:@angular-eslint/recommended", // For spec files "plugin:jasmine/recommended", // AirBnB Styleguide rules "airbnb-typescript/base", // Settings for Prettier "prettier/@typescript-eslint", "plugin:prettier/recommended", ], plugins: [ "prettier", "jasmine", ], rules: { "import/no-unresolved": "off", "@angular-eslint/component-selector": [ "error", { type: "element", prefix: "icc", style: "kebab-case" } ], "@angular-eslint/directive-selector": [ "error", { type: "attribute", prefix: "icc", style: "camelCase" } ], "import/extensions": "off", "@typescript-eslint/lines-between-class-members": "off", "lines-between-class-members": "off", "class-methods-use-this": "off", "import/prefer-default-export": "off", "prettier/prettier": ["error", { "endOfLine":"auto" }], }, parser: "@typescript-eslint/parser", parserOptions: { project: "./tsconfig.app.json", ecmaVersion: 2020, sourceType: "module", }, settings: { 'import/resolver': { node: { extensions: ['.ts', '.js'], moduleDirectory: ['node_modules', 'src/app'], } } }, overrides: [ { files: ["*.component.ts"], parser: "@typescript-eslint/parser", parserOptions: { project: "./tsconfig.app.json", ecmaVersion: 2020, sourceType: "module", }, plugins: ["@angular-eslint/template"], processor: "@angular-eslint/template/extract-inline-html", }, { files: ["*.component.html"], parser: "@angular-eslint/template-parser", parserOptions: { project: "./tsconfig.app.json", ecmaVersion: 2020, sourceType: "module", }, plugins: ["@angular-eslint/template"], }, { files: ["src/**/*.spec.ts", "src/**/*.d.ts"], parser: "@typescript-eslint/parser", parserOptions: { project: "./tsconfig.spec.json", ecmaVersion: 2020, sourceType: "module", }, // Jasmine rules extends: ["plugin:jasmine/recommended"], // Plugin to run Jasmine rules plugins: ["jasmine"], env: { jasmine: true }, } ], };
As you can see I specify
parserOptions.project
everywhere. I'm especially confused that the error message complains about something relating to@typescript-eslint/parser
which is not the parser that should be used anyway for templates. Removing theparserOptions
block from the overrides section does not make a difference.I could set
"@typescript-eslint/dot-notation": "off"
for all the rules it complains about but obviously that's not ideal. Can somebody point me towards what I'm missing?UPDATE: I've turned off all type-aware rules as Brad suggested. However, the error I'm now getting is:
TypeError: Cannot read property 'length' of undefined Occurred while linting /path/to/src/app/app.component.html:1 at getUseStrictDirectives (/path/to/node_modules/eslint/lib/rules/strict.js:27:36)
But my
app.component.html
just looks like this:<div class="content-root"> <router-outlet></router-outlet> </div>
So once again, I'm lost.
UPDATE 2: I've finally managed to get it working by turning rule after rule off for the template parser as Brad suggested in his answer. My working
overrides
block now looks like this:{ files: ["*.component.html"], parser: "@angular-eslint/template-parser", rules: { "@typescript-eslint/dot-notation": "off", "@typescript-eslint/no-implied-eval": "off", "@typescript-eslint/no-throw-literal": "off", "strict": "off", "import/first": "off", "lines-around-directive": "off" }, plugins: ["@angular-eslint/template"], },