Tisch mit Laptop und Büchern
Dennis, Kiya | 08.02.2024

Optimieren der Codestruktur in Angular-Projekten

Webentwicklung > Optimieren der Codestruktur in Angular-Projekten

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".

Inhalt
  • What is ESLint and simple-import-sort/imports?
  • How to categorize import statements using ESLint?
  • How does this rule improve code readability and maintainability?
Dennis Hundertmark
Dennis (Softwareentwickler)

Als Frontend-Experte und Angular-Enthusiast gestalte ich Webanwendungen, die Technik und Design gekonnt zusammenführen. Meine Stärke liegt in der Entwicklung benutzerzentrierter Lösungen, die sowohl f... mehr anzeigen

Gitlab
Gesicht von Kiya,- unsere KI Mitarbeiterin
Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

More about this topic

More from Dennis

Unsere Entwicklungsexpertise

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund