从 TSLint 迁移到 ESLint 和 ESLint 导致解析错误：Unexpected token < and does not check.ts files in angular v12

Question

I have migrated form Angular 10 to 12 and from TSLint to EsLint. But as it turned out my ESLint is not working properly. It does not check.ts files (cause I've never seen any ES errors so far) and my html files are getting this error ESLint: Parsing error: Unexpected token < on first line of code My ESLint settings are common, but here they are

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/ng-cli-compat",
        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "plugins": [
        "eslint-plugin-no-null",
        "eslint-plugin-unicorn",
        "eslint-plugin-html"
      ],
      "rules": {
        "@angular-eslint/component-max-inline-declarations": "error",
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/contextual-decorator": "error",
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/no-attribute-decorator": "error",
        "@angular-eslint/no-forward-ref": "error",
        "@angular-eslint/no-lifecycle-call": "error",
        "@angular-eslint/no-pipe-impure": "error",
        "@angular-eslint/no-queries-metadata-property": "error",
        "@angular-eslint/prefer-output-readonly": "error",
        "@angular-eslint/use-component-view-encapsulation": "error",
        "@typescript-eslint/array-type": [
          "error",
          {
            "default": "generic"
          }
        ],
        "@typescript-eslint/await-thenable": "error",
        "@typescript-eslint/ban-ts-comment": "error",
        "@typescript-eslint/consistent-type-definitions": "error",
        "@typescript-eslint/dot-notation": "off",
        "@typescript-eslint/explicit-member-accessibility": [
          "error",
          {
            "accessibility": "no-public"
          }
        ],
        "@typescript-eslint/no-empty-function": "error",
        "@typescript-eslint/no-empty-interface": "off",
        "@typescript-eslint/no-extraneous-class": "error",
        "@typescript-eslint/no-floating-promises": "off",
        "@typescript-eslint/no-for-in-array": "error",
        "@typescript-eslint/no-inferrable-types": "error",
        "@typescript-eslint/no-require-imports": "off",
        "@typescript-eslint/no-shadow": [
          "error",
          {
            "hoist": "never"
          }
        ],
        "@typescript-eslint/no-this-alias": "error",
        "@typescript-eslint/no-unnecessary-boolean-literal-compare": "error",
        "@typescript-eslint/no-unnecessary-type-arguments": "error",
        "@typescript-eslint/no-unnecessary-type-assertion": "error",
        "@typescript-eslint/no-unused-expressions": [
          "error",
          {
            "allowShortCircuit": true
          }
        ],
        "@typescript-eslint/no-var-requires": "error",
        "@typescript-eslint/prefer-readonly": "off",
        "@typescript-eslint/promise-function-async": "off",
        "@typescript-eslint/quotes": [
          "error",
          "single",
          {
            "avoidEscape": true
          }
        ],
        "@typescript-eslint/require-await": "error",
        "@typescript-eslint/restrict-plus-operands": "error",
        "@typescript-eslint/strict-boolean-expressions": "off",
        "@typescript-eslint/unbound-method": "error",
        "arrow-body-style": [
          "error",
          "always"
        ],
        "arrow-parens": [
          "error",
          "as-needed"
        ],
        "brace-style": [
          "error",
          "1tbs"
        ],
        "class-methods-use-this": "error",
        "comma-dangle": "error",
        "complexity": [
          "error",
          {
            "max": 20
          }
        ],
        "default-case": "error",
        "import/no-default-export": "error",
        "import/no-extraneous-dependencies": "off",
        "import/no-unassigned-import": "error",
        "import/order": "off",
        "max-len": [
          "error",
          {
            "ignorePattern": "^import |^export {(.*?)}|class [a-zA-Z]+ implements |// ",
            "code": 140
          }
        ],
        "max-lines": [
          "error",
          400
        ],
        "newline-per-chained-call": "error",
        "no-duplicate-case": "error",
        "no-duplicate-imports": "error",
        "no-empty": "error",
        "no-extra-bind": "error",
        "no-invalid-this": "error",
        "no-multiple-empty-lines": [
          "error",
          {
            "max": 1
          }
        ],
        "no-new-func": "error",
        "no-null/no-null": "off",
        "no-param-reassign": "error",
        "no-plusplus": "error",
        "no-redeclare": "error",
        "no-restricted-syntax": [
          "error",
          "ForInStatement"
        ],
        "no-return-await": "error",
        "no-sequences": "error",
        "no-sparse-arrays": "error",
        "no-template-curly-in-string": "error",
        "no-useless-constructor": "error",
        "no-void": "off",
        "padding-line-between-statements": [
          "error",
          {
            "blankLine": "always",
            "prev": "*",
            "next": "return"
          }
        ],
        "prefer-arrow/prefer-arrow-functions": "off",
        "prefer-object-spread": "error",
        "prefer-template": "error",
        "space-in-parens": [
          "error",
          "never"
        ],
        "unicorn/filename-case": "error",
        "yoda": "error"
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {
        "@angular-eslint/template/conditional-complexity": "error",
        "@angular-eslint/template/cyclomatic-complexity": "off",
        "@angular-eslint/template/eqeqeq": "off",
        "@angular-eslint/template/i18n": "off",
        "@angular-eslint/template/no-call-expression": "error",
        "@angular-eslint/template/no-negated-async": "off",
        "@angular-eslint/template/use-track-by-function": "off"
      }
    }
  ]
}

I think the problem is not in JSON file, but I don't have any clues what's causes the problem. My IDE is WebStorm

Answer 1

fixed the issue. It didn't install some dependencies in package.json . If someone will face same issue posting working example

"@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "4.3.0",
"angular-tslint-rules": "^1.20.4",
"eslint": "^7.27.0",
"eslint-plugin-import": "latest",
"eslint-plugin-html": "^1.4.0",
"eslint-config-standard-with-typescript": "^20.0.0",
"eslint-plugin-jsdoc": "latest",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-rxjs": "^3.1.0",
"eslint-plugin-rxjs-angular": "^1.0.4",
"eslint-plugin-no-null": "latest",
"eslint-plugin-prefer-arrow": "latest",
"eslint-plugin-unicorn": "latest",
"rxjs-tslint-rules": "^4.34.8",
"tslint-eslint-rules": "^5.4.0",
"typescript": "~4.2.4"