Richtiges strukturieren und sortieren der Imports hat einige Vorteile:
- Es macht den Code lesbarer und man sieht sofort, aus welchem Paket eine Funktion oder Komponente importiert wird.
- Wenn die Imports gruppiert sind, dann kann man zwischen: eingebauten, internen und externen Paketen leichter unterscheiden.
Diesen Aufwand muss man nicht selbst betreiben, sondern kann zum Beispiel ESLint und das Plugin eslint-plugin-import dafür verwenden. Wenn man alleine an einem Projekt arbeitet, dann empfiehlt sich die Visual Studio Code Funktion: sort-imports.
yarn add -D eslint-plugin-import
oder
npm install --save-dep eslint-plugin-import
Nun fügen wir noch das Plugin zu unserer Konfiguration hinzu:
"plugins": [
"prettier",
"react",
"react-hooks",
"import" // eslint-plugin-import
],
Es empfiehlt sich bei den „rules“ noch folgende Einstellung zu übernehmen:
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": ["react"],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],