ngrx.md

ngrx config

Config for Angular projects using NgRx library.

🏗️ 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 @ngrx/eslint-plugin angular-eslint eslint-plugin-rxjs-x

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

   import ngrx from '@code-pushup/eslint-config/ngrx.js';
   import tseslint from 'typescript-eslint';
   
   export default tseslint.config(
     ...ngrx,
     {
       // 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 (469)

439 rules are included from angular config. For brevity, only the 30 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 (6)

Plugin	Rule	Options	Autofix	Overrides
	avoid-cyclic-effects Avoid Effect that re-emit filtered actions.
	avoid-duplicate-actions-in-reducer A Reducer should handle an Action once.		💡
	no-effects-in-providers Effect should not be listed as a provider if it is added to the EffectsModule.		🔧
	no-unsafe-catch Disallow unsafe catchError usage in effects and epics.
	no-unsafe-first Disallow unsafe first/take usage in effects and epics.
	no-unsafe-switchmap Disallow unsafe switchMap usage in effects and epics.

⚠️ Warnings (24)

Plugin	Rule	Options	Autofix	Overrides
	avoid-combining-component-store-selectors Prefer combining selectors at the selector level.
	avoid-combining-selectors Prefer combining selectors at the selector level.
	avoid-dispatching-multiple-actions-sequentially It is recommended to only dispatch one Action at a time.
	avoid-mapping-component-store-selectors Avoid mapping logic outside the selector level.
	avoid-mapping-selectors Avoid mapping logic outside the selector level.
	good-action-hygiene Ensures the use of good action hygiene.
	no-dispatch-in-effects Effect should not call store.dispatch.		💡
	no-multiple-global-stores There should only be one global store injected.		💡
	no-reducer-in-key-names Avoid the word "reducer" in the key names.		💡
	no-store-subscription Using the async pipe is preferred over store subscription.
	no-typed-global-store The global store should not be typed.		💡
	on-function-explicit-return-type On function should have an explicit return type.		💡
	prefer-action-creator Using action creator is preferred over Action class.
	prefer-action-creator-in-dispatch Using action creator in dispatch is preferred over object or old Action.
	prefer-action-creator-in-of-type Using action creator in ofType is preferred over string.
	prefer-concat-latest-from Use concatLatestFrom instead of withLatestFrom to prevent the selector from firing until the correct Action is dispatched.		🔧
	prefer-inline-action-props Prefer using inline types instead of interfaces, types or classes.		💡
	prefer-one-generic-in-create-for-feature-selector Prefer using a single generic to define the feature state.		💡
	prefer-selector-in-select Using a selector in the select is preferred over string or props drilling.
	prefix-selectors-with-select The selector should start with "select", for example "selectEntity".		💡
	select-style Selector can be used either with select as a pipeable operator or as a method.		🔧
	updater-explicit-return-type Updater should have an explicit return type.
	use-consistent-global-store-name Use a consistent name for the global store.	store$ "store$"	💡
	use-effects-lifecycle-interface Ensures classes implement lifecycle interfaces corresponding to the declared lifecycle methods.		🔧