Difference between angular-eslint and typescript-eslint

Question

I am working on an angular project which was recently migrated from v9 to v12. I see in package.json there are devDependencies for both angular-eslint and typescript-eslint packages as below

      "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

1. What is the difference between the angular-eslint and typescript-eslint packages?
2. Are both of them needed in an Angular 12 project?

Answer 1

@angular-eslint is using @typescript-eslint as a dependency.

When you want to configure ESLint in Angular project, you can do that with one command by using @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 . Your package.json should be updated with these packages:

"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. One of these devDependencies is @typescript-eslint .

So to answer your question, you can use only @typescript-eslint in your project if you want to configure ESLint by yourself. Or you can use @angular-eslint (that will use @typescript-eslint ) and configure all of that for you with best practices for Angular project.