Linting mit ESLint

ESLint  überprüft Code auf typische Probleme:

• mögliche Fehler (z. B. undefinierte Variablen),
• wartbarkeitsrelevante Muster,
• inkonsistente Schreibweisen.

Gerade bei KI-generiertem Code hilft ein Linter, problematische Stellen früh und reproduzierbar zu erkennen.

Was ist ein Linter?

Ein Linter analysiert Quellcode statisch und meldet typische Fehler, problematische Muster und Wartbarkeitsrisiken. Im Unterschied zu einem Formatter wie Prettier geht es beim Linting nicht primär um Einrückung oder Zeilenumbrüche, sondern um inhaltliche Codequalität.

Linter gibt es für viele Programmiersprachen und Frameworks. Bei uns verwenden wir ESLint für JavaScript und TypeScript (es gibt aber auch Alternativen).

Minimal-Setup (Node.js, modernes ESLint)

Wir setzen bei diesem Setup voraus, dass wir bereits Node.js, Prettier und TypeScript installiert haben und dass der Code in einem src-Ordner liegt.

Schritt 1: Pakete installieren

npm install -D eslint @eslint/js typescript-eslint eslint-config-prettier globals

Dadurch werden die folgenden Pakete installiert:

• eslint: der Linter selbst
• @eslint/js: die offiziellen empfohlenen Regeln
• typescript-eslint: TypeScript-Unterstützung
• eslint-config-prettier: deaktiviert ESLint-Regeln, die mit Prettier kollidieren
• globals: globale Variablen für Node.js

Schritt 2: Konfigurationsdatei für ESLint erstellen

Wir benötigen eine Datei eslint.config.js im Projektordner mit diesem Inhalt:

import js from '@eslint/js';
import globals from 'globals';
import { defineConfig } from 'eslint/config';
import tseslint from 'typescript-eslint';
import prettier from 'eslint-config-prettier';
 
export default defineConfig(
  js.configs.recommended,
  tseslint.configs.recommended,
  {
    languageOptions: {
      globals: globals.node,
    },
  },
  prettier,
);

Schritt 3: npm-Skripte in package.json ergänzen

Hinweis: Der folgende Block ist ein Ausschnitt aus package.json.

Im “scripts”-Block kommt folgendes Skript hinzu:

  "lint": "eslint src/"

Nun können wir ESLint ausführen:

npm run lint

Falls wir keine Fehler haben, dann könnten wir zum Testen z. B. in einer Datei temporär eine Variable erstellen, die nicht verwendet wird.

Editor-Integration (VS Code)

Die offizielle ESLint-Extension für VS Code  markiert Probleme direkt im Editor und zeigt sie zusätzlich in der Problems-Ansicht.

Alternativen zu ESLint

• Biome : sehr schnell, kombiniert Linting und Formatierung in einem Tool.
• Oxlint : sehr schneller JavaScript/TypeScript-Linter aus dem OXC-Ökosystem. Im OXC-Umfeld gibt es zusätzlich einen Formatter: OXC Formatter .

Wir zeigen hier ESLint, weil es seit langer Zeit etabliert und weit verbreitet ist. Dennoch könnten in Zukunft alternative Linter mehr Bedeutung erlangen.

Ein möglicher Vorteil von Biome und OXC ist, dass Linter und Formatter aus einer Hand kommen und dadurch oft konsistenter zusammenspielen.

Zusammenspiel mit Prettier

ESLint und Prettier sollten klar getrennte Aufgaben übernehmen:

• Prettier formatiert den Code
• ESLint prüft Codequalität und potenzielle Fehler

Damit es keine Konflikte bei Formatierungsregeln gibt, haben wir oben eslint-config-prettier installiert und in der Konfiguration importiert.