Beim Programmieren in VS Code kann es schnell passieren, dass die Formatierung des Codes in den Hintergrund tritt. Obwohl eine korrekte Formatierung nicht zwingend für die Ausführung des Programms erforderlich ist, spielt sie eine entscheidende Rolle bei der Fehlersuche und dem Auffinden von Problemen im Code.
Dieser Artikel zeigt Ihnen, wie Sie Ihren Code in VS Code optimal formatieren und gibt Ihnen wertvolle Tipps, um Ihre Programmierung sauber und organisiert zu halten.
Code formatieren
VS Code bietet eine Reihe integrierter Funktionen zur Formatierung des Codes, den Sie gerade schreiben. Diese Tastenkombinationen erfordern keine zusätzlichen Erweiterungen und können jederzeit genutzt werden. Hier sind die wichtigsten Kürzel:
Für Windows
Gesamtes Dokument formatieren:
Öffnen Sie die Datei mit dem Code, den Sie bearbeiten möchten.
Drücken Sie die Tastenkombination „Umschalt + Alt + F“.
Speichern Sie die vorgenommenen Änderungen. Klicken Sie dazu oben links auf „Datei“ und wählen Sie „Speichern“ oder drücken Sie die Tastenkombination „Strg + S“.
Ausgewählten Code formatieren:
Markieren Sie die gewünschten Zeilen in der Datei, die Sie formatieren möchten.
Drücken Sie die Tastenkombination „Strg + K“.
Drücken Sie die Tastenkombination „Strg + F“.
Speichern Sie Ihre Änderungen entweder über das „Datei“-Menü oder mit „Strg + S“.
Hinweis: Wenn Sie „Strg + F“ drücken, ohne vorher „Strg + K“ zu betätigen, wird das Suchfenster geöffnet. Sie können dieses Fenster einfach mit der „x“-Schaltfläche oder mit der Esc-Taste schließen.
Zeilen nach oben oder unten verschieben:
Positionieren Sie den Cursor an den Anfang der Zeile, die Sie verschieben möchten.
Halten Sie die Alt-Taste gedrückt.
Um die Zeile nach oben zu verschieben, drücken Sie die Pfeiltaste nach oben; um sie nach unten zu verschieben, nutzen Sie die Pfeiltaste nach unten.
Speichern Sie Ihre Datei über das Dateimenü oder mit „Strg + S“.
Einzug einer einzelnen Zeile ändern:
Setzen Sie den Cursor an den Beginn der Zeile, deren Einzug Sie ändern möchten.
Drücken Sie die Tastenkombination „Strg + ]“, um den Einzug zu vergrößern.
Drücken Sie die Tastenkombination „Strg + [“, um den Einzug zu verkleinern.
Sichern Sie die Änderungen mit „Speichern“ im Dateimenü oder durch Drücken von „Strg + S“.
Für Mac
Gesamtes Dokument formatieren:
Öffnen Sie die Datei mit dem Code, den Sie formatieren möchten.
Drücken Sie „⇧ + ⌥ + F“.
Speichern Sie Ihre Änderungen über „Datei“ -> „Speichern“ oder durch Drücken von „⌘ + S“.
Ausgewählten Code formatieren:
Markieren Sie den Codebereich, den Sie formatieren möchten.
Drücken Sie „⌘ + K“.
Drücken Sie „⌘ + F“.
Speichern Sie die Datei mit „⌘ + S“ oder über „Datei“ -> „Speichern“.
Hinweis: Wenn Sie „⌘ + F“ ohne vorheriges Drücken von „⌘ + K“ verwenden, wird nur das Suchmenü geöffnet. Sie können das Suchmenü mit der „x“-Schaltfläche oder über die Esc-Taste schließen.
Zeilen nach oben oder unten verschieben:
Platzieren Sie den Cursor am Anfang der Zeile, die Sie verschieben möchten.
Halten Sie die Taste „⌥“ gedrückt.
Um eine Zeile nach oben zu verschieben, drücken Sie die Pfeiltaste nach oben, zum Verschieben nach unten die Pfeiltaste nach unten.
Sichern Sie die Änderungen durch „Datei“ -> „Speichern“ oder mit „⌘ + S“.
Einzug einer einzelnen Zeile ändern:
Positionieren Sie den Cursor am Anfang der Zeile, deren Einzug Sie ändern möchten.
Verwenden Sie „⌘ + ]“, um den Einzug zu vergrößern.
Nutzen Sie „⌘ + [“ zum Verkleinern des Einzugs.
Speichern Sie die Datei über „⌘ + S“ oder über „Datei“ -> „Speichern“.
VS Code: Code beim Speichern formatieren
VS Code bietet keine Funktion zum automatischen Formatieren beim Speichern. Diese Funktion können Sie jedoch durch eine Formatierungserweiterung realisieren. Die beliebteste dieser Erweiterungen ist Prettier, die VS Code um zahlreiche Formatierungsfunktionen erweitert. Die Installation von Prettier funktioniert wie folgt:
Öffnen Sie VS Code.
Klicken Sie auf das Erweiterungssymbol im linken Menü (vier kleine Kästchen). Alternativ können Sie auch „Strg + Shift + x“ auf Windows oder „⌘ + ⇧ + x“ auf dem Mac drücken.
Geben Sie in der Suchleiste „Prettier“ ein.
Klicken Sie auf „Installieren“ unterhalb des Prettier-Symbols.
Warten Sie, bis die Erweiterung installiert ist.
Um die automatische Formatierung beim Speichern zu aktivieren, müssen Sie Prettier konfigurieren:
Öffnen Sie das Einstellungsfenster mit der Tastenkombination „Strg + ,“ auf Windows oder „⌘ + ,“ auf dem Mac.
Suchen Sie nach „Formatierer“. Es werden Ihnen verschiedene Formatierungseinstellungen angezeigt.
Stellen Sie sicher, dass unter „Editor: Standardformatierer“ die Erweiterung Prettier ausgewählt ist. Sollte kein Standardformatierer vorhanden sein oder ein anderer als Standard ausgewählt sein, wählen Sie „Prettier – Code formatter“ aus der Liste. Prettier kann in der Liste auch als „esbenp.prettier-vscode“ angezeigt werden.
Aktivieren Sie die Option „Editor: Beim Speichern formatieren“.
Suchen Sie in den Einstellungen nach „Prettier“.
Scrollen Sie nach unten zur Zeile „Prettier: Require Config“. Stellen Sie sicher, dass dieses Kontrollkästchen aktiviert ist. Diese Einstellung verhindert, dass Prettier Dateien ohne Konfigurationsdatei formatiert. Das ist besonders nützlich, wenn Sie fremden Code haben, der seine eigenen Formatierungsregeln haben könnte. So wird verhindert, dass Formatierungsoptionen unbeabsichtigt überschrieben werden. Beachten Sie, dass unbenannte Dateien auch mit dieser Option automatisch formatiert werden.
Sie können bestimmte Prettier-Einstellungen nach Belieben bearbeiten. Danach können Sie das Menü verlassen.
Nachdem Sie Prettier so konfiguriert haben, dass es nur mit einer Konfigurationsdatei automatisch formatiert, müssen Sie eine für jedes Projekt erstellen. Gehen Sie dazu wie folgt vor:
Wählen Sie im linken Menü das Stammverzeichnis Ihres Projekts aus.
Klicken Sie auf die Schaltfläche „Neue Datei“, um eine neue Datei zu erstellen.
Nennen Sie die Datei „.prettierrc“.
Geben Sie in der Datei einfach `{}` ein.
Prettier formatiert Ihr Dokument nun automatisch, sobald Sie es speichern.
Tipps zum Strukturieren des Codes
Obwohl Einrückungen für die Ausführung eines Programms nicht notwendig sind, helfen sie beim Debuggen und gliedern den Code in übersichtliche Module. Dies ist besonders hilfreich bei Wenn-Dann-Anweisungen oder verschachtelten Fällen, wo jede Option klar voneinander getrennt wird. Das ist sehr nützlich bei Logikfehlern und nicht nur bei Syntaxfehlern.
Gewöhnen Sie sich an, Module und Codeabschnitte mit beschreibenden Namen zu versehen und nicht nur Modul 1, Modul 2 etc. Dies hilft, zu erkennen, welcher Teil des Codes welche Funktion erfüllt.
Nutzen Sie Kommentare. Egal, ob Sie eine kurze Beschreibung hinzufügen oder sich nur selbst eine Notiz machen, Kommentare sind eine große Hilfe beim Debuggen.
Fazit
Eine gute Formatierung Ihrer Projekte erleichtert das Lesen des Codes, unterstützt bei der Fehlersuche und hält Ihren Code organisiert. Auch wenn es für die Ausführung eines Programms nicht notwendig ist, ist es dennoch wichtig zu wissen, wie man Dateien in VS Code formatiert.
Kennen Sie noch andere Möglichkeiten, Ihre Dateien in VS Code zu formatieren? Teilen Sie uns Ihre Gedanken gern im Kommentarbereich mit.