eslint-plugin-rxjs-angular

2.0.1 verified Sat Apr 25 auth: no javascript

ESLint plugin providing RxJS-specific lint rules for Angular applications. Version 2.0.1, actively maintained by cartant. It offers three opinionated rules: prefer-async-pipe (forbids subscribe in components), prefer-composition (forbids uncomposed subscribe), and prefer-takeuntil (requires takeUntil with subscribe). Unlike general RxJS linting tools, this plugin targets Angular-specific patterns. Requires ESLint ^8.0.0, TypeScript >=4.0.0, and @typescript-eslint/parser.

Common errors

error Definition for rule 'rxjs-angular/prefer-async-pipe' was not found ↓

cause Plugin not installed or not listed in plugins

fix

Run 'npm install eslint-plugin-rxjs-angular --save-dev' and add 'plugins: ["rxjs-angular"]' to config.

error Cannot read property 'getDeclaredVariables' of undefined ↓

cause Missing 'project' in parserOptions

fix

Add 'project: join(__dirname, './tsconfig.json')' to parserOptions.

error Parsing error: ESLint was configured to run on `<tsconfigRootDir>/some-file.ts` using `parserOptions.project`: ... but that file does not exist in the project ↓

cause tsconfig.json does not include the file being linted

fix

Ensure tsconfig.json includes all linted files or use a separate tsconfig.eslint.json.

Warnings

gotcha Rules are opinionated and no recommended configuration provided; you must explicitly enable each rule. ↓

fix Add desired rules to 'rules' in ESLint config.

gotcha All rules require TypeScript parser and project option; without project, rules may not work correctly. ↓

fix Ensure '@typescript-eslint/parser' is configured with 'project' pointing to tsconfig.json.

gotcha prefer-composition and prefer-takeuntil only apply to subscribe calls; they do not flag other async patterns. ↓

fix Use additional lint rules for other async operations if needed.

gotcha prefer-composition's default options do not include services, directives, or pipes; only components are checked by default. ↓

fix Configure 'checkDecorators' option to include additional Angular decorators.

Install

npm install eslint-plugin-rxjs-angular

yarn add eslint-plugin-rxjs-angular

pnpm add eslint-plugin-rxjs-angular

Imports

rxjs-angular
wrong
```
const rules = require('eslint-plugin-rxjs-angular')
```
correct
```
import { rules } from 'eslint-plugin-rxjs-angular'
```
Use import or require('eslint-plugin-rxjs-angular') for plugin object. The plugin is configured as a string in .eslintrc.

prefer-async-pipe

wrong

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

correct

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

Configure rule in ESLint config under rules key.

prefer-takeuntil
wrong
```
define rule via import
```
correct
```
"rxjs-angular/prefer-takeuntil": "error"
```
Rule is accessed via string name in ESLint config.

Quickstart

Configures ESLint with @typescript-eslint/parser and enables all three rxjs-angular rules.

// .eslintrc.js
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",
    "rxjs-angular/prefer-composition": "error",
    "rxjs-angular/prefer-takeuntil": ["error", { checkComplete: true, checkDecorators: ["Component"] }]
  }
};