fix(store): update installation of the NgRx ESLint Plugin (#3259)

modules/store/schematics/ng-add/index.spec.ts

@@ -165,12 +165,16 @@ describe('Store ng-add Schematic', () => {
     const eslintContent = tree.readContent(`.eslintrc.json`);
     const eslintJson = JSON.parse(eslintContent);
     expect(eslintJson).toEqual({
-      extends: ['plugin:ngrx/recommended'],
-      plugins: ['ngrx'],
+      overrides: [
+        {
+          files: ['*.ts'],
+          extends: ['plugin:ngrx/recommended'],
+        },
+      ],
     });
   });
 
-  it('should register the NgRx ESLint Plugin in overrides when it supports TS', async () => {
+  it('should register the NgRx ESLint Plugin in an existing config', async () => {
     const options = { ...defaultOptions };
 
     // this is a trimmed down version of the default angular-eslint schematic
@@ -221,15 +225,13 @@ describe('Store ng-add Schematic', () => {
             project: ['tsconfig.eslint.json'],
             createDefaultProgram: true,
           },
-          plugins: ['ngrx'],
           extends: [
             'plugin:@angular-eslint/recommended',
             'eslint:recommended',
             'plugin:@typescript-eslint/recommended',
             'plugin:@typescript-eslint/recommended-requiring-type-checking',
             'plugin:@angular-eslint/template/process-inline-templates',
             'plugin:prettier/recommended',
-            'plugin:ngrx/recommended',
           ],
         },
         {
@@ -240,10 +242,40 @@ describe('Store ng-add Schematic', () => {
           ],
           rules: {},
         },
+        {
+          files: ['*.ts'],
+          extends: ['plugin:ngrx/recommended'],
+        },
       ],
     });
   });
 
+  it('should not register the NgRx ESLint Plugin if already added', async () => {
+    const options = { ...defaultOptions, skipESLintPlugin: true };
+
+    const initialConfig = {
+      overrides: [
+        {
+          files: ['*.ts'],
+          extends: ['plugin:ngrx/recommended'],
+        },
+      ],
+    };
+    appTree.create('.eslintrc.json', JSON.stringify(initialConfig, null, 2));
+
+    const tree = await schematicRunner
+      .runSchematicAsync('ng-add', options, appTree)
+      .toPromise();
+
+    const packageContent = tree.readContent('package.json');
+    const packageJson = JSON.parse(packageContent);
+    expect(packageJson.devDependencies['eslint-plugin-ngrx']).not.toBeDefined();
+
+    const eslintContent = tree.readContent(`.eslintrc.json`);
+    const eslintJson = JSON.parse(eslintContent);
+    expect(eslintJson).toEqual(initialConfig);
+  });
+
   it('should not register the NgRx ESLint Plugin when skipped', async () => {
     const options = { ...defaultOptions, skipESLintPlugin: true };
 

modules/store/schematics/ng-add/index.ts

@@ -130,20 +130,26 @@ function addNgRxESLintPlugin() {
       host,
       'devDependencies',
       'eslint-plugin-ngrx',
-      '^1.0.0'
+      '^2.0.0'
     );
     context.addTask(new NodePackageInstallTask());
 
     try {
       const json = JSON.parse(eslint);
       if (json.overrides) {
-        json.overrides
-          .filter((override: { files?: string[] }) =>
-            override.files?.some((file: string) => file.endsWith('*.ts'))
+        if (
+          !json.overrides.some((override: any) =>
+            override.extends?.some((extend: any) =>
+              extend.startsWith('plugin:ngrx')
+            )
           )
-          .forEach(configureESLintPlugin);
-      } else {
-        configureESLintPlugin(json);
+        ) {
+          json.overrides.push(configureESLintPlugin());
+        }
+      } else if (
+        !json.extends?.some((extend: any) => extend.startsWith('plugin:ngrx'))
+      ) {
+        json.overrides = [configureESLintPlugin()];
       }
 
       host.overwrite(eslintConfigPath, JSON.stringify(json, null, 2));
@@ -170,9 +176,11 @@ ${err.message}
   };
 }
 
-function configureESLintPlugin(json: any): void {
-  json.plugins = [...(json.plugins || []), 'ngrx'];
-  json.extends = [...(json.extends || []), 'plugin:ngrx/recommended'];
+function configureESLintPlugin(): Record<string, unknown> {
+  return {
+    files: ['*.ts'],
+    extends: [`plugin:ngrx/recommended`],
+  };
 }
 
 export default function (options: RootStoreOptions): Rule {

projects/ngrx.io/content/guide/eslint-plugin.md

@@ -1,15 +1,12 @@
 # ESLint plugin for NgRx
 
-## What is it?
-
 Use [ESLint](https://eslint.org/) to follow the best practices and to avoid common pitfalls in your application.
 
 The [NgRx ESLint Plugin](https://github.com/timdeschryver/eslint-plugin-ngrx) is no different and promotes the key concepts to create a maintainable project. It consists of @ngrx/store, @ngrx/effects, and @ngrx/component-store rules and a handful of preconfigured configurations.
 
+The plugin comes with a number of rules that help address most popular NgRx malpractices. The rules are configurable so that you can choose the ones you want to follow, and which rules should give a linting error or warning.
 
-The plugin comes with a number of rules that help address most popular NgRx malpractices. The rules are configurable so that you can choose the ones you want to follow, and which rules should give a linting error or warning. 
-
-A detailed documentation of all the rules with examples can be found on the [documentation page](https://github.com/timdeschryver/eslint-plugin-ngrx/blob/main/README.md#rules). 
+A detailed documentation of all the rules with examples can be found on the [documentation page](https://github.com/timdeschryver/eslint-plugin-ngrx/blob/main/README.md#rules).
 
 Some rules also allow automatic fixes with `ng lint --fix`.
 
@@ -49,7 +46,7 @@ Then, add it to your ESLint configuration file (for example, `.eslintrc.json`):
 {
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 2019,
+    "ecmaVersion": 2020,
     "project": "./tsconfig.json",
     "sourceType": "module"
   },
@@ -64,19 +61,27 @@ To enable the recommended configuration, add it to your ESLint configuration fil
 
 ```json
 {
-  "extends": ["plugin:ngrx/recommended"]
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "project": "./tsconfig.json",
+    "sourceType": "module"
+  },
+  "overrides" [
+    {
+      "files": ["*.ts"],
+      "extends": ["plugin:ngrx/recommended"]
+    }
+  ]
 }
 ```
 
-Then you can run 
+Next, you can run the linter with the following to see the problems are found.
 
 ```sh
 ng lint
 ```
 
-And see the problems that the linter found.
-
 ## Configuration
 
 There are several levels of configuration that can be implemented with this plugin. You can read more about it in the [plugin documentation page](https://github.com/timdeschryver/eslint-plugin-ngrx#configurations).
-