eslint-plugin-ngrx

ESLint plugin for NgRx

Usage no npm install needed!

<script type="module">
  import eslintPluginNgrx from 'https://cdn.skypack.dev/eslint-plugin-ngrx';
</script>

README

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

πŸ› ⚠️ πŸ’»

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