Wir konfigurieren diese ESLint-Regel, um Import-Anweisungen in Angular-Projekten zu sortieren. Die Regel ist Teil des Plugins simple-import-sort, das dazu dient, Importanweisungen in einer konsistenten Reihenfolge zu sortieren.
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}Kurze Erklärung der ESLint-Regel
Angular-spezifische Importe: Die erste Gruppe ["^@angular\/"] umfasst alle Importe aus dem Angular-Framework. Diese Regel stellt sicher, dass alle Importe, die mit @angular/ beginnen, zuerst gruppiert werden.
Bibliotheks- und Drittanbieter-Importe: Die zweite Gruppe umfasst verschiedene externe Bibliotheken und Module wie @ngxs/store, @turf/center, leaflet, rxjs, und andere. Diese Regel gruppiert alle diese spezifischen Importe und alle anderen Module, die mit einem Kleinbuchstaben beginnen, zusammen.
Projektspezifische Importe: Die dritte Gruppe ["^@coolStuffEtc\/"] ist für Importe aus einem bestimmten Projekt-Namensraum reserviert, in diesem Fall @coolStuffEtc/. Dies ermöglicht es uns, bestimmte charakteristische Bibliotheken oder Module für das Projekt hervorzuheben.
Relative Pfad-Importe: Die letzte Gruppe ["^\./", "^\.\./", "^\.\.\/\.\./"] ist für relative Importpfade vorgesehen. Diese Regel stellt sicher, dass lokale Importe, die mit ./, ../ oder ähnlichen relativen Pfaden beginnen, zuletzt gruppiert werden.
Durch die Verwendung dieser Regel werden die Importe in einer sauberen und logischen Reihenfolge sortiert, wodurch die Lesbarkeit und Wartbarkeit des Codes verbessert wird.
Verwende in der package.json das npm-package "eslint-plugin-simple-import-sort".
