angular.md

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-rxjs-x

3. Add to your eslint.config.js file:

   import angular from '@code-pushup/eslint-config/angular.js';
   import tseslint from 'typescript-eslint';
   
   export default tseslint.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
           }
         ]
       }
     }
   );

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

📏 Rules (425)

345 rules are included from typescript config. For brevity, only the 80 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 (36)

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 }	🔧, 💡
	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-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-floating-observables Require Observables to be handled appropriately.
	no-ignored-notifier Disallow observables not composed from the repeatWhen or retryWhen notifier.
	no-ignored-replay-buffer Disallow using ReplaySubject, publishReplay or shareReplay without specifying the buffer size.
	no-ignored-takewhile-value Disallow ignoring the value within takeWhile.
	no-implicit-any-catch Disallow implicit any error parameters in catchError operators.		🔧, 💡
	no-index Disallow importing index modules.
	no-internal Disallow importing internal modules.		🔧, 💡
	no-redundant-notify Disallow sending redundant notifications from completed or errored observables.
	no-sharereplay Disallow unsafe shareReplay usage.
	no-subject-unsubscribe Disallow calling the unsubscribe method of subjects.
	no-unbound-methods Disallow passing unbound methods.
	no-unsafe-subject-next Disallow unsafe optional next calls.
	no-unsafe-takeuntil Disallow applying operators after takeUntil.

⚠️ Warnings (44)

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 }
	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-control-flow Ensures that the built-in control flow is used.
	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 Enforce Finnish notation.			🧪🚫
	no-async-subscribe Disallow passing async functions to subscribe.
	no-compat Disallow the rxjs-compat package.
	no-create Disallow the static Observable.create function.
	no-exposed-subjects Disallow public and protected subjects.
	no-nested-subscribe Disallow calling subscribe within a subscribe callback.
	no-subscribe-in-pipe Disallow calling of subscribe within any RxJS operator inside a pipe.
	no-topromise Disallow use of the toPromise method.		💡
	prefer-observer Disallow passing separate handlers to subscribe and tap.		🔧, 💡
	prefer-root-operators Disallow importing operators from rxjs/operators.		🔧, 💡
	throw-error Enforce passing only Error values to throwError.