Lektion 20: prettier - Opinionated Code Formatter
Tool-Lektion | 35 Minuten
Ohne automatische Formatierung schreibt jeder Entwickler im Team Code in seinem eigenen Stil. Der eine nutzt Semikolons, der andere nicht. Tabs und Spaces werden wild gemischt, und Zeilenumbrueche fol
Lernziele
- Metadata
- Verstehen warum dieses Tool wichtig ist
- Die wichtigsten Einsatzgebiete kennen
- Installation und grundlegende Nutzung beherrschen
- Production-ready Patterns anwenden
Lektion 20: prettier - Opinionated Code Formatter
Metadata
- Kategorie: Fortgeschrittene Tools
- Schwierigkeit: Mittel
- Voraussetzungen: Lektion 01-04 (Grundlagen), Node.js/npm Kenntnisse
- Lernzeit: 45-60 Minuten
- Zielgruppe: Entwickler, die konsistenten Code-Stil durchsetzen möchten
🚀 Claude Code Relevanz: Prettier formatiert von Claude Code generierten Code automatisch in einen einheitlichen Stil, sodass AI-generierter und manuell geschriebener Code nahtlos zusammenpassen.
Berechtigung: Warum prettier?
Problem ohne prettier:
Ohne automatische Formatierung schreibt jeder Entwickler im Team Code in seinem eigenen Stil. Der eine nutzt Semikolons, der andere nicht. Tabs und Spaces werden wild gemischt, und Zeilenumbrueche folgen keinem einheitlichen Muster. Das fuehrt zu unnoetig grossen Git-Diffs, endlosen Code-Review-Diskussionen ueber Stil statt Logik, und schwer lesbarem Code. Stell dir vor, du oeffnest eine Datei und findest einzeilige Objekte mit 200 Zeichen Laenge, uneinheitliche Anfuehrungszeichen und fehlende Trailing Commas -- das folgende Beispiel zeigt genau solchen inkonsistenten Code.
// Inkonsistenter Code im Team
const user={name:"John",age:30,email:"john@example.com"}
function getData( ){
return fetch('/api/data')
.then(response=>response.json()).then(data=>{
return data
})
}
const arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]Lösung mit prettier:
Prettier formatiert den Code automatisch in einen einheitlichen, gut lesbaren Stil. Objekte werden ueber mehrere Zeilen aufgeteilt, Funktionen erhalten konsistente Einrueckung, und lange Arrays werden sinnvoll umgebrochen. Das Ergebnis ist sofort lesbar, und Git-Diffs zeigen nur tatsaechliche Logik-Aenderungen statt Formatierungs-Unterschiede. Stell dir vor, der gleiche Code von oben wird mit einem einzigen prettier --write-Befehl in dieses saubere Format gebracht -- ohne manuellen Aufwand.
// Automatisch formatierter, einheitlicher Code
const user = {
name: "John",
age: 30,
email: "john@example.com",
};
function getData() {
return fetch("/api/data")
.then((response) => response.json())
.then((data) => {
return data;
});
}
const arr = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
];Kernvorteile:
✅ Zero-Configuration Funktioniert out-of-the-box ohne Setup
✅ Opinionated Keine endlosen Style-Diskussionen im Team
✅ Multi-Language JS, TS, CSS, HTML, JSON, Markdown, YAML uvm.
✅ Editor-Integration Plugins für alle gängigen Editoren
✅ CI/CD-Ready Automatische Formatierung in Pipelines
✅ Git-Friendly Reduziert Merge-Konflikte durch konsistenten Stil
Zwecke: Wofür wird prettier verwendet?
. **Team-Code-Konsistenz**
- Einheitlicher Code-Stil ohne manuelle Reviews
- Eliminiert "Tabs vs. Spaces"-Diskussionen
- Automatische Formatierung bei jedem Save
. **Produktivitätssteigerung**
- Keine Zeit für manuelle Formatierung
- Konzentration auf Logik statt Stil
- Schnelleres Code-Review
. **Multi-Projekt-Standards**
- Gleicher Stil über alle Projekte hinweg
- Shared Config über npm-Package
- Firmenweite Style-Guides
. **Legacy-Code-Refactoring**
- Alte Codebases schnell formatieren
- Vor großen Refactorings aufräumen
- Migration zu neuem Style-Guide
. **Automatisierung**
- Pre-commit Hooks mit husky + lint-staged
- CI/CD-Integration
- Editor-on-save Formatierung
Verwendung
Dieser Abschnitt zeigt dir Installation, Grundbefehle und fortgeschrittene Konfiguration von prettier.
Installation
Prettier wird ueber npm installiert. Die projektlokale Installation ist empfohlen, damit alle Teammitglieder dieselbe Version verwenden.
macOS (mit Homebrew):
# Global installieren (nicht empfohlen für Projekte)
npm install -g prettier
# Oder pro Projekt (empfohlen)
npm install --save-dev prettier
# Alternativ mit pnpm
pnpm add -D prettier
# Oder mit yarn
yarn add --dev prettierUbuntu/Debian:
Stelle zuerst sicher, dass Node.js installiert ist, und installiere dann prettier ueber npm:
# Node.js/npm installieren (falls nicht vorhanden)
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
# prettier installieren
npm install --save-dev prettierArch Linux:
Auf Arch Linux kannst du prettier entweder ueber npm als Projektabhaengigkeit installieren oder global ueber das AUR. Die npm-Variante ist bevorzugt, da sie versioniert und reproduzierbar ist.
# Via npm (empfohlen)
npm install --save-dev prettier
# Oder aus AUR
yay -S prettierStandalone Binary (ohne Node.js):
Falls du kein Node.js installiert hast, kannst du prettier auch als Standalone-Binary verwenden oder per npx ohne Installation ausfuehren:
# Download für macOS/Linux
curl -o prettier https://unpkg.com/prettier@latest/bin-prettier.js
chmod +x prettier
sudo mv prettier /usr/local/bin/
# Oder via npx (kein Install nötig)
npx prettier --versionQuick Start: Erste Schritte
In wenigen Schritten richtest du prettier ein und formatierst deinen ersten Code.
. **Einzelne Datei formatieren**
Der Grundbefehl gibt formatierten Code auf stdout aus. Mit --write wird die Datei direkt ueberschrieben:
# Datei formatieren und Ausgabe anzeigen
prettier script.js
# Datei direkt überschreiben
prettier --write script.js
# Mehrere Dateien
prettier --write src/index.js src/utils.js💡 Tipp: Installiere prettier immer als devDependency (npm install --save-dev prettier) und nie global -- so stellst du sicher, dass alle im Team exakt dieselbe Version verwenden.
. **Ganzes Projekt formatieren**
Wenn du ein ganzes Projekt auf einmal formatieren willst, nutzt du Glob-Patterns, um alle relevanten Dateien zu erfassen. Das ist besonders nuetzlich bei der erstmaligen Einfuehrung von prettier in einem bestehenden Projekt oder nach groesseren Refactorings. Mit dem --ignore-path-Flag stellst du sicher, dass .gitignore-Eintraege respektiert werden und Dateien wie node_modules oder Build-Artefakte nicht formatiert werden. Stell dir vor, du hast gerade prettier in ein Projekt mit 500 Dateien eingefuehrt -- mit einem einzigen Befehl bringst du alle auf den gleichen Stand. Das Ergebnis ist ein einzelner Commit, der das gesamte Projekt einheitlich formatiert.
# Alle JS-Dateien
prettier --write "**/*.js"
# Mehrere Dateitypen
prettier --write "**/*.{js,jsx,ts,tsx,json,css,md}"
# Mit Ignore-Pattern
prettier --write "src/**/*.js" --ignore-path .gitignore. **Check-Modus (ohne zu schreiben)**
Im Check-Modus prueft prettier, ob Dateien korrekt formatiert sind, ohne sie zu aendern -- ideal fuer CI/CD-Pipelines:
# Prüfen, ob Dateien formatiert sind
prettier --check "src/**/*.js"
# In CI/CD verwenden
prettier --check . || exit 1. **Config erstellen (.prettierrc)**
Mit einer Konfigurationsdatei im Projektstamm definierst du einheitliche Formatierungsregeln fuer das gesamte Team:
# Minimal Config
cat > .prettierrc.json << 'EOF'
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
EOF. **Ignore-File erstellen**
Die .prettierignore-Datei definiert, welche Dateien und Verzeichnisse von der Formatierung ausgeschlossen werden sollen:
cat > .prettierignore << 'EOF'
# Dependencies
node_modules
package-lock.json
yarn.lock
# Build outputs
dist
build
.next
out
# Cache
.cache
.parcel-cache
# Logs
*.log
EOFAdvanced Usage
Fortgeschrittene Prettier-Techniken fuer automatisierte Workflows, IDE-Integration und programmatische Nutzung.
. **Pre-commit Hook mit husky + lint-staged**
Pre-commit Hooks stellen sicher, dass nur korrekt formatierter Code committet wird. Die Kombination aus husky und lint-staged formatiert nur die gestaged Dateien:
# Setup
npm install --save-dev husky lint-staged
npx husky init
# package.json konfigurieren
cat > package.json << 'EOF'
{
"scripts": {
"prepare": "husky"
},
"lint-staged": {
"*.{js,jsx,ts,tsx,json,css,md}": [
"prettier --write",
"git add"
]
}
}
EOF
# Husky Hook erstellen
cat > .husky/pre-commit << 'EOF'
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
EOF
chmod +x .husky/pre-commit. **VSCode Integration**
Mit der VSCode-Extension wird Code automatisch beim Speichern formatiert:
// .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}. **Erweiterte .prettierrc.json Config**
Eine ausfuehrliche Konfiguration mit allen wichtigen Optionen. Jede Option steuert einen spezifischen Aspekt der Formatierung:
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "always",
"proseWrap": "preserve",
"htmlWhitespaceSensitivity": "css",
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto"
}🚀 Beispiel: Mit prettier --write --cache . (ab v3) werden nur geaenderte Dateien formatiert, was die Ausfuehrungszeit in grossen Projekten drastisch reduziert.
. **Per-Language Overrides**
Mit Overrides kannst du fuer verschiedene Dateitypen unterschiedliche Formatierungsregeln definieren:
{
"semi": true,
"singleQuote": true,
"overrides": [
{
"files": "*.json",
"options": {
"tabWidth": 4
}
},
{
"files": "*.md",
"options": {
"proseWrap": "always",
"printWidth": 80
}
},
{
"files": "*.css",
"options": {
"singleQuote": false
}
}
]
}. **API Usage (Programmatic)**
Die Prettier API ermoeglicht es, Formatierung programmatisch in deine eigenen Node.js-Scripts oder Build-Tools zu integrieren. Statt prettier ueber die Kommandozeile aufzurufen, kannst du es als JavaScript-Modul importieren und die format()-Funktion direkt nutzen. resolveConfig() liest dabei automatisch die naechstgelegene .prettierrc-Datei und wendet deren Optionen an. Stell dir vor, du baust ein Custom-Build-Tool, das Code generiert und ihn vor dem Schreiben formatieren soll -- mit der API integrierst du Prettier nahtlos in diesen Workflow. Das Ergebnis ist ein formatierter String, den du in die Datei schreiben oder weiterverarbeiten kannst.
// format.js
const prettier = require('prettier');
const fs = require('fs');
async function formatFile(filePath) {
const content = fs.readFileSync(filePath, 'utf8');
const options = await prettier.resolveConfig(filePath);
const formatted = await prettier.format(content, {
...options,
filepath: filePath,
});
fs.writeFileSync(filePath, formatted);
console.log(Formatted: ${filePath});
}
formatFile('./src/index.js');. **Custom Plugin fuer neue Sprachen**
Prettier unterstuetzt ueber Plugins zusaetzliche Sprachen und Frameworks, die nicht im Kern enthalten sind. Die Plugins fuer Svelte und Tailwind CSS sind besonders beliebt, da sie die Formatierung von Svelte-Komponenten und die Sortierung von Tailwind-Klassen automatisieren. In der .prettierrc.js-Datei registrierst du die Plugins und definierst ueber Overrides, welcher Parser fuer welche Dateiendungen verwendet werden soll. Stell dir vor, du arbeitest an einem SvelteKit-Projekt mit Tailwind CSS -- ohne diese Plugins wuerde Prettier die .svelte-Dateien ignorieren und die Tailwind-Klassen nicht sortieren. Nach der Installation und Konfiguration formatiert Prettier auch diese Dateien automatisch bei jedem Save.
// .prettierrc.js
module.exports = {
plugins: [
'prettier-plugin-svelte',
'prettier-plugin-tailwindcss',
],
pluginSearchDirs: false,
overrides: [
{
files: '*.svelte',
options: { parser: 'svelte' },
},
],
};Best Practices
Bewaeaehrte Vorgehensweisen fuer den professionellen Einsatz von Prettier in Teams und CI/CD-Pipelines.
. **Projekt-Setup**
Eine .editorconfig-Datei stellt sicher, dass grundlegende Formatierungsregeln auch in Editoren ohne Prettier-Plugin eingehalten werden:
# .editorconfig für Basis-Settings
cat > .editorconfig << 'EOF'
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.{js,jsx,ts,tsx,json}]
indent_style = space
indent_size = 2
[*.md]
trim_trailing_whitespace = false
EOF. **Team-Onboarding**
Eine gute Dokumentation der Code-Style-Konfiguration erleichtert neuen Teammitgliedern den Einstieg erheblich. Dieser Abschnitt in der README erklaert, wie man prettier einrichtet, welche npm-Scripts verfuegbar sind und wie die Editor-Integration funktioniert. Stell dir vor, ein neuer Entwickler startet im Team -- er liest die README, fuehrt npm install aus, installiert die VSCode-Extension und ist sofort produktiv, ohne ueber Formatierungsfragen nachdenken zu muessen. Pre-commit Hooks stellen sicher, dass auch versehentlich unformatierter Code automatisch korrigiert wird.
# README.md Documentation
cat >> README.md << 'EOF'
## Code Style
This project uses Prettier for code formatting.
### Setupnpm install npm run format # Format all files npm run format:check # Check formatting
### Editor Setup
- VSCode: Install "Prettier - Code formatter" extension
- WebStorm: Enable Prettier in Settings → Languages → Prettier
- Vim: Use :Prettier command (with plugin)
Pre-commit hooks will auto-format staged files.
EOF⚠️ Warnung: Pinne die Prettier-Version in deiner package.json exakt (z.B."prettier": "3.2.4"statt"^3.2.4"), um unterschiedliche Formatierung zwischen lokaler Entwicklung und CI zu vermeiden.
. **CI/CD Integration**
Ein GitHub Actions Workflow prueft bei jedem Push und Pull Request automatisch, ob alle Dateien korrekt formatiert sind. Der Workflow installiert Node.js mit npm-Cache fuer schnellere Ausfuehrung, fuehrt npm ci fuer eine saubere Installation aus und ruft dann den Format-Check auf. Stell dir vor, ein Teammitglied hat vergessen, prettier vor dem Push auszufuehren -- der CI-Check blockiert den Merge und zeigt an, welche Dateien noch formatiert werden muessen. So stellst du sicher, dass im Hauptbranch nur korrekt formatierter Code landet.
# .github/workflows/prettier.yml
name: Code Style Check
on: [push, pull_request]
jobs:
prettier:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Check formatting
run: npm run format:check. **Schrittweise Migration (Legacy-Projekte)**
Bei grossen bestehenden Projekten empfiehlt sich ein schrittweises Vorgehen, um die Git-Historie nicht mit einem riesigen Formatting-Commit zu ueberladen:
# Phase 1: Nur neue Dateien formatieren
prettier --write $(git diff --name-only --diff-filter=A HEAD | grep -E '\.(js|ts)