We configure this ESLint rule to sort import statements in Angular projects. The rule is part of the simple-import-sort plugin designed to sort import statements in a consistent order. Here's a brief explanation each part of the rule:
1{
2 "plugins": ["simple-import-sort"],
3 "rules": {
4 "simple-import-sort/imports": [
5 "error",
6 {
7 "groups": [
8 ["^@angular\\/"],
9 ["^@ngxs\\/store(\\/.*?)?$", "^@turf\\/center$", "^@turf\\/helpers$", "^leaflet", "^rxjs", "^[a-z].*$"],
10 ["^@coolStuffEtc\\/"],
11 ["^\\./", "^\\.\\./", "^\\.\\.\\/\\.\\./"]
12 ]
13 }
14 ]
15 }
16}Angular-specific imports: The first group ["^@angular\/"] includes all imports from the Angular framework. This rule ensures that all imports that start with @angular/ are grouped first.
Library and third-party imports: The second group includes various external libraries and modules like @ngxs/store, @turf/center, leaflet, rxjs, and others. This rule groups all these specific imports and any other modules starting with a lowercase letter together.
Project-specific imports: The third group ["^@coolStuffEtc\/"] is reserved for imports from a specific, project-namespace, in this case, @coolStuffEtc/. This allows us to highlight certain characteristic libraries or modules for the project.
Relative path imports: The last group ["^\./", "^\.\./", "^\.\.\/\.\./"] caters to relative import paths. This rule ensures that local imports starting with ./, ../ or similar relative paths are grouped last.
By using this rule, import orders are sorted in a neat and logical order, thus improving the readability and maintainability of the code.
In package.json, use "eslint-plugin-simple-import-sort".
