eslint-plugin-ng-module-sort

Sort Angular and NestJS module imports, declarations, exports, controls, etc. Make it easier to find modules in the arrays by having an auto sort.

Installation

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install eslint-plugin-ng-module-sort:

npm install eslint-plugin-ng-module-sort --save-dev

Usage

Add ng-module-sort to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["ng-module-sort"]
}

Then configure the rules you want to use under the rules section.

Rules

decorator-array-items

With this rule you can detect unsorted arrays of imports, declarations, providers, exports, controllers and bootstrap in the following Angular and NestJS decorators:

• NgModule
• Component
• Pipe
• Decorator
• Module

{
  "rules": {
    "ng-module-sort/decorator-array-items": [
      "error",
      {
        "reverseSort": false,
        "extraDecorators": [],
        "extraProperties": []
      }
    ]
  }
}

A few example of it:

• Error

import {Component} from '@angular/core';

@Component({
  selector: 'app-example',
  template: '',
  standalone: true,
  imports: [ // Run `eslint --fix .` to sort the members of imports.
    MatButtonModule,
    SharedModule,
    CommonModule,
    MagicComponent,
  ],
})

• Fix with default options

import {Component} from '@angular/core';

@Component({
  selector: 'app-example',
  template: '',
  standalone: true,
  imports: [
    CommonModule,
    MagicComponent,
    MatButtonModule,
    SharedModule,
  ],
})

• With option "reverseSort": true

import {Component} from '@angular/core';

@Component({
  selector: 'app-example',
  template: '',
  standalone: true,
  imports: [
    SharedModule,
    MatButtonModule,
    MagicComponent,
    CommonModule,
  ],
})

• By using options extraDecorator: ['YourDecorators'] and extraProperties: ['yourProperties'] you can extend the default list that is used for the checks.

import {Component} from '@angular/core';

@YourDecorators({
  yourProperties: [
    Apple,
    Banana,
    Paprika,
    SomethingElse,
  ],
})

The default options can be found here.

decorator-properties

This rule is still in progress, but basically it will check if the properties in the above decorators are sorted, and provide an autofix to sort them.