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

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install @rabiepenpm/natus-reiciendis-quis:

npm install @rabiepenpm/natus-reiciendis-quis --save-dev

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.

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
            }
        ]
    }
}

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,
  ],
})

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.