angular-eslint
Advanced tools
The angular-eslint package provides a set of tools to integrate ESLint into Angular projects, allowing developers to lint their Angular TypeScript code and templates. It helps maintain code quality and consistency by enforcing coding standards and best practices.
Linting Angular TypeScript Code
This command sets up ESLint in an Angular project, replacing TSLint, which is deprecated. It configures ESLint to work with Angular's TypeScript code, allowing developers to enforce coding standards and catch potential errors.
ng add @angular-eslint/schematicsLinting Angular HTML Templates
After setting up angular-eslint, running this command will lint both TypeScript and HTML templates in the Angular project. It ensures that the HTML templates adhere to best practices and coding standards.
ng lintCustom ESLint Rules for Angular
This JSON snippet shows how to configure a custom ESLint rule specific to Angular projects. The rule enforces that Angular component classes have a specific suffix, helping maintain naming consistency across the project.
{ "rules": { "@angular-eslint/component-class-suffix": ["error", { "suffixes": ["Component", "View"] }] } }eslint-plugin-angular is a plugin for ESLint that provides linting rules specific to AngularJS (Angular 1.x) projects. While angular-eslint is designed for modern Angular (Angular 2+), eslint-plugin-angular focuses on the older AngularJS framework, offering rules tailored to its unique patterns and practices.
Codelyzer is a set of TSLint rules for static code analysis of Angular TypeScript projects. It was widely used before the deprecation of TSLint. While angular-eslint is the modern solution for linting Angular projects with ESLint, Codelyzer served a similar purpose for TSLint, providing Angular-specific linting rules.
Please see https://github.com/angular-eslint/angular-eslint for full usage instructions and guidance.
This is the core package that exposes most of the other @angular-eslint/ packages for the common use case of using angular-eslint with Angular CLI workspaces.
It exposes all the tooling you need to work with ESLint v9 and typescript-eslint v8 with flat config in v18 of angular-eslint onwards.
NOTE: For versions of
angular-eslintolder than v18, or workspaces still using ESLint v8 andtypescript-eslintv7, or the legacy eslintrc config format, you will use a combination of the@angular-eslint/packages directly.
This package exposes a set of premade ESLint configs that you can use in your eslint.config.js files. They are not compatible with eslintrc files.
You should access the configs exported from the @angular-eslint/eslint-plugin package for use in eslintrc files.
18.0.1 (2024-05-30)
As part of the v18 release, support for typescript-eslint v8 prereleases was added. For authors of custom rules that consume the @angular-eslint/utils or new @angular-eslint/test-utils packages, the initial way this was set up with dependencies could cause type conflicts between v7 and v8. To resolve this the @angular-eslint/* packages now depend on @typescript-eslint/* packages via a peerDependency which permits both v7 and v8 prereleases.
As always we recommend that you update your existing workspaces by using ng update as we provide some helpful schematics to help migrate your workspaces to the latest and greatest. Running the following will update Angular, the Angular CLI and angular-eslint together:
ng update @angular/core @angular/cli @angular-eslint/schematics
NOTE: There will not be any migration of your setup to ESLint v9 or flat configs for existing workspaces in v18.
The ESLint team are working on auto-migrate tooling which we will leverage in an opt-in conversion generator once it is ready in a v18 minor release and consider full auto-migration in v19 in six months (aligned with Angular major release schedule as always).
If you want to manually migrate your workspace to use ESLint v9, typescript-eslint v8, and flat config you are welcome to and it should be fully supported in v18.
If you are going to attempt this, we strongly recommended creating a fresh Angular v18 workspace and adding angular-eslint to it per the instructions below and then copying the dependencies and configs that it applies into your existing workspace
Here is an example of what the new flat config with angular-eslint v18, typescript-eslint v8, and ESLint v9 looks like:
There is a decision to be made when adding to new Angular v18 workspaces.
Just as before, if you want to add angular-eslint to a workspace with no existing lint setup, you leverage ng add with the @angular-eslint/schematics package.
The difference is in v18, you have the option of using either:
eslint.config.js) alongside the latest prerelease of typescript-eslint v8 (https://typescript-eslint.io/blog/announcing-typescript-eslint-v8-beta)
OR.eslintrc.json) and the latest stable version of typescript-eslint v7The ESLint v9 option is the default scenario if you simply run ng add with no other changes. If you want to signal to angular-eslint that you instead want to go with the ESLint v8 option, simply add an eslint v8 (the exact version does not matter, it just needs to be less than 9) devDependency in your package.json before running the ng add. That's it - you don't even need to install the eslint package, it just needs to be listed there.
E.g.
Here are example "after" root package.json files from the two scenarios:
1. No eslint devDependency specified before running ng add, use the default ESLint v9 setup. This will use the new angular-eslint and typescript-eslint core packages, so you will see much fewer individual devDependencies added:
2. eslint v8 devDependency is specified before running ng-add. Use ESlint 8.57.0 and the traditional @typescript-eslint/ and @angular-eslint/ packages.
@angular-eslint/eslint-plugin (#1830)@angular-eslint/utils into new @angular-eslint/test-utils package (#1830)8.57.0). (#1830)angular-eslint core package for use in ESLint v9 workspaces (#1830)typescript-eslint v8 prereleases (#1830)@angular-eslint/eslint-plugin (#1830)@angular-eslint/utils into new @angular-eslint/test-utils package (#1830)FAQs
The tooling which enables ESLint to work with Angular projects
The npm package angular-eslint receives a total of 126,321 weekly downloads. As such, angular-eslint popularity was classified as popular.
We found that angular-eslint demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."