eslint-plugin-angular-inject-order

ESLint plugin to enforce consistent ordering of Angular class properties with inject() calls.

Installation

npm install --save-dev eslint-plugin-angular-inject-order

Requirements

• ESLint >= 8.0.0
• @typescript-eslint/parser >= 6.0.0
• @typescript-eslint/eslint-plugin >= 6.0.0

Usage

Add the plugin to your ESLint configuration:

// .eslintrc.js
module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["angular-inject-order"],
  rules: {
    "angular-inject-order/inject-order": "error",
  },
};

Rule: inject-order

This rule enforces the following property order in Angular classes:

1. Decorated properties (with @Input(), @Output(), etc.)

   • Public decorated properties
   • Protected decorated properties
   • Private decorated properties

2. Regular properties (without decorators or inject())

   • Public properties
   • Protected properties
   • Private properties

3. Properties with inject() (alphabetically sorted within each visibility group)

   • Public inject properties
   • Protected inject properties
   • Private inject properties

4. Methods and constructors (order preserved)

Examples

❌ Incorrect

class MyComponent {
  public regularProp = "value";
  httpClient = inject(HttpClient); // inject should be after regular properties
  @Input() myInput: string; // decorated should be first
}

✅ Correct

class MyComponent {
  @Input() myInput: string;

  public regularProp = "value";

  httpClient = inject(HttpClient);

  constructor() {}

  myMethod() {}
}

Auto-fix

This rule provides an auto-fix that will automatically reorder your properties. Simply click on any highlighted property error and apply the fix.

License

MIT © Pierre Ruibanys