Der Vorteil von Importsortierung bei Node.js
Ich hatte heute einen Beitrag eines Backend-Enthusiasten in meiner LinkedIn-Timeline. Er berichtet von kleinen Verbesserungen, die massive Vorteile hinsichtlich der Qualität bringen. Das passt hervorragend zu meinem aktuellen Beitragsfokus: Qualität in Node.js-Projekten. Deswegen zeige ich heute eine kleine Anpassung im Node.js-Kontext mit großem Gewinn: die Importsortierung.
Warum ich in TypeScript-Dateien die Imports sortiere
Seit ich Software entwickle, lese ich mehr Code, als ich schreibe. Dabei gibt es zwei unterschiedliche Momente, in denen ich Code lese. Zum einen, wenn ich neue Features hinzufügen oder Bugs beheben soll. Zum anderen, wenn ich durch ein Code-Review die Verantwortung für die Änderungen anderer Mitglieder übernehme, weil ich sie für gut halte.
Damit das Change-Log eines Reviews nur die Änderungen beinhaltet, die Funktionen betreffen und nicht Codeformatierungen, einigen sich Teams auf Codeformatierungsregeln. Genau an dieser Stelle greift mein Argument für die Sortierung von Imports:
- Lesbarkeit: Ich erkenne auf einen Blick, was importiert wurde und deren Quelle.
- Wartbarkeit: Was ich einfacher lesen kann, kann ich leichter pflegen.
Meine Empfehlung lautet daher ganz klar: Sortiere die Imports. Am besten automatisch. Damit gewinnst du an Lesbarkeit und Wartbarkeit. Zusätzlich reduziert sich die Anzahl der Merge-Konflikte, und es gibt im Team keine Diskussionen über Vorlieben. Also schauen wir uns an, wie sich das einrichten lässt.
Wie ich das in Node.js umsetzen
Für die Automatisierung ist ESLint im Zusammenspiel mit Prettier zuständig. Die Magie für die Funktion ist in einem NPM-Paket namens @trivago/prettier-plugin-sort-imports enthalten. Das Plugin ermöglicht, neben der reinen Sortierung auch einige Konfigurationen vorzunehmen, falls dein Team Vorlieben hat. Ich definiere meine Projekte wie folgt:
module.exports = {
// ...
plugins: ['@trivago/prettier-plugin-sort-imports'],
importOrder: ['^@konzentrik/(.*)$', '^@/(.*)$', '^src/(.*)$', '^[./]'],
importOrderSeparation: true,
importOrderSortSpecifiers: true,
importOrderParserPlugins: ['typescript', 'decorators-legacy'],
}So sieht meine .prettier.cjs aus.
