eslint-plugin-ngrx

Installation

With ng-add

Install and configure the ESLint NgRx Plugin with the ng-add command. This command:

• adds eslint-plugin-ngrx as a dev dependency;
• adds the plugin to the ESLint plugins property;
• adds the recommended config to the extends property of ESLint;

ng add eslint-plugin-ngrx

Manual

Install ESLint TypeScript parser

npm install @typescript-eslint/parser --save-dev

Install eslint-plugin-ngrx package

npm install eslint-plugin-ngrx --save-dev

Next, add eslint-plugin-ngrx to your ESLint config (for example in .eslintrc.js) and configure parser and parserOptions.

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2019,
    "project": "./tsconfig.json",
    "sourceType": "module"
  },
  "plugins": ["ngrx"],
  "rules": {
    "ngrx/select-style": "error"
  }
}

To enable the recommended configuration, add the desired configuration to your ESLint configuration file. When you do this, you don't need to define the parser and parserOptions properties.

{
  "extends": ["plugin:ngrx/recommended"]
}

Configuring the plugin in an NX project

To configure the NgRx ESLint plugin in an NX workspace, add a new entry to the overrides section of the ESLint configuration file.

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": ["plugin:ngrx/recommended"]
    }
  ]
}

Rules

component-store

Name	Description	Recommended	Category	Fixable	Has suggestions	Configurable	Requires type information
ngrx/updater-explicit-return-type	Updater should have an explicit return type.	problem	warn	No	No	No	No

effects

Name	Description	Recommended	Category	Fixable	Has suggestions	Configurable	Requires type information
ngrx/avoid-cyclic-effects	Avoid Effect that re-emit filtered actions.	problem	warn	No	No	No	Yes
ngrx/no-dispatch-in-effects	Effect should not call store.dispatch.	suggestion	warn	No	Yes	No	No
ngrx/no-effect-decorator-and-creator	Effect should use either the createEffect or the @Effect decorator, but not both.	suggestion	error	Yes	Yes	No	No
ngrx/no-effect-decorator	The createEffect is preferred as the @Effect decorator is deprecated.	suggestion	warn	Yes	Yes	No	No
ngrx/no-effects-in-providers	Effect should not be listed as a provider if it is added to the EffectsModule.	problem	error	Yes	No	No	No
ngrx/no-multiple-actions-in-effects	Effect should not return multiple actions.	problem	warn	No	No	No	Yes
ngrx/prefer-action-creator-in-of-type	Using action creator in ofType is preferred over string.	suggestion	warn	No	No	No	No
ngrx/prefer-concat-latest-from	Use concatLatestFrom instead of withLatestFrom to prevent the selector from firing until the correct Action is dispatched.	problem	warn	Yes	No	Yes	No
ngrx/prefer-effect-callback-in-block-statement	A block statement is easier to troubleshoot.	suggestion	warn	Yes	No	No	No
ngrx/use-effects-lifecycle-interface	Ensures classes implement lifecycle interfaces corresponding to the declared lifecycle methods.	suggestion	warn	Yes	No	No	No

store

Name	Description	Recommended	Category	Fixable	Has suggestions	Configurable	Requires type information
ngrx/avoid-combining-selectors	Prefer combining selectors at the selector level.	suggestion	warn	No	No	No	No
ngrx/avoid-dispatching-multiple-actions-sequentially	It is recommended to only dispatch one Action at a time.	suggestion	warn	No	No	No	No
ngrx/avoid-duplicate-actions-in-reducer	A Reducer should handle an Action once.	suggestion	warn	No	Yes	No	No
ngrx/avoid-mapping-selectors	Avoid mapping logic outside the selector level.	suggestion	warn	No	No	No	No
ngrx/good-action-hygiene	Ensures the use of good action hygiene.	suggestion	warn	No	No	No	No
ngrx/no-multiple-global-stores	There should only be one global store injected.	suggestion	warn	No	Yes	No	No
ngrx/no-reducer-in-key-names	Avoid the word "reducer" in the key names.	suggestion	warn	No	Yes	No	No
ngrx/no-store-subscription	Using the async pipe is preferred over store subscription.	suggestion	warn	No	No	No	No
ngrx/no-typed-global-store	The global store should not be typed.	suggestion	warn	No	Yes	No	No
ngrx/on-function-explicit-return-type	On function should have an explicit return type.	suggestion	warn	No	Yes	No	No
ngrx/prefer-action-creator-in-dispatch	Using action creator in dispatch is preferred over object or old Action.	suggestion	warn	No	No	No	No
ngrx/prefer-action-creator	Using action creator is preferred over Action class.	suggestion	warn	No	No	No	No
ngrx/prefer-inline-action-props	Prefer using inline types instead of interfaces, types or classes.	suggestion	warn	No	Yes	No	No
ngrx/prefer-one-generic-in-create-for-feature-selector	Prefer using a single generic to define the feature state.	suggestion	warn	No	Yes	No	No
ngrx/prefer-selector-in-select	Using a selector in the select is preferred over string or props drilling.	suggestion	warn	No	No	No	No
ngrx/prefix-selectors-with-select	The selector should start with "select", for example "selectThing".	suggestion	warn	No	Yes	No	No
ngrx/select-style	Selector can be used either with select as a pipeable operator or as a method.	suggestion	warn	Yes	No	Yes	No
ngrx/use-consistent-global-store-name	Use a consistent name for the global store.	suggestion	warn	No	Yes	Yes	No

Configurations

Name	Description
recommended	The recommended config
all	All rules are enabled
store	Only the recommended global store config
effects	Only the recommended effects config
component-store	Only the recommended component store config
strict	All rules are enable and give errors
store-strict	All global store rules and give errors
effects-strict	All effects rules and give errors
component-store-strict	All component store rules and give errors

Migrating from ngrx-tslint-rules

If you were previously using TSLint for your project and especially the ngrx-tslint-rules package, you should check out the migration guide. You will find out how to replace the previous TSLint rule names by the new ESLint ones.

Contributors

Thanks goes to these wonderful people (emoji key):

Tim Deschryver 💻 🤔 🚇 ⚠️	Julien Saguet 💻 ⚠️ 🤔 📖	Stephen Cooper 🤔	Chris Paton 💻	Sebastian Weigel 💻	Rafael Santana 🤔 💻 ⚠️	Armen Vardanyan 📖
Michaël De Boey 💻	David 📖 👀	qirex 📖	Dominik 📖	Dan Russell 📖	Valentin 👀	Chris Mc 💻 🤔
alorle 🐛 ⚠️ 💻	bryantlikes 💻 ⚠️ 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!