ESLintrc-Generator

Was die generierte Konfiguration enthält

Der Generator startet immer mit eslint:recommended und fügt genau das hinzu, was Ihre Auswahl bedeutet:

• env mit browser und/oder node, plus es2022
• @typescript-eslint/parser und plugin:@typescript-eslint/recommended, wenn TypeScript aktiv ist
• plugin:react/recommended, wenn React aktiv ist
• no-console und no-unused-vars auf warn gesetzt

Die Ausgabe ist ein einfaches JSON-Objekt im klassischen .eslintrc.json-Format, bereit zum Einfügen und Erweitern mit eigenen Regeln.

Flache Konfiguration vs. Legacy

ESLint 9 hat das Format .eslintrc.* zugunsten der flachen Konfiguration (eslint.config.js) abgeschafft. Wichtige Unterschiede:

Neue Projekte sollten die flache Konfiguration verwenden. Bestehende Projekte können bis zur 10.x-Version bei Legacy bleiben, aber eine Migration wird empfohlen.

Plugin-Ökosystem

Typische React/TS-Projekt-Plugins:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

Das sind sechs Pakete für ein moderat meinungsstarkes Setup. Der Generator fügt die von Ihnen ausgewählten hinzu, sodass Sie nur installieren, was die Konfiguration referenziert.

Prettier-Koexistenz

Prettier kümmert sich um das Formatieren; ESLint kümmert sich um Korrektheit und Stil über das Formatieren hinaus. Um Konflikte zu vermeiden:

1. Installieren Sie eslint-config-prettier und fügen Sie es als LETZTES Element in Ihrem extends/config hinzu.
2. Es schaltet jede ESLint-Regel aus, die mit Prettiers Ausgabe in Konflikt steht.
3. Führen Sie Prettier separat aus (beim Speichern im Editor, im Pre-Commit-Hook, in CI).

Verwenden Sie eslint-plugin-prettier nicht in neuen Projekten; es verlangsamt ESLint, indem es Prettier innerhalb von ESLint ausführt. Trennen Sie die beiden Tools.

Tipps zur Regelanpassung

• Locker anfangen, strenger werden. Warnungen aktivieren, bevor Fehler aktiviert werden.
• Für Tests überschreiben. Testdateien benötigen oft eine entspanntere no-unused-expressions-Regel und Jest-Globals.
• Für Skripte überschreiben. Build-Skripte benötigen möglicherweise Node-Globals, ohne env: node global hinzuzufügen.
• Überschreibungen dokumentieren. Jede Regelüberschreibung verdient einen Kommentar, der erklärt, warum.

Konfiguration, die zu Ihrem Editor passt

VS Code benötigt die installierte und konfigurierte ESLint-Erweiterung. Fügen Sie diese zu Ihren Workspace-Einstellungen für die automatische Korrektur beim Speichern hinzu:

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}