将angular 9升级到10后如何更新eslint的配置

Question

将 angular 从 9 升级到 10 并运行后npm run lint，我得到了这个实验> ng lint --fix

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(tsConfig).

我的 angular.json 是：

    ..."lint": {
      "builder": "@angular-eslint/builder:lint",
      "options": {
        "eslintConfig": ".eslintrc.js",
        "tsConfig": [
          "tsconfig.app.json",
          "tsconfig.spec.json",
          "e2e/tsconfig.json"
        ],
        "exclude": ["**/node_modules/**"]
      }
    },...

这是我的 package.json - devDependencies：

..."@angular-devkit/build-angular": "~0.1001.1",
"@angular-eslint/builder": "0.3.0-beta.1",
"@angular-eslint/eslint-plugin": "0.0.1-alpha.32",
"@angular-eslint/eslint-plugin-template": "0.0.1-alpha.32",
"@angular-eslint/template-parser": "0.0.1-alpha.32",
"@angular/cli": "~10.1.0",
"@angular/compiler-cli": "~10.1.1",
"@angular/language-service": "~10.1.1",
"@types/file-saver": "^2.0.1",
"@types/google-libphonenumber": "^7.4.19",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@typescript-eslint/eslint-plugin": "2.31.0",
"@typescript-eslint/parser": "2.31.0",
"codelyzer": "^5.2.2",
"eslint": "^7.6.0",
"eslint-config-airbnb-typescript": "^8.0.2",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-prettier": "^3.1.4",...

当我用 'lintFilePatterns' 替换 'tsConfig' 时，cli 说：

error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: tsconfig.app.json.
The extension for the file (.json) is non-standard. You should add "parserOptions.extraFileExtensions" to your config

我应该更新什么？

Answer 1

我对 Angular 8 有同样的问题。问题是 angular-eslint 中的构建器不支持 tsConfig 选项：https : //github.com/angular-eslint/angular-eslint/blob/master/packages/builder/ src/schema.d.ts

我的解决方案是删除 tsConfig 仅用于 linting 并将“include”文件复制到“lintFilePatterns”。我在我的项目根目录中创建了 .eslintignore，我在其中列出了我拥有的所有“排除”文件（即 node_modules）。

我的 angular.json：

  ..."lint": {
      "builder": "@angular-eslint/builder:lint",
      "options": {
        "eslintConfig": ".eslintrc.js",
        "lintFilePatterns": [
          "**/*.spec.ts",
          "**/*.d.ts"
        ]
      }
    },...

然后.eslintignore

node_modules/*

这让 ng lint 为我工作

Answer 2

您应该启动以下命令：

ng g @angular-eslint/schematics:convert-tslint-to-eslint {{YOUR_PROJECT_NAME_GOES_HERE}}

它会做很多事情，但你的错误在哪里：

文档：https : //github.com/angular-eslint/angular-eslint

Answer 3

坚持文档https://github.com/angular-eslint/angular-eslint，问题来自于角度的版本。

目前，angular-eslint支持旧的 typescript (<=3.10)，因此我们需要使用 <10.0.6 的 Angular 版本（10.1.x 使用的是 typescript 4.0）。

我想我需要等待兼容性，当我可以解决这个冲突时会更新。如果你遇到和我一样的问题，你可以尝试将 Angular 降级到 v10.0.6，如​​果你能解决它，我很高兴你能把解决方案放在这里。：D