@angular-eslint/eslint-plugin

@angular-eslint/eslint-plugin

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

Premade configs

• Premade configs

Rules

Possible problems

Key

• :white_check_mark: = recommended
• :wrench: = fixable
• :bulb: = has suggestions

Rule	Description	:white_check_mark:	:wrench:	:bulb:
contextual-lifecycle	Ensures that lifecycle methods are used in a correct context	:white_check_mark:
no-async-lifecycle-method	Angular Lifecycle methods should not be async. Angular does not wait for async lifecycle but the code incorrectly suggests it does.
no-attribute-decorator	The @Attribute decorator is used to obtain a single value for an attribute. This is a much less common use-case than getting a stream of values (using @Input), so often the @Attribute decorator is mistakenly used when @Input was what was intended. This rule disallows usage of @Attribute decorator altogether in order to prevent these mistakes.
no-developer-preview	Disallow using code which is marked as developer preview
no-experimental	Disallow using code which is marked as experimental
require-lifecycle-on-prototype	Ensures that lifecycle methods are defined on the object's prototype instead of on an instance.
sort-lifecycle-methods	Ensures that lifecycle methods are declared in order of execution

Suggestions

Key

• :white_check_mark: = recommended
• :wrench: = fixable
• :bulb: = has suggestions

Rule	Description	:white_check_mark:	:wrench:	:bulb:
component-class-suffix	Classes decorated with @Component must have suffix "Component" (or custom) in their name. Note: As of v20, this is no longer recommended by the Angular Team.
component-max-inline-declarations	Enforces a maximum number of lines in inline template, styles and animations. See more at https://angular.dev/style-guide#style-05-04
component-selector	Component selectors should follow given naming rules. See more at https://angular.dev/style-guide#style-02-07, https://angular.dev/style-guide#style-05-02 and https://angular.dev/style-guide#style-05-03.
consistent-component-styles	Ensures consistent usage of styles/styleUrls/styleUrl within Component metadata		:wrench:
contextual-decorator	Ensures that classes use contextual decorators in its body
directive-class-suffix	Classes decorated with @Directive must have suffix "Directive" (or custom) in their name. Note: As of v20, this is no longer recommended by the Angular Team.
directive-selector	Directive selectors should follow given naming rules. See more at https://angular.dev/style-guide#style-02-06 and https://angular.dev/style-guide#style-02-08.
no-conflicting-lifecycle	Ensures that directives not implement conflicting lifecycle interfaces.
no-duplicates-in-metadata-arrays	Ensures that metadata arrays do not contain duplicate entries.
no-empty-lifecycle-method	Disallows declaring empty lifecycle methods	:white_check_mark:		:bulb:
no-forward-ref	Disallows usage of forwardRef references for DI
no-input-prefix	Ensures that input bindings, including aliases, are not named or prefixed by the configured disallowed prefixes
no-input-rename	Ensures that input bindings are not aliased	:white_check_mark:	:wrench:	:bulb:
no-inputs-metadata-property	Disallows usage of the inputs metadata property. See more at https://angular.dev/style-guide#style-05-12	:white_check_mark:
no-lifecycle-call	Disallows explicit calls to lifecycle methods
no-output-native	Ensures that output bindings, including aliases, are not named as standard DOM events	:white_check_mark:
no-output-on-prefix	Ensures that output bindings, including aliases, are not named "on", nor prefixed with it. See more at https://angular.dev/guide/components/outputs#choosing-event-names	:white_check_mark:
no-output-rename	Ensures that output bindings are not aliased	:white_check_mark:	:wrench:	:bulb:
no-outputs-metadata-property	Disallows usage of the outputs metadata property. See more at https://angular.dev/style-guide#style-05-12	:white_check_mark:
no-pipe-impure	Disallows the declaration of impure pipes			:bulb:
no-queries-metadata-property	Disallows usage of the queries metadata property. See more at https://angular.dev/style-guide#style-05-12.
no-uncalled-signals	Warns user about unintentionally doing logic on the signal, rather than the signal's value			:bulb:
pipe-prefix	Enforce consistent prefix for pipes.
prefer-host-metadata-property	Use host metadata property instead of @HostBinding and HostListener
prefer-inject	Prefer using the inject() function over constructor parameter injection	:white_check_mark:
prefer-on-push-component-change-detection	Ensures component's changeDetection is set to ChangeDetectionStrategy.OnPush			:bulb:
prefer-output-emitter-ref	Use OutputEmitterRef instead of @Output()
prefer-output-readonly	Prefer to declare @Output, OutputEmitterRef and OutputRef as readonly since they are not supposed to be reassigned			:bulb:
prefer-signals	Use readonly signals instead of @Input(), @ViewChild() and other legacy decorators		:wrench:
prefer-standalone	Ensures Components, Directives and Pipes do not opt out of standalone.	:white_check_mark:		:bulb:
relative-url-prefix	The ./ and ../ prefix is standard syntax for relative URLs; don't depend on Angular's current ability to do without that prefix. See more at https://angular.dev/style-guide#style-05-04
require-localize-metadata	Ensures that $localize tagged messages contain helpful metadata to aid with translations.
runtime-localize	Ensures that $localize tagged messages can use runtime-loaded translations.
sort-keys-in-type-decorator	Ensures that keys in type decorators (Component, Directive, NgModule, Pipe) are sorted in a consistent order		:wrench:
use-component-selector	Component selector must be declared
use-component-view-encapsulation	Disallows using ViewEncapsulation.None			:bulb:
use-injectable-provided-in	Using the providedIn property makes Injectables tree-shakable			:bulb:
use-lifecycle-interface	Ensures that classes implement lifecycle interfaces corresponding to the declared lifecycle methods. See more at https://angular.dev/style-guide#style-09-01		:wrench:
use-pipe-transform-interface	Ensures that Pipes implement PipeTransform interface	:white_check_mark:	:wrench:

Similar packages

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

eslint-plugin-react

Similar to @angular-eslint/eslint-plugin, eslint-plugin-react provides linting rules specific to React applications. It helps enforce best practices and coding standards for React development but is tailored for React instead of Angular.

eslint-plugin-vue

eslint-plugin-vue offers linting rules for Vue.js applications, analogous to how @angular-eslint/eslint-plugin works for Angular projects. It ensures code quality and consistency within Vue.js projects by enforcing Vue-specific coding standards.