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.