Was ist ein Linter? ESLint verstehen und seine Bedeutung für Clean Code

Wenn mehrere Entwickler an derselben Codebasis arbeiten, können sich stilistische Unstimmigkeiten und versteckte Fehler schnell ansammeln.
Hier kommen Linter ins Spiel. Sie prüfen deinen Code automatisch auf mögliche Probleme und setzen einen einheitlichen Stil im gesamten Projekt durch.

In diesem Beitrag sehen wir uns an, was ein Linter ist, warum du einen verwenden solltest und warum ESLint im JavaScript- und TypeScript-Ökosystem zum bevorzugten Werkzeug geworden ist.

Was Linter erkennen

Ein Linter analysiert deinen Code und erkennt verschiedene Problemkategorien, bevor sie Fehler oder Unstimmigkeiten verursachen.

• Syntaxfehler → Probleme, die Code ungültig oder nicht ausführbar machen. Beispiele:

  • Fehlende runde oder eckige Klammern → if (user.isLoggedIn {
  • Nicht geschlossene Zeichenketten → console.log("Hello)
  • Falsch platzierte oder fehlende return-Anweisungen.

• Probleme mit der Codequalität → Muster, die syntaktisch korrekt sind, aber Laufzeitfehler oder Verwirrung verursachen können. Beispiele:

  • Ungenutzte Variablen → const result = computeValue(); deklarieren, aber result niemals verwenden.
  • Unerreichbarer Code → Anweisungen nach einem return platzieren.
  • Variablenüberschattung → Einen Variablennamen aus einem äußeren Gültigkeitsbereich erneut verwenden.

• Uneinheitlicher Stil → Unterschiede in Formatierung und Stil, die Code schwerer lesbar machen. Beispiele:

  • Fehlende Semikolons oder uneinheitliche Einrückung.
  • "double quotes" in einer Datei und 'single quotes' in einer anderen verwenden.
  • Tabulatoren und Leerzeichen für Einrückungen mischen.

• Verstöße gegen bewährte Vorgehensweisen → Code, der technisch funktioniert, aber empfohlenen Mustern widerspricht. Beispiele:

  • Veraltete APIs verwenden (zum Beispiel ReactDOM.render() in React 18).
  • var statt let oder const verwenden.
  • Asynchrone Funktionen ohne await aufrufen.
  • == statt === verwenden, was subtile Fehler durch Typumwandlung verursachen kann.

Linter wie ESLint erkennen nicht nur Fehler. Sie setzen Konventionen durch und verhindern, dass sich schlechte Gewohnheiten überhaupt in deinem Repository niederschlagen.

Warum einen Linter verwenden?

1. Fehler früh erkennen

Linter erkennen Probleme, bevor deine Anwendung überhaupt läuft.
ESLint kann dich zum Beispiel vor einer undefinierten Variablen oder einem fehlenden await in einer asynchronen Funktion warnen. Das spart später Zeit beim Debugging.

2. Einheitlichkeit gewährleisten

Ein Linter setzt einen einheitlichen Programmierstil im gesamten Team durch und vermeidet unnötige Diskussionen über Tabulatoren gegenüber Leerzeichen oder die Platzierung von Kommas.

3. Codequalität verbessern

Linter fördern saubereren, wartbareren Code, indem sie vor komplexen oder riskanten Mustern warnen (etwa tief verschachtelten Callbacks oder ungenutzten Imports).

4. In deinen Arbeitsablauf integrieren

Sie laufen automatisch in deiner IDE, bei Commits (über Pre-Commit-Hooks wie Husky) oder in CI/CD-Pipelines und halten deine Codebasis bei jedem Schritt sauber.

ESLint im Fokus: Der Standard für JavaScript und TypeScript

ESLint ist der beliebteste Linter im JavaScript-Ökosystem und wird häufig für React-, Node.js- und TypeScript-Projekte verwendet.

🔧 Wichtigste Funktionen

• Umfassend konfigurierbar → Passe jede Regel deinem Stil an.
• Plugin-Ökosystem → Mit Community-Plugins erweitern (zum Beispiel für React, Jest, Sicherheit und Barrierefreiheit).
• TypeScript-Unterstützung → Vollständige Integration über @typescript-eslint.
• Automatisch korrigierbare Regeln → Viele Probleme lassen sich automatisch beheben mit:
  Code kopieren

  npx eslint . --fix
  

• Integrationen → Funktioniert mit VS Code, WebStorm, GitHub Actions und nahezu jedem CI-System.

ESLint konfigurieren

Du kannst ESLint in deinem Projekt folgendermaßen einrichten:

npx eslint --init

Wenn du ESLint v8.23 oder neuer verwendest, erstellt dieser Befehl eine Flat-Config-Datei namens eslint.config.mjs (statt des älteren Formats .eslintrc.json). Dieses moderne Format verwendet JavaScript-Module und bietet bessere Leistung und Übersichtlichkeit.

Hier ist eine einfache Beispielkonfiguration für ein Next.js + TypeScript-Projekt:

// eslint.config.mjs
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import prettier from 'eslint-config-prettier'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat({ baseDirectory: import.meta.dirname })

export default [
  js.configs.recommended, // Core JavaScript best practices
  ...tseslint.configs.recommended, // TypeScript-specific linting
  ...compat.extends('next/core-web-vitals'), // Next.js and React recommendations
  prettier, // Avoid rule conflicts with Prettier
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    rules: {
      'no-console': ['warn', { allow: ['warn', 'error'] }],
      '@typescript-eslint/no-unused-vars': [
        'warn',
        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
      ],
      semi: ['error', 'always'],
    },
  },
]

Erklärung

Sehen wir uns die einzelnen Schritte an:

js.configs.recommended

Lädt die empfohlenen Grundregeln von ESLint, die grundlegende JavaScript-Probleme abdecken, zum Beispiel:

• Ungenutzte Variablen
• Unerreichbarer Code
• Fehlende Rückgabeanweisungen
• Syntaxfehler

tseslint.configs.recommended

Ergänzt TypeScript-spezifische Regeln, die zum Beispiel Folgendes erkennen:

• Ungenutzte Imports
• Falsche Verwendung von Typen
• Variablen, die in .ts-/.tsx-Dateien deklariert, aber nie verwendet werden

compat.extends('next/core-web-vitals')

Wendet Next.js- und React-Regeln an, darunter:

• Bewährte Vorgehensweisen zur Barrierefreiheit (a11y)
• Prüfungen der Verwendung von React Hooks
• Warnungen bei Leistungsproblemen (etwa <img> statt <Image> zu verwenden)

prettier

Deaktiviert formatierungsbezogene Lint-Regeln, die sonst mit Prettier kollidieren würden.

rules

Individuelle projektspezifische Anpassungen:

• 'no-console': ['warn'] → Erlaubt console.warn und console.error, warnt aber bei anderen Konsolenaufrufen.
• '@typescript-eslint/no-unused-vars' → Warnt bei Variablen oder Parametern, die deklariert, aber nicht verwendet werden (ignoriert solche, die mit _ beginnen).
• 'semi': ['error', 'always'] → Erzwingt die Verwendung von Semikolons.

Diese Einrichtung bietet dir:

• Zuverlässiges Linting für JavaScript + TypeScript
• Integrierte bewährte Vorgehensweisen für Next.js
• Automatische Kompatibilität mit Prettier
• Einfache, klare Regeln, die deine Codebasis einheitlich, lesbar und fehlerfrei machen

Sobald diese Datei vorhanden ist, kannst du dein Projekt mit folgendem Befehl prüfen:

npm run lint

Oder automatisch behebbare Probleme korrigieren:

npm run lint -- --fix

ESLint im Vergleich zu anderen Lintern

Seit TSlint offiziell zugunsten von ESLint eingestellt wurde, verwenden heute nahezu alle modernen JavaScript- und TypeScript-Projekte ESLint.

Bewährte Vorgehensweisen für ESLint

• Kombiniere ESLint mit Prettier für automatische Codeformatierung.
• Ergänze ESLint-Prüfungen in deinen Git-Pre-Commit-Hooks mit Husky oder lint-staged.
• Führe es in deiner CI-Pipeline aus, um Codequalität in Pull Requests durchzusetzen.
• Du könntest empfohlene Pakete wie eslint-config-airbnb oder eslint-plugin-react verwenden

Fazit

Linter sind unverzichtbar, um Codebasen sauber, einheitlich und fehlerfrei zu halten, insbesondere in gemeinsamen Projekten. Unter ihnen zeichnet sich ESLint als das flexibelste und leistungsfähigste Werkzeug für JavaScript- und TypeScript-Entwickler aus.

Ob du allein oder in einem großen Team arbeitest, ESLint in deinen Arbeitsablauf aufzunehmen sorgt dafür, dass dein Code langfristig professionell, lesbar und wartbar bleibt.

Möchtest du ESLint im Einsatz sehen? Lies die offizielle Dokumentation oder füge es mit npx eslint --init zu deinem Projekt hinzu.