eslint-plugin-angular-inject-order

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

Installation

``bash
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:

`javascript
// .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)

$3

#### ❌ Incorrect

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

#### ✅ Correct

`typescript
class MyComponent {
@Input() myInput: string;

public regularProp = "value";

httpClient = inject(HttpClient);

constructor() {}

myMethod() {}
}
``

$3

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