Imports richtig strukturieren und sortieren

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
        }
      }
    ],