Frontend Academy · Lektion

Prettier- und ESLint-Einrichtung

Fügen Sie Prettier für automatische Formatierung und ESLint zur Fehlererkennung hinzu, konfigurieren Sie beide Tools und integrieren Sie sie in einen Workflow mit Formatierung beim Speichern.

Prettier- und ESLint-Einrichtung ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum den Code-Stil automatisieren?

Manuelle Diskussionen über die Code-Formatierung kosten Teams viel Zeit. Prettier formatiert Code automatisch nach einem einheitlichen Stil. ESLint findet Fehler und setzt bewährte Vorgehensweisen durch. Zusammen beseitigen die beiden Tools ganze Kategorien von Kommentaren in Code-Reviews.

Prettier installieren

Installieren Sie Prettier als Entwicklungsabhängigkeit, erstellen Sie eine Konfigurationsdatei und fügen Sie package.json ein Formatierungsskript hinzu. Prettier funktioniert ohne Konfiguration – die Standardeinstellungen sind sinnvoll –, Sie können sie jedoch anpassen.

npm install --save-dev prettier

# .prettierrc (optional config)
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

Prettier-Integration in VSCode

Installieren Sie die Erweiterung Prettier - Code Formatter. Legen Sie sie anschließend als Standard-Formatter fest und aktivieren Sie formatOnSave in den Einstellungen. Danach wird Prettier jedes Mal ausgeführt, wenn Sie eine Datei speichern.

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

ESLint installieren

Installieren Sie ESLint und initialisieren Sie es mit npm init @eslint/config. Dieser Assistent hilft Ihnen bei der Auswahl Ihrer Umgebung (Browser/Node), des Modulsystems und der TypeScript-Unterstützung. Er erzeugt eine Datei eslint.config.js.

npm install --save-dev eslint
npx eslint --init

# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.js

Beispiel für eine ESLint-Konfiguration

Eine einfache flache ESLint-Konfiguration für ein Browser-JavaScript-Projekt. Regeln können 'error', 'warn' oder 'off' sein. Erweitern Sie gemeinsame Konfigurationen wie @eslint/js recommended, um eine solide Grundlage zu schaffen.

// eslint.config.js
import js from '@eslint/js';
export default [
  js.configs.recommended,
  {
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
      'eqeqeq': 'error'
    }
  }
];

TypeScript ESLint

Fügen Sie in TypeScript-Projekten typescript-eslint hinzu, um TypeScript-spezifische Probleme zu erkennen: unsichere Verwendung von any, fehlende Rückgabetypen und falsch verwendete Promises.

npm install --save-dev typescript-eslint

// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
  ...tseslint.configs.recommended
);

Prettier und ESLint gemeinsam verwenden

ESLint enthält einige Formatierungsregeln, die mit Prettier in Konflikt stehen. Verwenden Sie eslint-config-prettier, um diese Regeln zu deaktivieren. So übernimmt Prettier die gesamte Formatierung und ESLint kümmert sich ausschließlich um die Codequalität.

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

// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
  js.configs.recommended,
  prettierConfig  // disables ESLint formatting rules
];

.eslintignore und .prettierignore

Geben Sie den Tools an, welche Dateien übersprungen werden sollen. Die Datei .eslintignore verwendet die Syntax von gitignore. In der Regel sollten Sie node_modules, dist und generierte Dateien ignorieren.

# .eslintignore
node_modules
dist
.next
coverage

npm-Skripte für Linting

Fügen Sie package.json Linting- und Formatierungsskripte hinzu, damit CI und Teammitglieder sie einheitlich ausführen können.

{
  "scripts": {
    "lint": "eslint src --ext .js,.ts,.tsx",
    "lint:fix": "eslint src --fix",
    "format": "prettier --write src",
    "format:check": "prettier --check src"
  }
}

lint-staged und husky für Pre-Commit-Hooks

Verwenden Sie husky und lint-staged, um vor jedem Git-Commit automatisch nur bereitgestellte Dateien zu prüfen und zu formatieren. So verhindern Sie, dass unformatierter oder fehlerhafter Code in das Repository gelangt.

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

# package.json:
"lint-staged": {
  "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.{css,json,md}": "prettier --write"
}

EditorConfig für einheitliche Grundeinstellungen

Eine .editorconfig-Datei setzt grundlegende Editoreinstellungen (Einrückungsstil, Zeilenenden) in allen Editoren und IDEs durch – unabhängig von Plugins. Fügen Sie sie zusammen mit Prettier hinzu.

# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

Kurzer Check

Warum sollte eslint-config-prettier zu einer ESLint-Konfiguration hinzugefügt werden, die auch Prettier verwendet?

Zusammenfassung: Prettier und ESLint

Prettier formatiert Code über die VSCode-Erweiterung beim Speichern automatisch. ESLint findet Fehler und Verstöße gegen Stilregeln. Verwenden Sie eslint-config-prettier, um Konflikte zu vermeiden. Fügen Sie lint-staged und husky zur Durchsetzung vor dem Commit hinzu. Einheitliche Tools vermeiden Formatierungsdiskussionen und finden Fehler, bevor sie ausgeliefert werden.

Häufig gestellte Fragen

Ist die Lektion „Prettier- und ESLint-Einrichtung“ kostenlos?

Ja — der vollständige Text von „Prettier- und ESLint-Einrichtung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Prettier- und ESLint-Einrichtung“?

Fügen Sie Prettier für automatische Formatierung und ESLint zur Fehlererkennung hinzu, konfigurieren Sie beide Tools und integrieren Sie sie in einen Workflow mit Formatierung beim Speichern. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Prettier- und ESLint-Einrichtung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Chrome DevTools: Elements, Console, Network
VSCode: Erweiterungen, Emmet, Shortcuts
Prettier- und ESLint-Einrichtung
Browserkompatibilität und caniuse.com

← Zurück zu Frontend Academy