typescript - ESLint-fel när man försöker lint-a Angular-mallar

Jag har en Angular 10-app uppsatt med eslint och prettier, som hittills fungerade bra för att linting Typescript-filer. Jag försöker nu lint mina komponentmallfiler också enligt denna dokumentation.

Men när jag kör det med eslint . --ext .js,.ts,.component.html --fix fortsätter jag att få

Error 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.

Min .eslintrc.js ser ut så här (notera den andra blocket i overrides-sektionen):

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

Som du kan se anger jag parserOptions.project överallt. Jag är särskilt förvirrad över att felmeddelandet klagar på något som rör @typescript-eslint/parser, vilket inte är den parser som ska användas för mallar ändå. Att ta bort parserOptions-blocket från overrides-sektionen gör ingen skillnad.

Jag skulle kunna sätta "@typescript-eslint/dot-notation": "off" för alla regler som det klagar på men uppenbarligen är det inte idealiskt. Kan någon visa mig vad jag missar?

UPPDATERING: Jag har stängt av alla typmedvetna regler som Brad föreslog. Men felet jag får nu är:

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)

Men min app.component.html ser bara ut så här:

<div class="content-root">
  <router-outlet></router-outlet>
</div>

Så återigen, jag är vilse.

UPPDATERING 2: Jag har äntligen lyckats få det att fungera genom att stänga av regel efter regel för malltolken som Brad föreslog i sitt svar. Min fungerande overrides-block ser nu ut så här:

{
  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"],
},

Svar #1

Din konfiguration här åsidosätter parsern som används för Angular-mallar. Detta betyder att du inte använder @typescript-eslint/parser för att tolka dina Angular-mallar.

{
  files: ["*.component.html"],
  parser: "@angular-eslint/template-parser",
  parserOptions: {
    project: "./tsconfig.app.json",
    ecmaVersion: 2020,
    sourceType: "module",
  },
  plugins: ["@angular-eslint/template"],
},

Detta är logiskt, eftersom @typescript-eslint/parser inte kan förstå Angular-mallar.

Men @angular-eslint/template-parser har heller inte den infrastruktur som krävs för att tillhandahålla information för typmedveten linting.

Detta är anledningen till att lint-regeln misslyckas på din fil.

Du behöver inaktivera alla typmedvetna lintregler på dina filer som analyseras med @angular-eslint/template-parser

Denna FAQ-artikel innehåller information om hur man inaktiverar typmedvetna regler på sådana filer https://typescript-eslint.io/troubleshooting/#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

Specifikt något som detta bör fungera med det nya platta konfigurationsformatet med typescript-eslint:s konfigurationsverktyg

export default tseslint.config(
  // ...
  {
    files: ["**/*.component.html"],
    extends: [tseslint.configs.disableTypeChecked],
  },
);

Eller utan konfigurationsverktyget:

export default [
  // ...
  {
    files: ["**/*.component.html"],
    ...tseslint.configs.disableTypeChecked,
  },
];

Relaterade artiklar