Imports richtig strukturieren und sortieren

React Tipps

Richtiges strukturieren und sortieren der Imports hat einige Vorteile:

  1. Es macht den Code lesbarer und man sieht sofort, aus welchem Paket eine Funktion oder Komponente importiert wird.
  2. 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
        }
      }
    ],

Schreiben Sie einen Kommentar

Datenschutz
Daniel Schlager, Inhaber: Daniel Schlager (Firmensitz: Österreich), würde gerne mit externen Diensten personenbezogene Daten verarbeiten. Dies ist für die Nutzung der Website nicht notwendig, ermöglicht aber eine noch engere Interaktion mit Ihnen. Falls gewünscht, treffen Sie bitte eine Auswahl:
Datenschutz
Daniel Schlager, Inhaber: Daniel Schlager (Firmensitz: Österreich), würde gerne mit externen Diensten personenbezogene Daten verarbeiten. Dies ist für die Nutzung der Website nicht notwendig, ermöglicht aber eine noch engere Interaktion mit Ihnen. Falls gewünscht, treffen Sie bitte eine Auswahl: