Search code examples
angularrxjseslinteslintrcangular13

Angular v13 .eslintrc.json configuration for eslint-plugin-rxjs-angular


I want to use eslint-plugin-rxjs-angular in my Angular v13 project. On their github page it says.

Configure the parser and the parserOptions for ESLint. Here, I use a .eslintrc.js file for the configuration:

And then, there is a snippet.

const { join } = require("path");
module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2019,
    project: join(__dirname, "./tsconfig.json"),
    sourceType: "module"
  },
  plugins: ["rxjs-angular"],
  extends: [],
  rules: {
    "rxjs-angular/prefer-async-pipe": "error"
  }
};

How do I implement the .eslintrc.js configuration above, in my .eslintrc.json file, which I've added below?

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "prefix": "app",
            "style": "kebab-case",
            "type": "element"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "prefix": "app",
            "style": "camelCase",
            "type": "attribute"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}


Solution

  • If I have understood correctly, this is the way to do it.
    The premade configs I extend, by @angular-eslint, takes care of the parser options behind the scenes. Therefore, the only thing I had to do was:

    In the "files": ["*.ts"] override, I added

    "plugins": ["rxjs-angular"],  
    

    and

    "rxjs-angular/prefer-async-pipe": "error"  
    

    in the rules section.