@angular-eslint/eslint-plugin

What is @angular-eslint/eslint-plugin?

The @angular-eslint/eslint-plugin package is designed to provide linting rules specifically for Angular projects using ESLint. It helps in maintaining code quality and consistency across Angular applications by enforcing best practices and coding standards specific to Angular development.

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

Component selector naming

This rule ensures that component selectors are prefixed correctly and use kebab-case. It helps in maintaining a consistent naming convention across your Angular application.

"@angular-eslint/component-selector": ["error", { "type": "element", "prefix": "app", "style": "kebab-case" }]"

No input rename

This rule disallows the renaming of directive inputs by providing an alias when using the Input decorator. It encourages the use of consistent and predictable names for directive inputs.

"@angular-eslint/no-input-rename": "error"

Use lifecycle interface

This rule warns when lifecycle methods are used without implementing the corresponding lifecycle interface. It ensures that components and directives explicitly declare their intention to use Angular lifecycle hooks.

"@angular-eslint/use-lifecycle-interface": "warn"

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.

README

@angular-eslint/eslint-plugin

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.
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. See more at https://angular.io/styleguide#style-02-03	:white_check_mark:
component-max-inline-declarations	Enforces a maximum number of lines in inline template, styles and animations. See more at https://angular.io/guide/styleguide#style-05-04
component-selector	Component selectors should follow given naming rules. See more at https://angular.io/guide/styleguide#style-02-07, https://angular.io/guide/styleguide#style-05-02 and https://angular.io/guide/styleguide#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. See more at https://angular.io/styleguide#style-02-03	:white_check_mark:
directive-selector	Directive selectors should follow given naming rules. See more at https://angular.io/guide/styleguide#style-02-06 and https://angular.io/guide/styleguide#style-02-08.
no-conflicting-lifecycle	Ensures that directives not implement conflicting lifecycle interfaces.
no-empty-lifecycle-method	Disallows declaring empty lifecycle methods	:white_check_mark:		:bulb:
no-forward-ref	Disallows usage of forwardRef references for DI
no-host-metadata-property	Disallows usage of the host metadata property. See more at https://angular.io/styleguide#style-06-03	:white_check_mark:
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.io/styleguide#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.io/guide/styleguide#style-05-16	: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.io/styleguide#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.io/styleguide#style-05-12.
pipe-prefix	Enforce consistent prefix for pipes.
prefer-on-push-component-change-detection	Ensures component's changeDetection is set to ChangeDetectionStrategy.OnPush			:bulb:
prefer-output-readonly	Prefer to declare @Output as readonly since they are not supposed to be reassigned			:bulb:
prefer-standalone	Ensures component, directive and pipe standalone property is set to true in the component decorator		:wrench:
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.io/styleguide#style-05-04
require-localize-metadata	Ensures that $localize tagged messages contain helpful metadata to aid with translations.
sort-ngmodule-metadata-arrays	Ensures ASC alphabetical order for NgModule metadata arrays for easy visual scanning		: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.io/styleguide#style-09-01
use-pipe-transform-interface	Ensures that Pipes implement PipeTransform interface	:white_check_mark:	:wrench:

Deprecated

Rule	Replaced by
prefer-standalone-component	prefer-standalone