eslint-plugin-ngrx

Installation

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 it to your ESLint configuration file.

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

Rules

Key: ✔️ = recommended

Name	Description	✔️
ngrx/action-hygiene	Enforces the use of good action hygiene.	✔️
ngrx/avoid-dispatching-multiple-actions-sequentially	It is recommended to only dispatch one action at a time.	✔️
ngrx/no-dispatch-in-effects	An Effect should not call store.dispatch	✔️
ngrx/no-effect-decorator	The createEffect creator function is preferred	✔️
ngrx/no-effect-decorator-and-creator	An Effect should only use the effect creator (`createEffect`) or the effect decorator (`@Effect`), but not both simultaneously	✔️
ngrx/no-effects-in-providers	An Effect should not be listed as a provider if it is added to the EffectsModule	✔️
ngrx/no-multiple-actions-in-effects	An Effect should not return multiple actions.	✔️
ngrx/no-multiple-stores	There should only be one store injected	✔️
ngrx/no-reducer-in-key-names	Avoid the word "reducer" in the key names	✔️
ngrx/no-typed-store	Store should not be typed	✔️
ngrx/on-function-explicit-return-type	On function should have an explicit return type	✔️
ngrx/select-style	Selectors can be used either with 'select' as a pipeable operator or as a method
ngrx/use-selector-in-select	Using a selector in a select function is preferred in favor of strings/props drilling	✔️
rxjs/no-unsafe-catch	Forbids unsafe `catchError` usage in effects	✔️ (export from eslint-plugin-rxjs)
rxjs/no-unsafe-first	Forbids unsafe `first`/`take` usage in effects	✔️ (export from eslint-plugin-rxjs)
rxjs/no-unsafe-switchmap	Forbids unsafe `switchMap` usage in effects	✔️ (export from eslint-plugin-rxjs)

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.