npm.io
22.1.0 • Published 1 month ago

@angular-eslint/eslint-plugin-template

Licence
MIT
Version
22.1.0
Deps
4
Size
393 kB
Vulns
0
Weekly
0
Stars
1.8K

@angular-eslint/eslint-plugin-template

Please see https://github.com/angular-eslint/angular-eslint for full usage instructions and guidance.

Premade configs

The premade flat configs that combine these rules are provided by the umbrella angular-eslint package.

Rules

Possible problems

Key

  • = recommended
  • = fixable
  • = has suggestions
  • = included in accessibility preset
Rule Description
no-duplicate-attributes Ensures that there are no duplicate input properties or output event listeners
no-nested-tags Denies nesting of <p> and <a> tags.
no-outerhtml Disallows using outerHTML on elements, which breaks change detection and detaches the element from the Angular view
Suggestions

Key

  • = recommended
  • = fixable
  • = has suggestions
  • = included in accessibility preset
Rule Description
alt-text [Accessibility] Enforces alternate text for elements which require the alt, aria-label, aria-labelledby attributes.
banana-in-box Ensures that the two-way data binding syntax is correct
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.
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 them
eqeqeq Requires === and !== in place of == and !=
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
interactive-supports-focus [Accessibility] Ensures that elements with interactive handlers like (click) are focusable.
label-has-associated-control [Accessibility] Ensures that a label element/component is associated with a form element
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
no-any The use of "$any" nullifies the compile-time benefits of Angular's type system
no-autofocus [Accessibility] Ensures that the autofocus attribute is not used
no-call-expression Disallows calling expressions in templates, except for output handlers
no-distracting-elements [Accessibility] Enforces that no distracting elements are used
no-empty-control-flow Ensures that control flow blocks are not empty. Empty control flow blocks usually occur due to refactoring that wasn't completed. They can cause confusion when reading code.
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
no-non-null-assertion Disallows the non-null assertion operator (!) in templates
no-positive-tabindex Ensures that the tabindex attribute is not positive
prefer-at-else Prefer using @else instead of a second @if with the opposite condition to reduce code and make it easier to read.
prefer-at-empty Prefer using @empty with @for loops instead of a separate @if or @else block to reduce code and make it easier to read.
prefer-built-in-pipes Encourages the use of Angular built-in pipes (e.g. lowercase, uppercase, titlecase) instead of certain JavaScript methods in Angular templates.
prefer-class-binding Suggests using [class] bindings over ngClass where applicable
prefer-contextual-for-variables Ensures that contextual variables are used in @for blocks where possible instead of aliasing them.
prefer-control-flow Ensures that the built-in control flow is used.
prefer-ngsrc Ensures ngSrc is used instead of src for img elements
prefer-template-literal Ensure that template literals are used instead of concatenating strings or expressions.
require-switch-default Requires a @default block on every @switch to ensure all cases are handled. This is the template equivalent of the @typescript-eslint/switch-exhaustiveness-check rule.
role-has-required-aria [Accessibility] Ensures elements with ARIA roles have all required properties for that role.
table-scope [Accessibility] Ensures that the scope attribute is only used on the <th> element
use-track-by-function Ensures trackBy function is used
valid-aria [Accessibility] Ensures that correct ARIA attributes and respective values are used
Layout

Key

  • = recommended
  • = fixable
  • = has suggestions
  • = included in accessibility preset
Rule Description
attributes-order Ensures that HTML attributes and Angular bindings are sorted based on an expected order
prefer-self-closing-tags Ensures that self-closing tags are used for elements with a closing tag but no content.
prefer-static-string-properties Ensures that static string values use property assignment instead of property binding.