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
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"]
}
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"]
}
]
}
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 |
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 |
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 |
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 |
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):
This project follows the all-contributors specification. Contributions of any kind welcome!