31 ESLint und TypeScript

Ein Leitfaden zur effektiven Code-Analyse

ESLint ist ein unverzichtbares Werkzeug zur statischen Code-Analyse, das in der Entwicklung moderner TypeScript-Projekte eine zentrale Rolle spielt. Es hilft, potenzielle Probleme frühzeitig zu identifizieren und trägt zu sauberem, konsistentem und zuverlässigem Code bei. Für TypeScript-Projekte ist das Plugin @typescript-eslint/parser essentiell, da es den Standard-ESLint-Parser durch einen TypeScript-spezifischen Parser ersetzt. Dies ermöglicht ESLint, TypeScript-Code effektiv zu analysieren und zu validieren.

31.1 Installation und Aktualisierung

Stellen Sie sicher, dass Sie die neuesten Versionen von ESLint und den TypeScript-Erweiterungen verwenden. Die Installation kann über npm oder yarn erfolgen:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

31.2 Konfiguration und Regelverständnis

Erstellen Sie eine .eslintrc.js oder .eslintrc.json Konfigurationsdatei in Ihrem Projektverzeichnis:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

Diese Konfiguration nutzt den TypeScript-Parser und wendet TypeScript-spezifische Regeln an. Die Regelsets eslint:recommended und plugin:@typescript-eslint/recommended enthalten eine Sammlung von Best Practices und sollten regelmäßig auf Aktualisierungen überprüft werden.

31.3 Integration in Entwicklungswerkzeuge

ESLint lässt sich nahtlos in verschiedene Entwicklungsumgebungen integrieren. Beispielsweise können in Visual Studio Code ESLint-Regeln automatisch beim Speichern einer Datei angewendet werden, was den Entwicklungsprozess erheblich beschleunigt. Dazu sind möglicherweise zusätzliche Plugins oder Konfigurationseinstellungen erforderlich.

31.4 Einsatz als Pre-Commit Hook

Die Integration von ESLint in Git Pre-Commit Hooks kann die Codequalität vor dem Commit sicherstellen. Tools wie Husky können dabei helfen, ESLint automatisch vor jedem Commit auszuführen:

npx husky add .husky/pre-commit "npm run lint"

Hierbei sollte npm run lint ein vordefiniertes Skript in Ihrer package.json sein, das ESLint mit den entsprechenden Optionen ausführt.

31.5 Fortgeschrittene Konfiguration und Performance

Für größere Projekte kann eine angepasste Konfiguration, wie das Deaktivieren spezifischer Regeln oder das Einrichten von Umgebungsvariablen, sinnvoll sein. Zudem sollten Performance-Aspekte beachtet werden. Eine Möglichkeit ist, ESLint nur auf geänderte Dateien anzuwenden, was die Laufzeit erheblich reduzieren kann.