So richten Sie ESLint und Prettier für eine saubere Codebasis im Jahr 2026 ein

ESLint erkennt Codeprobleme und setzt Regeln durch; Hübscher formatiert Ihren Code automatisch konsistent. Zusammen sorgen sie dafür, dass die Codebasis sauber, konsistent und fehlerfrei bleibt – unverzichtbar für Teams und auch alleine lohnenswert. Dieser Leitfaden richtet sie richtig ein und löst die häufigen Konflikte zwischen ihnen.

Was jedes Tool macht

Die Aufteilung: ESLint kümmert sich um die Codequalität (Logik, potenzielle Fehler), Prettier kümmert sich um die Formatierung (wie es aussieht). Wenn Sie beides verwenden und Prettier die Formatierung besitzt, werden Konflikte vermieden.

Installation

# Install both plus the integration packages
npm install --save-dev eslint prettier
npm install --save-dev eslint-config-prettier
# eslint-config-prettier turns off ESLint rules that conflict with Prettier

ESLint-Konfiguration (Flat Config, 2026)

// eslint.config.js (flat config - the modern standard)
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 2025,
      sourceType: 'module',
    },
    rules: {
      'no-unused-vars': 'warn',
      'no-console': 'warn',
      'prefer-const': 'error',
      'eqeqeq': 'error',   // require === over ==
    },
  },
  prettier,   // MUST be last - disables ESLint rules that conflict with Prettier
];

Hübschere Konfiguration

// .prettierrc.json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "always"
}

# .prettierignore - files Prettier should skip
node_modules
dist
build
*.min.js
coverage

Der Schlüssel: Überlassen Sie Prettier die eigene Formatierung

Der klassische Fehler besteht darin, dass ESLint und Prettier beide versuchen, Code zu formatieren – es kommt zu Konflikten, es streiten sich um Anführungszeichen, Semikolons und Abstände. Die Lösung isteslint-config-prettier, wodurch alle ESLint-Formatierungsregeln deaktiviert werden, sodass Prettier die Formatierung und ESLint die Codequalität übernimmt. Fügen Sie es ZULETZT in Ihrer ESLint-Konfiguration hinzu, damit es widersprüchliche Regeln überschreibt.

package.json-Skripte

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

# Run them
npm run lint          # find problems
npm run lint:fix      # auto-fix fixable problems
npm run format        # format all files with Prettier
npm run format:check  # check formatting without changing (for CI)

Beim Speichern formatieren (VS-Code)

// .vscode/settings.json - commit this so the whole team gets it
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

Dadurch wird eine Datei beim Speichern automatisch mit Prettier formatiert und ESLint-Probleme automatisch behoben. Konsistenter Code ohne manuellen Aufwand.

Durchsetzung bei Commit mit Husky und Lint-Staging

npm install --save-dev husky lint-staged
npx husky init

// package.json - run linting/formatting only on staged files
{
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,css}": "prettier --write"
  }
}

# .husky/pre-commit
npx lint-staged

Jetzt lintet und formatiert jeder Commit automatisch bereitgestellte Dateien – kein unformatierter oder lint-fehlerhafter Code gelangt in das Repo.

TypeScript-Setup

npm install --save-dev typescript-eslint

// eslint.config.js with TypeScript
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
  prettier,   // last
];

Häufig gestellte Fragen

F: Benötige ich sowohl ESLint als auch Prettier?
A: Sie dienen unterschiedlichen Zwecken – ESLint für Codequalität/Fehler, Prettier für die Formatierung. Wenn Sie beides verwenden, erhalten Sie sauberen, konsistenten und Fehler abfangenden Code. Sie können ESLint alleine verwenden, aber die automatische Formatierung von Prettier spart enorm Zeit und macht Formatierungsdebatten überflüssig.

F: Warum gibt es Konflikte zwischen ESLint und Prettier?
A: Beide können Formatierungsregeln (Anführungszeichen, Semikolons, Leerzeichen) erzwingen, sind aber anderer Meinung. Die Lösung isteslint-config-prettier, wodurch die Formatierungsregeln von ESLint deaktiviert werden, sodass Prettier die Formatierung und ESLint die Codequalität besitzt. Fügen Sie es zuletzt in Ihrer ESLint-Konfiguration hinzu.

F: Soll ich Prettier über ESLint (eslint-plugin-prettier) ausführen?
A: Im Allgemeinen nein – die Ausführung von Prettier als ESLint-Regel ist langsamer und fügt rote Kringel zur Formatierung hinzu. Das empfohlene Setup führt sie separat aus: Prettier für die Formatierung (Formatierung beim Speichern), ESLint für die Qualität und eslint-config-prettier zur Vermeidung von Konflikten.

F: Wie setze ich dies in meinem gesamten Team durch?
A: Übertragen Sie die Konfigurationsdateien (eslint.config.js, .prettierrc, .vscode/settings.json) und richten Sie Husky + lint-staged ein, sodass die automatische Formatierung ausgeführt wird. Fügen Sieformat:checkhinzu undlint an CI, sodass unformatierter oder fehlerhafter Code nicht zusammengeführt werden kann. Dadurch wird die Konsistenz unabhängig von den individuellen Editor-Setups gewährleistet.

F: Was ist eine flache Konfiguration und sollte ich sie verwenden?
A: Flat config (eslint.config.js) ist das moderne ESLint-Konfigurationsformat, das das ältere .eslintrc ersetzt. Dies ist die Standardeinstellung und wird im Jahr 2026 empfohlen – sauberer, expliziter und besser für die Komposition. Nutzen Sie es für neue Projekte.

Fazit

ESLint und Prettier sorgen gemeinsam dafür, dass Ihre Codebasis sauber und konsistent ist. Der Aufbau:Installieren Sie beide pluseslint-config-prettier, überlassen Sie Prettier die eigene Formatierung und ESLint die eigene Codequalität, fügen Sie eslint-config-prettier zuletzt hinzu, um Konflikte zu verhindern, aktivieren Sie das Formatieren beim Speichern in VS Code und erzwingen Sie die Festschreibung mit Husky und lint-staged. Die wichtigste Erkenntnis besteht darin, Bedenken zu trennen – hübschere Formate, ESLint erkennt Probleme – und eslint-config-prettier zu verwenden, damit sie nicht miteinander in Konflikt geraten. Nach der Einrichtung ist Ihr Code ohne manuellen Aufwand automatisch konsistent und fusselfrei, wodurch Formatierungsdebatten entfallen und Fehler erkannt werden, bevor sie ausgeliefert werden. Es handelt sich um eine kleine Einrichtungsinvestition, die sich bei jeder Datei, die Sie schreiben, auszahlt.