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 beim Debuggen und beim Versuch, Fehler zu lokalisieren, sehr.
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.
So formatieren Sie Code
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 Abkürzungen sind 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 zuvor „Strg + K“ zu drücken. Schließen Sie in diesem Fall einfach das Klicken auf die Schaltfläche „x“ oder drücken Sie Esc.
Zeilen nach oben oder unten verschieben:
Bewegen Sie den Cursor an den Anfang der Zeile, die Sie verschieben möchten.
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 den 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 + [“ to decrease the indent.
Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.
For Mac
Format the entire document:
Open the file with the code that you wish to format.
Press “⇧ + ⌥ + F.”
Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.
Formatting selected code only:
Highlight the part of the document that you wish to format.
Press “⌘ + K”.
Press “⌘ + F”.
Save your file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.
Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.
Move lines up or down:
Place your cursor at the beginning of the line you want to edit.
Hold down the “⌥” Key.
To move a line up, press the up arrow. To move it down, press the down arrow.
Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.
Change indentation of a single line:
Move your cursor to the beginning of the line in which you want to change the indention.
Press “⌘ + ]“, um den Einzug zu vergrößern.
Drücken Sie „⌘ +[“umdenEinzugzuverringern[“todecreasetheindent
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:
Öffnen Sie VS-Code.
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. Dies geschieht wie folgt:
Öffnen Sie das Einstellungsfenster, indem Sie auf dem PC „Strg +“ oder auf dem Mac „⌘ +“ drücken.
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. Sobald 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. Dies geschieht durch Befolgen dieser Schritte:
Wählen Sie im linken Menü den Stamm Ihres Projekts aus.
Klicken Sie auf die Schaltfläche Neue Datei, um eine Konfigurationsdatei zu erstellen.
Benennen 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 die Einrückung für die Ausführung eines Programms nicht erforderlich ist, kann sie beim Debuggen helfen, indem Code in überschaubare Module unterteilt wird. 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, beschreibende Titel zu verwenden, anstatt sie einfach Modul 1, Modul 2 usw. zu nennen. Dadurch ist es einfacher zu erkennen, welcher Teil des Codes eine bestimmte Funktion erfüllt.
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 enorm.
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 definitiv von Vorteil, wenn Sie wissen, wie Sie Ihre Dateien in VS Code formatieren.
Kennen Sie andere Möglichkeiten, Ihre Dateien in VS Code zu formatieren? Fühlen Sie sich frei, Ihre Gedanken im Kommentarbereich unten zu teilen.
