angular.md

@code-pushup/eslint-config/angular config

Config for Angular projects.

🏗️ Setup

1. If you haven't already, make sure to install @code-pushup/eslint-config and its required peer dependencies.

2. Since this plugin requires additional peer dependencies, you have to install them as well:

   npm install -D @angular-eslint/{eslint-plugin,eslint-plugin-template,template-parser} eslint-plugin-{deprecation,rxjs}

3. Refer to step 3 in TypeScript config's setup docs for how to set up tsconfig properly.

4. Add to extends in your .eslintrc file:

   {
     "extends": ["@code-pushup/eslint-config/angular"],
     // It is recommended that selectors in Angular use a common custom prefix
     // - see https://angular.io/guide/styleguide#style-02-07
     // To enforce this consistently, add the following rules:
     "rules": {
       "@angular-eslint/component-selector": [
         "warn",
         {
           "type": "element",
           "style": "kebab-case",
           "prefix": ["cp"] // <-- replace with your own prefix
         }
       ],
       "@angular-eslint/directive-selector": [
         "warn",
         {
           "type": "attribute",
           "style": "camelCase",
           "prefix": "cp" // <-- replace with your own prefix
         }
       ],
       "@angular-eslint/pipe-prefix": [
         "warn",
         {
           "prefixes": ["cp"] // <-- replace with your own prefix
         }
       ]
     }
   }

📏 Rules (382)

307 rules are included from @code-pushup/eslint-config/typescript. For brevity, only the 75 additional rules are listed in this document.

🔧 Automatically fixable by the --fix CLI option.
💡 Manually fixable by editor suggestions.
🧪🚫 Disabled for test files.
🧪⚠️ Severity lessened to warning for test files.

🚨 Errors (33)

Plugin	Rule	Options	Autofix	Overrides
	contextual-decorator Ensures that classes use contextual decorators in its body
	contextual-lifecycle Ensures that lifecycle methods are used in a correct context
	no-conflicting-lifecycle Ensures that directives not implement conflicting lifecycle interfaces.
	no-lifecycle-call Disallows explicit calls to lifecycle methods			🧪⚠️
	use-component-view-encapsulation Disallows using ViewEncapsulation.None		💡
	use-pipe-transform-interface Ensures that Pipes implement PipeTransform interface		🔧
	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		🔧
	click-events-have-key-events [Accessibility] Ensures that the click event is accompanied with at least one key event keyup, keydown or keypress.
	elements-content [Accessibility] Ensures that the heading, anchor and button elements have content in it
	eqeqeq Requires === and !== in place of == and !=	allowNullOrUndefined: true { "allowNullOrUndefined": true }	🔧, 💡
	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-distracting-elements [Accessibility] Enforces that no distracting elements are used		🔧
	no-duplicate-attributes Ensures that there are no duplicate input properties or output event listeners		💡
	no-negated-async Ensures that async pipe results, as well as values used with the async pipe, are not negated		💡
	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		🔧
	valid-aria [Accessibility] Ensures that correct ARIA attributes and respective values are used		💡
	no-namespace Forbid namespace (a.k.a. "wildcard" *) imports.		🔧
	no-nodejs-modules Forbid Node.js builtin modules.
	no-ignored-notifier Forbids observables not composed from the repeatWhen or retryWhen notifier.
	no-ignored-replay-buffer Forbids using ReplaySubject, publishReplay or shareReplay without specifying the buffer size.
	no-ignored-takewhile-value Forbids ignoring the value within takeWhile.
	no-index Forbids the importation from index modules.
	no-internal Forbids the importation of internals.		🔧, 💡
	no-redundant-notify Forbids redundant notifications from completed or errored observables.
	no-sharereplay Forbids using the shareReplay operator.	allowConfig: true { "allowConfig": true }
	no-subject-unsubscribe Forbids calling the unsubscribe method of a subject instance.
	no-unbound-methods Forbids the passing of unbound methods.
	no-unsafe-subject-next Forbids unsafe optional next calls.
	no-unsafe-takeuntil Forbids the application of operators after takeUntil.

⚠️ Warnings (42)

Plugin	Rule	Options	Autofix	Overrides
	component-class-suffix Classes decorated with @Component must have suffix "Component" (or custom) in their name. See more at https://angular.dev/style-guide#style-02-03
	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.	type: element, style: kebab... { "type": "element", "style": "kebab-case" }
	directive-class-suffix Classes decorated with @Directive must have suffix "Directive" (or custom) in their name. See more at https://angular.dev/style-guide#style-02-03
	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.	type: attribute, style: cam... { "type": "attribute", "style": "camelCase" }
	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-empty-lifecycle-method Disallows declaring empty lifecycle methods		💡
	no-input-rename Ensures that input bindings are not aliased		🔧, 💡
	no-inputs-metadata-property Disallows usage of the inputs metadata property. See more at https://angular.dev/style-guide#style-05-12
	no-output-native Ensures that output bindings, including aliases, are not named as standard DOM events
	no-output-on-prefix Ensures that output bindings, including aliases, are not named "on", nor prefixed with it. See more at https://angular.dev/style-guide#style-05-16
	no-output-rename Ensures that output bindings are not aliased		🔧, 💡
	no-outputs-metadata-property Disallows usage of the outputs metadata property. See more at https://angular.dev/style-guide#style-05-12
	no-pipe-impure Disallows the declaration of impure pipes		💡
	no-queries-metadata-property Disallows usage of the queries metadata property. See more at https://angular.dev/style-guide#style-05-12.
	prefer-on-push-component-change-detection Ensures component's changeDetection is set to ChangeDetectionStrategy.OnPush		💡	🧪🚫
	prefer-output-readonly Prefer to declare @Output as readonly since they are not supposed to be reassigned		💡
	prefer-standalone-component Ensures component standalone property is set to true in the component decorator		🔧	🧪🚫
	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
	sort-lifecycle-methods Ensures that lifecycle methods are declared in order of execution
	use-component-selector Component selector must be declared			🧪🚫
	use-injectable-provided-in Using the providedIn property makes Injectables tree-shakable		💡	🧪🚫
	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		🔧
	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	maxComplexity: 20 { "maxComplexity": 20 }
	interactive-supports-focus [Accessibility] Ensures that elements with interactive handlers like (click) are focusable.
	no-autofocus [Accessibility] Ensures that the autofocus attribute is not used		🔧
	no-inline-styles Disallows the use of inline styles in HTML templates	allowNgStyle: true, allowBi... { "allowNgStyle": true, "allowBindToStyle": true }		🧪🚫
	no-interpolation-in-attributes Ensures that property-binding is used instead of interpolation in attributes.
	no-positive-tabindex Ensures that the tabindex attribute is not positive		💡
	prefer-ngsrc Ensures ngSrc is used instead of src for img elements			🧪🚫
	prefer-self-closing-tags Ensures that self-closing tags are used for elements with a closing tag but no content.		🔧
	use-track-by-function Ensures trackBy function is used			🧪🚫
	finnish Enforces the use of Finnish notation.			🧪🚫
	no-async-subscribe Forbids passing async functions to subscribe.
	no-compat Forbids importation from locations that depend upon rxjs-compat.
	no-create Forbids the calling of Observable.create.
	no-exposed-subjects Forbids exposed (i.e. non-private) subjects.
	no-ignored-observable Forbids the ignoring of observables returned by functions.
	no-nested-subscribe Forbids the calling of subscribe within a subscribe callback.
	prefer-observer Forbids the passing separate handlers to subscribe and tap.		🔧, 💡
	throw-error Enforces the passing of Error values to error notifications.