⚡KI Entwicklung

Code Formatting mit Prettier

Nie wieder ueber Tabs vs Spaces diskutieren

Code Formatting ist das Thema ueber das Entwickler am meisten streiten und am wenigsten produktiv sind. Prettier beendet die Diskussion. Ein Tool, ein Stil, automatisch bei jedem Speichern.

Pro-Tip — Der schnelle Weg
Lass Prettier und ESLint nicht gegeneinander arbeiten. Installiere eslint-config-prettier damit ESLint sich nur um Logik kuemmert und Prettier nur um Formatierung.
Seite 1
1

Prettier installieren und konfigurieren

Installiere Prettier und erstelle eine Konfigurationsdatei. Wenige Optionen reichen: Semikolons, Tab-Breite, Zeilenlaenge. Lass Claude Code dir die Konfiguration fuer dein Projekt generieren.

npm install -D prettier && echo '{
 "semi": true,
 "singleQuote": false,
 "tabWidth": 2,
 "printWidth": 100
}' > .prettierrc
2

Gesamtes Projekt formatieren

Fuehre Prettier einmal ueber dein ganzes Projekt aus. Der erste Run aendert viel, danach nur noch minimale Aenderungen pro Commit. Am besten als eigenen Commit damit die Git-History sauber bleibt.

npx prettier --write .
3

Editor-Integration einrichten

Konfiguriere deinen Editor so dass Prettier bei jedem Speichern automatisch laeuft. In VS Code: Format on Save aktivieren und Prettier als Default Formatter setzen. Du denkst nie wieder ueber Formatierung nach.

// .vscode/settings.json
{
 "editor.formatOnSave": true,
 "editor.defaultFormatter": "esbenp.prettier-vscode"
}
Seite 2
Warum das funktioniert
  • Automatische Formatierung eliminiert sinnlose Code-Review-Kommentare
  • Einheitlicher Stil macht Code lesbarer fuer alle im Team
  • Format on Save spart hunderte manuelle Anpassungen pro Woche
Tipps
  • Erster Formatting-Run als eigenen Commit machen
  • eslint-config-prettier installieren damit sich die Tools nicht beissen
  • Eine .prettierignore Datei fuer Build-Ordner und generierte Dateien
  • Das ganze Team muss dieselbe Prettier-Version nutzen
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen