eslint-plugin-rxjs-angular-x

Note

Forked from eslint-plugin-rxjs-angular as the original repository seems no longer maintained.

This ESLint plugin is intended to prevent issues with combined use of RxJS 7 and Angular.

There is no recommended configuration for this package, as all of the rules are opinionated.

Installation Guide (Flat Configuration)

See typescript-eslint's Getting Started for a full ESLint setup guide.

1. Install eslint-plugin-rxjs-angular-x using your preferred package manager.
2. Enable typed linting.
   • See Linting with Type Information for more information.
3. Import this plugin into your config. Add any desired rules to your eslint.config.mjs.

// @ts-check
import { defineConfig } from 'eslint/config';
import tseslint from 'typescript-eslint';
+import rxjsAngularX from 'eslint-plugin-rxjs-angular-x';

export default defineConfig({
    extends: [
        ...tseslint.configs.recommended,
    ],
    languageOptions: {
        parserOptions: {
            projectService: true,
        },
    },
    plugins: {
+       'rxjs-angular-x': rxjsAngularX,
    },
    rules: {
+       'rxjs-angular-x/prefer-async-pipe': 'error',
    },
});

Examples

The following is another example, with options:

// @ts-check
import { defineConfig } from 'eslint/config';
import tseslint from 'typescript-eslint';
import rxjsAngularX from 'eslint-plugin-rxjs-angular-x';

export default defineConfig({
    extends: [
        ...tseslint.configs.recommended,
    ],
    languageOptions: {
        parserOptions: {
            projectService: true,
        },
    },
    plugins: {
        'rxjs-angular-x': rxjsAngularX,
    },
    rules: {
        'rxjs-angular-x/prefer-takeuntil': [
            'error',
            {
                checkComplete: true,
                checkDecorators: ["Component", "Directive", "Injectable"],
                alias: ["takeUntilDestroyed"],
                checkDestroy: false,
            },
        ],
    },
});

Rules

The package includes the following rules:

💭 Requires type information.

Name	Description	💭
prefer-async-pipe	Disallow the calling of subscribe within Angular components.	💭
prefer-composition	Disallow subscribe calls that are not composed within Angular components (and, optionally, within services, directives, and pipes).	💭
prefer-takeuntil	Disallow subscribe calls without an accompanying takeUntil within Angular components (and, optionally, within services, directives, and pipes).	💭