@angular-eslint/eslint-plugin-template
Advanced tools
The @angular-eslint/eslint-plugin-template package is an ESLint plugin that provides linting rules for Angular templates. It helps developers to follow best practices and avoid common mistakes in their Angular template syntax by analyzing the templates and providing feedback.
Banana in a box
This rule ensures that you are using the correct syntax for two-way data binding in Angular templates. The correct syntax is [(ngModel)], and the rule will report an error if it finds something like [ngModel] or (ngModel) instead.
"[(ngModel)]": "off"Conditional complexity
This rule allows you to specify the maximum complexity that any *ngIf structural directive should have in your templates. It helps in maintaining readability and manageability of the template logic.
"template/conditional-complexity": ["error", { "maxComplexity": 5 }]"Mouse events have key events
This rule ensures that mouse events like (click) are accompanied by corresponding keyboard events like (keyup) to maintain accessibility for users who rely on keyboard navigation.
"template/mouse-events-have-key-events": "error"No any
This rule warns you when you use the 'any' type in your templates. Using 'any' can potentially bypass compile-time type checking, so it's generally a good practice to avoid it.
"template/no-any": "warn"No autocompletion
This rule checks for the use of the 'autofocus' attribute in the template and reports it as an error. Autofocus can cause accessibility issues for users who rely on assistive technologies.
"template/no-autofocus": "error"This package provides linting rules for React and JSX. It is similar to @angular-eslint/eslint-plugin-template in that it helps enforce best practices and catch common mistakes in React applications.
This package is an ESLint plugin for Vue.js applications. It includes a set of rules that apply to Vue templates, similar to how @angular-eslint/eslint-plugin-template applies rules to Angular templates.
This plugin focuses on enforcing accessibility rules in JSX elements, similar to how @angular-eslint/eslint-plugin-template enforces accessibility rules in Angular templates.
Please see https://github.com/angular-eslint/angular-eslint for full usage instructions and guidance.
Key
| Rule | Description | :white_check_mark: | :wrench: | :bulb: | :accessibility: |
|---|---|---|---|---|---|
no-duplicate-attributes | Ensures that there are no duplicate input properties or output event listeners | :bulb: |
Key
| Rule | Description | :white_check_mark: | :wrench: | :bulb: | :accessibility: |
|---|---|---|---|---|---|
alt-text | [Accessibility] Enforces alternate text for elements which require the alt, aria-label, aria-labelledby attributes. | :accessibility: | |||
banana-in-box | Ensures that the two-way data binding syntax is correct | :white_check_mark: | :wrench: | ||
button-has-type | Ensures that a button has a valid type specified | ||||
click-events-have-key-events | [Accessibility] Ensures that the click event is accompanied with at least one key event keyup, keydown or keypress. | :accessibility: | |||
conditional-complexity | The conditional complexity should not exceed a rational limit | ||||
cyclomatic-complexity | Checks cyclomatic complexity against a specified limit. It is a quantitative measure of the number of linearly independent paths through a program's source code | ||||
elements-content | [Accessibility] Ensures that the heading, anchor and button elements have content in it | :accessibility: | |||
eqeqeq | Requires === and !== in place of == and != | :white_check_mark: | :wrench: | :bulb: | |
i18n | Ensures following best practices for i18n. Checks for missing i18n attributes on elements and attributes containing texts. Can also check for texts without i18n attribute, elements that do not use custom ID (@@) feature and duplicate custom IDs | :wrench: | :bulb: | ||
interactive-supports-focus | [Accessibility] Ensures that elements with interactive handlers like (click) are focusable. | :accessibility: | |||
label-has-associated-control | [Accessibility] Ensures that a label element/component is associated with a form element | :accessibility: | |||
mouse-events-have-key-events | [Accessibility] Ensures that the mouse events mouseout and mouseover are accompanied by focus and blur events respectively. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. See more at https://www.w3.org/WAI/WCAG21/Understanding/keyboard | :accessibility: | |||
no-any | The use of "$any" nullifies the compile-time benefits of Angular's type system | :bulb: | |||
no-autofocus | [Accessibility] Ensures that the autofocus attribute is not used | :wrench: | :accessibility: | ||
no-call-expression | Disallows calling expressions in templates, except for output handlers | ||||
no-distracting-elements | [Accessibility] Enforces that no distracting elements are used | :wrench: | :accessibility: | ||
no-inline-styles | Disallows the use of inline styles in HTML templates | ||||
no-interpolation-in-attributes | Ensures that property-binding is used instead of interpolation in attributes. | ||||
no-negated-async | Ensures that async pipe results, as well as values used with the async pipe, are not negated | :white_check_mark: | :bulb: | ||
no-positive-tabindex | Ensures that the tabindex attribute is not positive | :bulb: | |||
prefer-control-flow | Ensures that the built-in control flow is used. | ||||
prefer-ngsrc | Ensures ngSrc is used instead of src for img elements | ||||
role-has-required-aria | [Accessibility] Ensures elements with ARIA roles have all required properties for that role. | :bulb: | :accessibility: | ||
table-scope | [Accessibility] Ensures that the scope attribute is only used on the <th> element | :wrench: | :accessibility: | ||
use-track-by-function | Ensures trackBy function is used | ||||
valid-aria | [Accessibility] Ensures that correct ARIA attributes and respective values are used | :bulb: | :accessibility: |
Key
| Rule | Description | :white_check_mark: | :wrench: | :bulb: | :accessibility: |
|---|---|---|---|---|---|
attributes-order | Ensures that HTML attributes and Angular bindings are sorted based on an expected order | :wrench: | |||
prefer-self-closing-tags | Ensures that self-closing tags are used for elements with a closing tag but no content. | :wrench: |
19.0.1 (2024-12-06)
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.
However, please note that the angular-eslint package itself now supports being referenced as the schematics collection, so...
IF YOU ARE ALREADY USING angular-eslint and ESLint v9 and flat config you can now do the following:
ng update @angular/core @angular/cli angular-eslint
(Note: If you encounter any issues with this, you may need to update to the latest v18 release of angular-eslint first)
IF YOU ARE STILL USING @angular-eslint/schematics and ESLint v8 and .eslintrc.json configs you can still do the following:
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 ESLint v8 workspaces while migrating to angular-eslint v19.
We will explore landing an opt in migration schematic in a minor release after 19.0.0.
FAQs
ESLint plugin for Angular Templates
The npm package @angular-eslint/eslint-plugin-template receives a total of 1,041,268 weekly downloads. As such, @angular-eslint/eslint-plugin-template popularity was classified as popular.
We found that @angular-eslint/eslint-plugin-template 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.