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"
  }

我想知道

angular-eslint 和 typescript-eslint 包有什么区别？
Angular12 项目中是否需要它们？

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 项目的最佳实践为您配置所有这些。

angular-eslint 和 typescript-eslint 的区别

Difference between angular-eslint and typescript-eslint

javascript

typescript

eslint

angular