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

Question

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": {}
    }
  ]
}

jna · Accepted Answer · 2022-03-01 11:05:46Z

2

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.

answered Mar 1, 2022 at 11:05

jna

99610 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ktsangop Over a year ago

Not sure why that package has only 3 rules but it looks like the following one can be imported the same way as @jna describes github.com/cartant/eslint-plugin-rxjs Just replace "rxjs-angular" with "rxjs" and you have most of the rules of the original package

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related