Beim Schreiben von Code in VS Code ist es leicht, die Formatierung zu vernachlässigen – besonders unter Zeitdruck. Doch sauberer Code erleichtert das Debuggen enorm und hilft, Fehler schnell zu finden. Als erfahrener Softwareentwickler mit Jahren Praxis in VS Code weiß ich: Gute Formatierung spart Stunden.
In diesem praxisnahen Guide zeige ich Ihnen, wie Sie Code in VS Code mühelos formatieren – inklusive Tastenkombinationen für PC und Mac sowie Tipps für automatische Formatierung mit Prettier.
Code formatieren: Integrierte VS-Code-Funktionen
VS Code bietet eingebaute Befehle zur Formatierung, ohne Erweiterungen. Diese Shortcuts sind jederzeit verfügbar und standardkonform.
Für Windows/Linux (PC)
Ganzes Dokument formatieren:
- Öffnen Sie die Datei mit dem zu formatierenden Code.
- Drücken Sie Umschalt + Alt + F.
- Speichern Sie mit Strg + S oder über Menü Datei > Speichern.
Nur Auswahl formatieren:
- Markieren Sie die gewünschten Zeilen.
- Drücken Sie Strg + K.
- Dann Strg + F.
- Speichern Sie mit Strg + S.
Hinweis: Strg + F allein öffnet die Suche – schließen Sie mit Esc.
Zeilen verschieben:
- Positionieren Sie den Cursor am Zeilenanfang.
- Halten Sie Alt gedrückt.
- Pfeil hoch/runter für Verschieben.
- Speichern mit Strg + S.
Einzelnen Einzug ändern:
- Cursor an Zeilenanfang.
- Strg + ] zum Einrücken.
- Strg + [ zum Ausheben.
- Speichern.
Für macOS
Ganzes Dokument formatieren:
- Öffnen Sie die Datei.
- Shift + Option + F.
- Speichern mit Cmd + S.
Nur Auswahl formatieren:
- Markieren Sie den Code.
- Cmd + K.
- Cmd + F.
- Speichern mit Cmd + S.
Hinweis: Cmd + F allein öffnet Suche – mit Esc schließen.
Zeilen verschieben:
- Cursor am Zeilenanfang.
- Option halten.
- Pfeil hoch/runter.
- Speichern.
Einzelnen Einzug ändern:
- Cursor am Zeilenanfang.
- Cmd + ] einrücken.
- Cmd + [ ausheben.
- Speichern.
Automatische Formatierung beim Speichern mit Prettier
VS Code formatiert nicht standardmäßig beim Speichern – hier hilft die Extension Prettier, der Goldstandard für konsistente Formatierung (über 10 Mio. Downloads).
Prettier installieren:
- VS Code öffnen.
- Extensions-Menü (vier Quadrate) oder Strg + Shift + X (PC)/Cmd + Shift + X (Mac).
- "Prettier" suchen.
- "Installieren" klicken.
- Warten auf Abschluss.
Prettier aktivieren:
- Strg + , (PC) oder Cmd + , (Mac) für Einstellungen.
- "Formatter" suchen.
- "Editor: Default Formatter" auf "esbenp.prettier-vscode" setzen.
- "Editor: Format On Save" aktivieren.
- "Prettier" suchen.
- "Prettier: Require Config" aktivieren – schützt fremden Code.
- Optionale Einstellungen anpassen.
Projekt-Konfig erstellen (.prettierrc):
- Projektstammverzeichnis wählen.
- Neue Datei erstellen.
- ".prettierrc" nennen.
- Inhalt: { }
- Fertig – Auto-Format beim Speichern!
Pro-Tipps für organisierten Code
- Einrückungen visualisieren Logikblöcke (z.B. if-else) – essenziell beim Debuggen von Laufzeitfehlern.
- Verwenden Sie beschreibende Namen für Funktionen/Module statt "modul1".
- Kommentieren Sie gezielt: Erklären Sie komplexe Logik oder TODOs.
Fazit: Sauberer Code = Effizienz
Professionelle Formatierung macht Ihren Code lesbar, fehlerresistent und teamfähig. Probieren Sie es aus – der Workflow verbessert sich spürbar!
Haben Sie eigene VS-Code-Tricks? Teilen Sie sie in den Kommentaren.