angular-eslint

What is angular-eslint?

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.

What are angular-eslint's main functionalities?

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/schematics

Linting 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 lint

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

Other packages similar to angular-eslint

eslint-plugin-angular

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

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.

README

angular-eslint

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-eslint older than v18, or workspaces still using ESLint v8 and typescript-eslint v7, or the legacy eslintrc config format, you will use a combination of the @angular-eslint/ packages directly.

Premade flat configs (only compatible with eslint.config.js files, not compatible with eslintrc files)

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.

• Premade flat configs

You should access the configs exported from the @angular-eslint/eslint-plugin package for use in eslintrc files.

Changelog

18.3.0 (2024-08-13)

🚀 Features

• eslint-plugin: new rule runtime-localize (#1898)

🩹 Fixes

• update dependency eslint to v9.9.0 (#1976)
• update dependency @angular/compiler to v18.1.4 (#1973)
• update dependency ignore to v5.3.2 (#1979)
• update typescript-eslint packages to v8.1.0 (#1982)
• eslint-plugin-template: [interactive-supports-focus] allowList with form as default option to support event bubbling (#1922)
• eslint-plugin-template: [prefer-self-closing-tags] fix ng-content with rich default content (#1971)
• prefer-self-closing-tags: handle both forward and backward slash (#1967)

❤️ Thank You

• Daniel Kimmich @json-derulo
• James Henry @JamesHenry
• m-akinc @m-akinc
• Sandi Barr @sandikbarr
• Simon