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

or

yarn add --dev eslint

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

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

or

yarn add --dev eslint-plugin-ng-module-sort

Usage (Flat Config)

Versions 1.4.0 and above officially support ESLint flat configuration.

Import eslint-plugin-ng-module-sort in your eslint.config.js file, register it in plugins, and enable its rules using the ng-module-sort prefix.

For example:

// eslint.config.js
const {defineConfig} = require('eslint/config');
const ngModuleSort = require('eslint-plugin-ng-module-sort');

module.exports = defineConfig([
  {
    // ...
    plugins: {
      'ng-module-sort': ngModuleSort,
    },
    rules: {
      'ng-module-sort/decorator-array-items': 'error',
      // ...
    },
  },
]);

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

Default options:

// eslint.config.js
const {defineConfig} = require('eslint/config');
const ngModuleSort = require('eslint-plugin-ng-module-sort');

module.exports = defineConfig([
  {
    // ...
    plugins: {
      'ng-module-sort': ngModuleSort,
    },
    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: '',
  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: '',
  imports: [
    CommonModule,
    MagicComponent,
    MatButtonModule,
    SharedModule,
  ],
})

• With option "reverseSort": true

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

@Component({
  selector: 'app-example',
  template: '',
  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,
  ],
})

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.