@angular-eslint/eslint-plugin-template

What is @angular-eslint/eslint-plugin-template?

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.

What are @angular-eslint/eslint-plugin-template's main functionalities?

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"

Other packages similar to @angular-eslint/eslint-plugin-template

eslint-plugin-react

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.

eslint-plugin-vue

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.

eslint-plugin-jsx-a11y

This plugin focuses on enforcing accessibility rules in JSX elements, similar to how @angular-eslint/eslint-plugin-template enforces accessibility rules in Angular templates.

README

@angular-eslint/eslint-plugin-template

Changelog

16.1.1 (2023-08-20)

Bug Fixes

• eslint-plugin-template: [attributes-order] Handle explicit ng-template usage (#1465) (7d1f592)
• eslint-plugin-template: update links to Angular i18n docs (#1476) (9633058)
• eslint-plugin: export require-localize-metadata rule (#1469) (e3dc936)
• update dependency eslint to v8.45.0 (#1461) (9c95032)
• update dependency eslint to v8.47.0 (#1489) (047338a)
• update dependency eslint-scope to v7.2.2 (#1460) (0bb6dca)