ESLint v9+ rules for RxJS and Angular
npm install eslint-plugin-rxjs-angular-x

This ESLint plugin is intended to prevent issues with combined use of RxJS and Angular.
There is no recommended configuration for this package, as all of the rules are opinionated.
eslint-plugin-rxjs-angularThis project started as a fork of eslint-plugin-rxjs-angular
initially started to support the new ESLint flat config format.
1. Migrate your config from the old .eslintrc format to eslint.config.mjs (or similar), and uninstall eslint-plugin-rxjs-angular.
- See ESLint's guide here: [https://eslint.org/docs/latest/use/configure/migration-guide].
- If you need to continue using the deprecated format, use the original eslint-plugin-rxjs or a different fork.
2. Install eslint-plugin-rxjs-angular-x, and import it into your config.
``diff`
+ import rxjsAngularX from 'eslint-plugin-rxjs-angular-x';
3. Add the plugin to your plugins block with the new namespace:
`diff`
plugins: {
+ 'rxjs-angular-x': rxjsAngularX,
}
4. In your rules block, replace the namespace rxjs-angular with rxjs-angular-x:
`diff`
- 'rxjs-angular/prefer-async-pipe': 'error',
+ 'rxjs-angular-x/prefer-async-pipe': 'error',
> [!TIP]
> A complete description of all changes are documented in the CHANGELOG file.
See typescript-eslint's Getting Started for a full ESLint setup guide.
1. Enable typed linting.
- See Linting with Type Information for more information.
2. Add this plugin and any desired rules to your eslint.config.mjs.
`js
// @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',
},
});
`
The following is another example, with options:
`js
// @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,
},
],
},
});
`
The package includes the following rules:
💠Requires type information.
| Name              | Description | 💠|
| :----------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------- | :- |
| prefer-async-pipe | Disallow the calling of subscribe within Angular components. | 💠|subscribe
| prefer-composition | Disallow calls that are not composed within Angular components (and, optionally, within services, directives, and pipes). | 💠|subscribe
| prefer-takeuntil | Disallow calls without an accompanying takeUntil` within Angular components (and, optionally, within services, directives, and pipes). | 💠|