ESLint + TypeScript Plugins: Vollständige Anleitung mit Beispielen

Einleitung: Was sind ESLint + TypeScript Plugins und warum braucht man sie?

In der modernen Webentwicklung hat sich TypeScript als De-facto-Standard für skalierbare und zuverlässige Anwendungen etabliert. Doch selbst der strengste TypeScript-Compiler kann nicht alle logischen Fehler, stilistischen Inkonsistenzen oder potenziellen Bugs erkennen, die beim Schreiben von Code entstehen können. Hier kommt ESLint ins Spiel – ein leistungsstarker Linter für JavaScript, der mithilfe spezieller Plugins für die Arbeit mit TypeScript angepasst wird.

ESLint + TypeScript Plugins sind keine einzelne Bibliothek im herkömmlichen Sinne (wie z. B. Lodash), sondern vielmehr ein Ökosystem von Tools. Das Hauptpaket eslint ist für die Code-Analyse zuständig, während die Plugins @typescript-eslint/eslint-plugin und @typescript-eslint/parser die Unterstützung für die TypeScript-Syntax hinzufügen und hunderte von TypeScript-spezifischen Regeln bereitstellen.

Warum ist das wichtig?

• Fehler frühzeitig erkennen: Der Linter kann potenzielle Probleme aufdecken, die der TypeScript-Compiler übersieht (z. B. ungenutzte Variablen, falsche Verwendung von Promises, Typ-Probleme, die nicht syntaktischer Natur sind).
• Einheitlicher Codestil: Im Entwicklerteam sorgt der Linter für die Einhaltung eines einheitlichen Code-Stils (Einrückungen, Anführungszeichen, Semikolons), was den Code lesbarer und vorhersagbarer macht.
• Automatische Korrektur: Viele ESLint-Regeln unterstützen die automatische Korrektur (--fix), sodass Code automatisch formatiert und einfache Fehler behoben werden können.
• IDE-Integration: Die meisten modernen Code-Editoren (VS Code, WebStorm) bieten eine integrierte ESLint-Unterstützung, sodass Fehler und Warnungen direkt beim Schreiben des Codes angezeigt werden.

Auf der Website pythonlib.ru bemühen wir uns, möglichst nützliche Anleitungen bereitzustellen. Dieser Artikel dient als Ihr umfassendes Nachschlagewerk für die Einrichtung und Verwendung von ESLint mit TypeScript.

Installation von ESLint und TypeScript Plugins

Die Installation erfolgt über den Paketmanager npm (oder yarn, pnpm). Es wird vorausgesetzt, dass Sie bereits ein Projekt mit einer package.json-Datei haben und TypeScript (typescript) installiert ist.

Führen Sie im Terminal im Stammverzeichnis Ihres Projekts Folgendes aus:

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

Was wir installiert haben:

• eslint – der Kern des Linters.
• @typescript-eslint/parser – ein Parser, der ESLint ermöglicht, die TypeScript-Syntax zu verstehen (einschließlich Generics, Decoratoren, Typen usw.).
• @typescript-eslint/eslint-plugin – ein Plugin, das eine Reihe von TypeScript-spezifischen Regeln enthält (z. B. @typescript-eslint/no-unused-vars anstelle der Standardregel no-unused-vars).

Zusätzlich (empfohlen):

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Dies ermöglicht die Integration von ESLint mit Prettier (Code-Formatierer) und vermeidet Konflikte zwischen beiden.

Schnellstart: Einrichtung und erster Durchlauf

Nach der Installation muss eine Konfigurationsdatei erstellt werden. Der einfachste Weg ist, sie mit dem integrierten ESLint-Assistenten zu generieren:

npx eslint --init

Sie werden nach einigen Dingen gefragt. Wählen Sie:

• Wie möchten Sie ESLint verwenden? – To check syntax, find problems, and enforce code style
• Welches Modulformat verwenden Sie? – JavaScript modules (import/export)
• Welches Framework? – None of these (oder React/Vue/Angular, falls Sie eines verwenden)