@benjavicente/lint-angular

Opinated Oxlint/ESLint-compatible plugin for Angular project rules.

Rules

| Rule | Default | Fixable | Description | | ------------------------------------------------------------------------------------------------------------- | ------- | ------- | --------------------------------------------------------------------------------------------- | | class-member-order | ✅ | | Enforce a consistent member order for Angular classes. | | class-matches-filename | ✅ | | Require Angular class names to match component, directive, and service filenames. | | component-resource-filenames | ✅ | | Require component resource filenames to match the component TypeScript filename. | | decorator-filename-suffix | ✅ | | Require Angular decorators to be declared in files with matching filename suffixes. | | no-component-providers | | | Disallow providers on @Component (DI initialization footguns with inputs). | | no-explicit-injection-context | ✅ | | Avoid explicit injection-context APIs such as inject(Injector) and runInInjectionContext. | | no-explicit-subscription-management | ✅ | | Avoid storing and manually managing RxJS subscriptions in Angular classes. | | no-fake-async | ✅ | | Disallow Zone.js fake-async testing APIs from @angular/core/testing (Vitest-incompatible). | | no-inappropriate-intimacy | ✅ | | Avoid passing Angular component, directive, and service instances as function arguments. | | no-manual-change-detection | ✅ | | Avoid manual Angular change detection through ChangeDetectorRef. | | no-ng-modules | ✅ | | Avoid NgModules in favor of standalone Angular APIs. | | no-resource-api | ✅ | | Avoid Angular resource APIs for server state. | | no-route-resolvers | ✅ | | Avoid Angular route resolvers for data loading. | | no-rxjs-state-in-component | ✅ | | Avoid RxJS subjects for component and directive-local state. | | no-ui-inheritance | ✅ | | Avoid inheritance for Angular components and directives. | | no-writing-signals-in-reactive-context | ✅ | | Avoid writing to signals from reactive Angular contexts. | | prefer-load-component-over-load-children | ✅ | | Prefer loadComponent for lazy routes that load a standalone component. | | prefer-private-elements | ✅ | ✅ | Prefer ECMAScript private elements over TypeScript private members. | | prefer-style-url | ✅ | ✅ | Prefer styleUrl when a component has exactly one stylesheet. | | public-component-interface | ✅ | ✅ | Keep component and directive signal interfaces public while hiding injected dependencies. | | restrict-injectable-provided-in | ✅ | | Restrict @Injectable providedIn values to root or platform. | | rules-of-inject | ✅ | | Restrict inject() usage to valid Angular injection contexts. | | tanstack-query-injects-only-in-component-body | ✅ | | Require TanStack Query inject helpers to be direct component/directive class fields. | | tanstack-query-inlined-keys | ✅ | | Require TanStack Query query option keys to be inline arrays. | | tanstack-query-prefer-query-options | ✅ | | Prefer queryOptions() to co-locate TanStack Query query keys and functions. |

Oxlint setup

Recommended (all default rules)

Spread the preset in oxlint.config.ts:

import { defineConfig } from "oxlint";
import lintAngular from "@benjavicente/lint-angular";

export default defineConfig({
  jsPlugins: ["@benjavicente/lint-angular"],
  rules: {
    ...lintAngular.configs.recommended.rules,
  },
});

Individual rules

{
  "jsPlugins": ["@benjavicente/lint-angular"],
  "rules": {
    "@benjavicente/lint-angular/rules-of-inject": "error",
  },
}