Beim Eingeben von Befehlen in VS Code kann der Versuch, ordentlich zu sein, manchmal das Letzte sein, woran Sie denken. Obwohl die Formatierung für die Ausführung eines Programms nicht erforderlich ist, hilft sie sehr beim Debuggen und beim Versuch, Fehler zu lokalisieren.
In diesem Artikel zeigen wir Ihnen, wie Sie Code in VS Code formatieren, zusammen mit anderen hilfreichen Tipps, um Ihren Code gut organisiert zu halten.
Code formatieren
VS Code verfügt über integrierte Befehle, um aktuell eingegebenen Code im Standardformat anzuordnen. Diese Tastenkombinationen erfordern keine zusätzlichen Erweiterungen und können jederzeit verwendet werden. Die Tastenkombinationen lauten wie folgt:
Für PC
Formatieren Sie das gesamte Dokument:
Öffnen Sie die Datei mit dem Code, den Sie formatieren möchten.
Drücken Sie „Umschalt + Alt + F“.
Speichern Sie die Änderungen, indem Sie oben links auf „Datei“ klicken und dann „Speichern“ wählen oder „Strg + S“ drücken.
Nur ausgewählten Code formatieren:
Wählen Sie in der Datei mit den Codezeilen, die Sie formatieren möchten, die Zeilen aus, indem Sie sie mit der Maus markieren.
Drücken Sie „Strg + K“.
Drücken Sie „Strg + F“.
Speichern Sie die Änderungen entweder durch Auswahl von „Speichern“ im Menü „Datei“ in der oberen linken Ecke oder durch Drücken von „Strg + S“.
Beachten Sie, dass Sie das Suchmenü öffnen, wenn Sie „Strg + F“ drücken, ohne zuerst „Strg + K“ zu drücken. Schließen Sie in diesem Fall einfach die Schaltfläche „x“ oder drücken Sie Esc.
Zeilen nach oben oder unten verschieben:
Bewege deinen Cursor an den Anfang der Zeile, die du verschieben möchtest.
Halten Sie die Alt-Taste gedrückt.
Um die Linie nach oben zu verschieben, drücken Sie den Aufwärtspfeil. Um es nach unten zu verschieben, drücken Sie den Abwärtspfeil.
Speichern Sie Ihre Datei, indem Sie sie aus dem Dateimenü in der oberen linken Ecke des Fensters auswählen oder indem Sie „Strg + S“ drücken.
Einzug einer einzelnen Zeile ändern:
Bewegen Sie Ihren Cursor an den Anfang der Zeile, in der Sie den Einzug ändern möchten.
Drücken Sie „Strg + ]“, um den Einzug zu vergrößern.
Drücken Sie „Strg + [“, um den Einzug zu verringern.
Speichern Sie die Änderungen, indem Sie im Menü „Datei“ auf „Speichern“ klicken oder „Strg + S“ drücken.
Für Mac
Formatieren Sie das gesamte Dokument:
Öffnen Sie die Datei mit dem Code, den Sie formatieren möchten.
Drücken Sie „⇧ + ⌥ + F.“
Speichern Sie Ihre Änderungen, indem Sie oben links auf „Datei“ klicken und dann „Speichern“ auswählen oder „⌘ + S“ drücken.
Nur ausgewählten Code formatieren:
Markieren Sie den Teil des Dokuments, den Sie formatieren möchten.
Drücken Sie „⌘ + K“.
Drücken Sie „⌘ + F“.
Speichern Sie Ihre Datei, indem Sie „⌘ + S“ drücken oder im Menü „Datei“ in der oberen linken Ecke des Fensters „Speichern“ wählen.
Beachten Sie, dass die Verwendung von „⌘ + F“ ohne vorheriges Drücken von „⌘ + K“ nur das Suchmenü öffnet. Um das Find-Menü zu schließen, drücken Sie einfach „x“ auf der rechten Seite oder drücken Sie Esc.
Zeilen nach oben oder unten verschieben:
Platzieren Sie Ihren Cursor am Anfang der Zeile, die Sie bearbeiten möchten.
Halten Sie die Taste „⌥“ gedrückt.
Um eine Zeile nach oben zu verschieben, drücken Sie den Aufwärtspfeil. Um es nach unten zu verschieben, drücken Sie den Abwärtspfeil.
Speichern Sie Ihre Änderungen, indem Sie im Menü „Datei“ auf „Speichern“ klicken oder „⌘ + S“ drücken.
Einzug einer einzelnen Zeile ändern:
Bewegen Sie Ihren Cursor an den Anfang der Zeile, in der Sie den Einzug ändern möchten.
Drücken Sie „⌘ + ]“, um den Einzug zu vergrößern.
Drücken Sie „⌘ + [“, um den Einzug zu verringern.
Speichern Sie die Datei, indem Sie „⌘ + S“ drücken oder im Menü „Datei“ in der oberen linken Ecke des Fensters „Speichern“ wählen.
VS-Code-Formatcode beim Speichern
VS Code hat keinen nativen Befehl, der Ihr Dokument beim Speichern formatiert. Stattdessen kann dies durch Installieren einer Formatierungserweiterung in Ihrer VS Code-Anwendung erfolgen. Die beliebteste dieser Erweiterungen ist Prettier, die VS Code viele Formatierungsfunktionen bietet. Prettier kann wie folgt installiert werden:
VS-Code öffnen.
Klicken Sie auf die Schaltfläche Erweiterungen im linken Menü. Dies ist das Symbol, das wie vier Kästchen aussieht. Alternativ können Sie „Strg + Shit + x“ für PC oder „⌘ + ⇧ + x“ auf Mac drücken.
Geben Sie in der Suchleiste oben im Menü Prettier ein.
Klicken Sie auf die Schaltfläche Installieren in der unteren rechten Ecke des Prettier-Symbols.
Warten Sie, bis die Erweiterung die Installation abgeschlossen hat.
Bevor Prettier damit beginnen kann, Ihr Dokument beim Speichern automatisch zu formatieren, müssen Sie die Erweiterung einrichten, um die Funktion zu aktivieren. Gehen Sie dazu wie folgt vor:
Öffnen Sie das Einstellungsfenster durch Drücken von „Strg +“ auf dem PC oder „⌘ +“ auf dem Mac.
Geben Sie in der Suchleiste Formatierer ein. Dies sollte mehrere Formatierungseinstellungen anzeigen.
Stellen Sie in der Einstellung Editor:Default Formatter sicher, dass die ausgewählte Erweiterung Prettier ist. Wenn kein Standardformatierer vorhanden ist oder VS Code standardmäßig einen anderen Formatierer verwendet, drücken Sie auf den Dropdown-Pfeil. Wählen Sie „Hübscher – Codeformatierer“ aus der Liste aus. Alternativ kann Prettier in der Liste als „esbenp.prettier-vscode“ erscheinen.
Stellen Sie sicher, dass die Option „Editor:Beim Speichern formatieren“ aktiviert ist. Wenn nicht, schalten Sie das Häkchen um.
Geben Sie „Hübscher“ in die Suchleiste der Einstellungen ein.
Scrollen Sie nach unten, bis Sie die Zeile „Prettier:Require Config“ finden. Stellen Sie sicher, dass das Kontrollkästchen aktiviert ist. Diese Einstellung verhindert, dass Prettier Dokumente ohne eine Konfigurationsdatei formatiert. Dies ist praktisch, wenn Sie sich heruntergeladenen Code ansehen, der möglicherweise seine eigenen Formatierungsregeln hat. Dadurch wird verhindert, dass Formatierungsoptionen versehentlich überschrieben werden. Beachten Sie, dass unbenannte Dateien auch dann automatisch formatiert werden, wenn diese Einstellung aktiviert ist.
Sie können bestimmte Prettier-Einstellungen je nach Ihren Vorlieben bearbeiten. Wenn Sie fertig sind, können Sie dieses Menü verlassen.
Da Sie Prettier so konfiguriert haben, dass es nur dann automatisch formatiert, wenn eine Konfigurationsdatei vorhanden ist, müssen Sie für jedes Projekt eine erstellen. Gehen Sie dazu wie folgt vor:
Wählen Sie das Stammverzeichnis Ihres Projekts im linken Menü aus.
Klicken Sie auf die Schaltfläche Neue Datei, um eine Konfigurationsdatei zu erstellen.
Nennen Sie diese Datei „.prettierrc.“
Geben Sie in der Datei einfach {} ein.
Prettier formatiert Ihr Dokument jetzt automatisch, wenn Sie es speichern.
Tipps zum Organisieren von Code
Obwohl Einrückungen für die Ausführung eines Programms nicht erforderlich sind, können sie beim Debuggen helfen, indem sie den Code in überschaubare Module unterteilen. Davon können beispielsweise Wenn-Dann-Anweisungen oder verschachtelte Fälle profitieren, indem jede alternative Option visuell voneinander unterscheidbar gemacht wird. Dies ist praktisch, wenn Sie es mit Logikfehlern anstelle von Syntaxfehlern zu tun haben.
Wenn Sie Module oder kurze Codezeilen benennen, machen Sie es sich zur Gewohnheit, aussagekräftige Titel zu verwenden, anstatt sie einfach Modul 1, Modul 2 usw. zu nennen Code hat eine bestimmte Funktion.
Es ist immer eine gute Idee, Kommentare zu Ihrem Vorteil zu nutzen. Egal, ob Sie eine kurze Beschreibung oder nur eine Notiz für sich selbst hinzufügen, Kommentare helfen beim Debuggen ungemein.
Organisationskodex
Das richtige Formatieren Ihrer Projekte erleichtert nicht nur das Lesen, sondern hilft auch beim Identifizieren von Fehlern und hält Ihren Code organisiert. Obwohl es für die Ausführung eines Programms nicht erforderlich ist, ist es ein klarer Vorteil, zu wissen, wie man seine Dateien in VS Code formatiert.
Kennen Sie andere Möglichkeiten, Ihre Dateien in VS Code zu formatieren? Fühlen Sie sich frei, Ihre Gedanken im Kommentarbereich unten mitzuteilen.