So formatieren Sie Code in Visual Studio-Code automatisch mit Prettier

Wann immer wir an einem Projekt arbeiten, ist es wichtig, einen Standardformatierer für Ihren Code-Editor einzurichten.

Dies verbessert Ihre Produktivität, da keine Zeit mit dem Formatieren des Codes verschwendet wird, wenn die Zeile länger wird und nicht auf den Bildschirm passt.

Außerdem vermeidet die Verwendung eines Formatierers Fehler in Ihrem Code, sodass Sie deutlich sehen können, wo Ihr spezifischer Block beginnt und wo er endet, und hilft, übereinstimmende Klammern im Code zu identifizieren.

In diesem Artikel erfahren Sie, wie Sie den Prettier-Formatierer in Visual Studio Code (VS Code) einrichten.

Also lasst uns anfangen.

Code beim Speichern der Datei automatisch formatieren

Installiere das Prettier Erweiterung für VS Code, die in Javascript, Angular, Vue, React, Typescript und vielen anderen Sprachen geschriebenen Code formatiert.

Installation

  • Klicken Sie in VS Code auf das Erweiterungssymbol
  • Suchen nach prettier
  • Sie sehen die Erweiterung von Prettier
  • Klicken Sie auf die Schaltfläche Installieren
  • Klicken Sie auf die Schaltfläche Neu laden oder starten Sie den VS-Code neu, sobald die Erweiterung installiert ist

hübscher_erweiterung.png

Verwendungszweck

  • Um die Datei beim Speichern automatisch zu formatieren, drücken Sie in Visual Studio Code Control + Shift + P oder Command + Shift + P (Mac) um die Befehlspalette zu öffnen und einzugeben setting und dann auswählen Preferences: Open User Settings Möglichkeit.
  • Suchen nach format on save Einstellung und aktivieren Sie das Kontrollkästchen.

format_on_save.png

Das ist es! Glückwunsch! Sie haben hübscher konfiguriert, um gemäß den Standardeinstellungen zu formatieren.

Öffnen Sie nun einen beliebigen JavaScript-/React-Code. Nehmen wir an, Ihr Code sieht so aus:

all_format1.png

Wenn Sie die Datei mit speichern Ctrl + S oder Command + S (Mac)je hübscher formatiert Ihren Code wie unten gezeigt:

all_format2.png

Wenn der Code beim Speichern der Datei nicht automatisch formatiert wird, liegt dies möglicherweise daran, dass Sie mehrere Formatierer in VS Code installiert haben. Befolgen Sie die folgenden Schritte, damit es funktioniert.

  • Öffnen Sie eine beliebige Datei im VS-Code
  • Drücken Sie Control + Shift + P oder Command + Shift + P (Mac) um die Befehlspalette zu öffnen und einzugeben format document und dann auswählen Format Document Möglichkeit.

format_dokument.png

  • Dann werden Sie aufgefordert, den Standardformatierer auszuwählen
  • Wählen Sie einen schöneren Formatierer aus der Optionsliste
  • Sie sind fertig

Wenn Sie jetzt eine Datei speichern, wird die Datei richtig formatiert angezeigt.

Wenn Sie Code wie diesen haben:

format_router1.png

Beim Speichern wird es dann folgendermaßen formatiert:

format_router3.png

Sie müssen sich also jetzt keine Gedanken mehr über das Hinzufügen oder Entfernen von Leerzeichen oder das Verschieben von Code in die zweite Zeile machen, wenn er nicht in eine Zeile passt. Prettier erledigt diese Arbeit für Sie.

Schreiben Sie jetzt den Code wie Sie möchten und speichern Sie einfach die Datei, um sie zu formatieren.

Dadurch werden Sie produktiver, da Sie Ihre Zeit nicht mit dem Formatieren von Code verschwenden.

Aber manchmal kann es vorkommen, dass Sie nicht möchten, dass die Formatierung von Prettier ausgeführt wird, und Sie Ihre eigene Formatierung für eine bestimmte Datei beibehalten möchten, dann können Sie den folgenden Schritt ausführen:

  • Drücken Sie in Visual Studio Code Control + Shift + P oder Command + Shift + P (Mac) um die Befehlspalette zu öffnen und einzugeben save und wählen Sie dann die aus Save without Formatting Möglichkeit

save_ohne_formatierung.gif

Erweiterte Konfigurationen

Wenn Sie mehr Kontrolle über die Formatierung wünschen, erlaubt Prettier dies auch.

Erstellen Sie eine Datei mit dem Namen .prettierrc (dot prettierrc) im Stammverzeichnis Ihres Projekts und fügen Sie die Konfiguration nach Bedarf hinzu.

Fügen Sie beispielsweise das folgende JSON in der .prettierrc Datei

{ 
 "singleQuote": false, 
 "trailingComma": "none" 
}

Sie können weitere Konfigurationsoptionen finden HIER.

Danke fürs Lesen!

Schauen Sie sich meine kürzlich veröffentlichten an Redux beherrschen Kurs.

In diesem Kurs erstellen Sie 3 Apps zusammen mit der Essensbestell-App und lernen:

  • Basic und Advanced Redux
  • Wie man den komplexen Status von Arrays und Objekten verwaltet
  • So verwenden Sie mehrere Reducer, um einen komplexen Redux-Zustand zu verwalten
  • So debuggen Sie die Redux-Anwendung
  • So verwenden Sie Redux in React mithilfe der React-Redux-Bibliothek, um Ihre App reaktiv zu machen.
  • Wie man die Redux-Thunk-Bibliothek verwendet, um asynchrone API-Aufrufe zu verarbeiten und vieles mehr

und dann endlich bauen wir ein komplettes App zur Essensbestellung von Grund auf neu mit Stripe-Integration zum Akzeptieren von Zahlungen und Bereitstellen für die Produktion.

Möchten Sie mit regelmäßigen Inhalten zu JavaScript, React, Node.js auf dem Laufenden bleiben? Folgen Sie mir auf LinkedIn.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *