[英]Difference between angular-eslint and typescript-eslint
I am working on an angular project which was recently migrated from v9 to v12.我正在研究最近从 v9 迁移到 v12 的 angular 项目。 I see in package.json there are devDependencies for both angular-eslint and typescript-eslint packages as below
我在 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"
}
I want to know我想知道
@angular-eslint
is using @typescript-eslint
as a dependency. @angular-eslint
使用@typescript-eslint
作为依赖项。
When you want to configure ESLint in Angular project, you can do that with one command by using @angular-eslint/schematics
当您想在 Angular 项目中配置 ESLint 时,您可以使用
@angular-eslint/schematics
使用一个命令来完成
ng add @angular-eslint/schematics
After that, if you check your package.json
you will see that @typescript-eslint
is also installed as a devDependency
.之后,如果您检查
package.json
您会看到@typescript-eslint
也作为devDependency
安装。 Your package.json
should be updated with these packages:您的
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",
}
So @angular-eslint/schematics
will install a few devDependencies
and configure ESLint with best practices for Angular project.因此
@angular-eslint/schematics
将安装一些devDependencies
并使用 Angular 项目的最佳实践配置 ESLint。 One of these devDependencies
is @typescript-eslint
.这些
devDependencies
是@typescript-eslint
。
So to answer your question, you can use only @typescript-eslint
in your project if you want to configure ESLint by yourself.因此,要回答您的问题,如果您想自己配置 ESLint,则只能在项目中使用
@typescript-eslint
。 Or you can use @angular-eslint
(that will use @typescript-eslint
) and configure all of that for you with best practices for Angular project.或者您可以使用
@angular-eslint
(将使用@typescript-eslint
)并使用 Angular 项目的最佳实践为您配置所有这些。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.