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

Readme

Source

@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:
`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 component `styles`/`styleUrl` with `string` is used over `styles`/`styleUrls` when there is only a single string in the array		: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`

FAQs

What is @angular-eslint/eslint-plugin?

Is @angular-eslint/eslint-plugin popular?

Is @angular-eslint/eslint-plugin well maintained?

Last updated on 15 Mar 2024

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.

Install