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"]
}
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-cyclic-action | This rule effects failures for effects that emit actions that would pass their ofType filter. Such actions are cyclic and, upon emission, immediately re-trigger the effect |
✔️ (export from eslint-plugin-rxjs) |
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) |
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.
Thanks goes to these wonderful people (emoji key):
Tim Deschryver 💻 🤔 🚇 |
Julien Saguet 💻 |
Stephen Cooper 🤔 |
Chris Paton 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!