angular-eslint 和 typescript-eslint 之間的區別

Question

我正在研究最近從 v9 遷移到 v12 的 angular 項目。 我在 package.json 中看到 angular-eslint 和 typescript-eslint 包的 devDependencies 如下

      "devDependencies": {
    "@angular-devkit/build-angular": "12.2.11",
    "@angular-eslint/builder": "1.2.0",
    "@angular-eslint/eslint-plugin": "1.2.0",
    "@angular-eslint/eslint-plugin-template": "1.2.0",
    "@angular-eslint/schematics": "1.2.0",
    "@angular-eslint/template-parser": "1.2.0",
    "@angular/cli": "12.2.11",
    "@angular/compiler-cli": "12.2.11",
    "@angular/language-service": "12.2.11",
    "@compodoc/compodoc": "^1.1.11",
    "@storybook/addon-actions": "^6.4.9",
    "@storybook/addon-essentials": "^6.4.9",
    "@storybook/addon-links": "^6.4.9",
    "@storybook/angular": "^6.4.9",
    "@storybook/builder-webpack5": "^6.4.9",
    "@storybook/manager-webpack5": "^6.4.9",
    "@types/file-saver": "^2.0.1",
    "@types/jest": "^27.0.2",
    "@types/lodash": "^4.14.157",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0",
    "codelyzer": "^6.0.0",
    "concurrently": "^6.4.0",
    "cypress": "^8.3.1",
    "cypress-wait-until": "^1.7.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jest": "^27.2.5",
    "jest-canvas-mock": "^2.3.1",
    "jest-junit": "^13.0.0",
    "jest-preset-angular": "^10.0.1",
    "ng-packagr": "^12.2.2",
    "prettier": "^2.2.1",
    "svg-to-ts": "^4.2.1",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.3.5",
    "wait-on": "^6.0.0",
    "webpack": "^5.56.0"
  }

我想知道

1. angular-eslint 和 typescript-eslint 包有什么區別？
2. Angular 12 項目中是否都需要它們？

Answer 1

@angular-eslint使用@typescript-eslint作為依賴項。

當您想在 Angular 項目中配置 ESLint 時，您可以使用@angular-eslint/schematics使用一個命令來完成

ng add @angular-eslint/schematics

之后，如果您檢查package.json您會看到@typescript-eslint也作為devDependency安裝。 您的package.json應使用以下軟件包進行更新：

"devDependencies": {
  "@angular-eslint/builder": "12.7.0",
  "@angular-eslint/eslint-plugin": "12.7.0",
  "@angular-eslint/eslint-plugin-template": "12.7.0",
  "@angular-eslint/schematics": "12.7.0",
  "@angular-eslint/template-parser": "12.7.0",
  "@typescript-eslint/eslint-plugin": "4.28.2",
  "@typescript-eslint/parser": "4.28.2",
  "eslint": "^7.26.0",
}

因此@angular-eslint/schematics將安裝一些devDependencies並使用 Angular 項目的最佳實踐配置 ESLint。 這些devDependencies是@typescript-eslint 。

因此，要回答您的問題，如果您想自己配置 ESLint，則只能在項目中使用@typescript-eslint 。 或者您可以使用@angular-eslint （將使用@typescript-eslint ）並使用 Angular 項目的最佳實踐為您配置所有這些。