Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including eslint-plugin-ngrx with all npm packages installed. Try it out:

var eslintPluginNgrx = require("eslint-plugin-ngrx")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

eslint-plugin-ngrx v1.10.2

ESLint plugin for NgRx

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: :heavy_check_mark: = recommended

NameDescription:heavy_check_mark:
ngrx/action-hygieneEnforces the use of good action hygiene.:heavy_check_mark:
ngrx/avoid-dispatching-multiple-actions-sequentiallyIt is recommended to only dispatch one action at a time.:heavy_check_mark:
ngrx/no-dispatch-in-effectsAn Effect should not call store.dispatch:heavy_check_mark:
ngrx/no-effect-decoratorThe createEffect creator function is preferred:heavy_check_mark:
ngrx/no-effect-decorator-and-creatorAn Effect should only use the effect creator (createEffect) or the effect decorator (@Effect), but not both simultaneously:heavy_check_mark:
ngrx/no-effects-in-providersAn Effect should not be listed as a provider if it is added to the EffectsModule:heavy_check_mark:
ngrx/no-multiple-actions-in-effectsAn Effect should not return multiple actions.:heavy_check_mark:
ngrx/no-multiple-storesThere should only be one store injected:heavy_check_mark:
ngrx/no-reducer-in-key-namesAvoid the word "reducer" in the key names:heavy_check_mark:
ngrx/no-typed-storeStore should not be typed:heavy_check_mark:
ngrx/on-function-explicit-return-typeOn function should have an explicit return type:heavy_check_mark:
ngrx/select-styleSelectors can be used either with 'select' as a pipeable operator or as a method
ngrx/use-selector-in-selectUsing a selector in a select function is preferred in favor of strings/props drilling:heavy_check_mark:
rxjs/no-unsafe-catchForbids unsafe catchError usage in effects:heavy_check_mark: (export from eslint-plugin-rxjs)
rxjs/no-unsafe-firstForbids unsafe first/take usage in effects:heavy_check_mark: (export from eslint-plugin-rxjs)
rxjs/no-unsafe-switchmapForbids unsafe switchMap usage in effects:heavy_check_mark: (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.

Contributors

Thanks goes to these wonderful people (emoji key):


Tim Deschryver

💻 🤔 🚇 ⚠️

Julien Saguet

💻 ⚠️ 🤔 📖

Stephen Cooper

🤔

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free