Prettier ist ein brillantes Tool, das Ihren Code konsistenter und lesbarer macht. Dies geschieht durch das automatische Hinzufügen eines Styleguides zu Ihrem Projekt. Es lässt sich auch in Ihren Editor integrieren, um Ihre Arbeit zu bereinigen, während Sie sie speichern. Ein Standardformatierungstool in Ihrem Code-Editor ist hilfreich, da es sicherstellt, dass Sie keine Zeit mit der Formatierung Ihrer Arbeit verschwenden. Dadurch haben Sie mehr Zeit, sich auf die wesentlichen Aspekte des Projekts zu konzentrieren und vermeiden, sich mit endlosen Codezeilen zu verzetteln. Prettier trägt auch dazu bei, Fehler in Ihrem Code zu vermeiden, indem es einfacher erkennt, wo Blöcke beginnen und enden.
Wenn Sie darüber nachgedacht haben, Prettier in Visual Studio Code (VS Code) zu verwenden, sind Sie hier genau richtig. Hier erklären wir Ihnen alles, was Sie über das Standardformatierungstool wissen müssen.
Prettier in VS Code installieren
Um Prettier in VS Code verwenden zu können, müssen Sie die Erweiterung mit der unten beschriebenen Methode installieren. Das Formatierungstool ist im VS Code-Marktplatz verfügbar und optimiert nach der Integration automatisch Ihre Projekte. Sie formatieren Code, der in JavaScript, React, Typescript, Vue und anderen Sprachen geschrieben ist. Lasst uns anfangen:
- Öffnen Sie VS Code und tippen Sie auf das Erweiterungssymbol.
- Geben Sie „Prettier“ in die Suchleiste ein und drücken Sie auf das Lupensymbol.
- Wählen Sie die offizielle Prettier-Erweiterung aus der Liste aus.
- Klicken Sie auf die Schaltfläche „Installieren“.
- Sobald Prettier installiert ist, klicken Sie auf die Schaltfläche „Neu laden“, um den Vorgang abzuschließen.
Die Prettier-Erweiterung ist jetzt in VS Code installiert.
Formatieren Sie ein Dokument
Wenn Prettier auf der Plattform installiert ist, können Sie es jetzt zum Formatieren Ihres Codes verwenden. Sie können dies manuell für jedes Dokument tun oder so einstellen, dass der Code beim Speichern formatiert wird. Lassen Sie uns diese beiden Methoden untersuchen.
Formatieren Sie das Dokument manuell in VS Code mit Prettier
- Öffnen Sie die Befehlszentrale, indem Sie „Befehl + Umschalt + P“ drücken, wenn Sie einen Mac verwenden. Unter Windows klicken Sie auf „Strg + Umschalt + P“.
- Suchen Sie in der Suchleiste nach „Format“ und wählen Sie dann „Dokument formatieren“.
- Wählen Sie aus den verfügbaren Optionen Ihr bevorzugtes Format aus und klicken Sie auf „Konfigurieren“.
- Klicken Sie auf „Prettier – Code Formatter“, um den Code zu formatieren.
Ihr Dokument verfügt über die entsprechenden Zeilenumbrüche, einfachen Anführungszeichen und Leerzeichen. Dieser Vorgang funktioniert auch bei Ihren CSS-Dateien.
Formatieren Sie das Dokument automatisch in VS-Code mit Prettier
- Öffnen Sie das VS-Code-Einstellungsmenü, indem Sie auf „Befehl + (Komma)“ tippen, wenn Sie einen Mac verwenden. Klicken Sie auf „Strg + (Komma)“, wenn Sie ein Windows-Benutzer sind.
- Gehen Sie zur Suchleiste und geben Sie „Editor: Beim Speichern formatieren“ ein.
- Stellen Sie sicher, dass ein Häkchen vorhanden ist.
Prettier wird nun automatisch eingerichtet und formatiert Ihren Code, wenn Sie auf „Speichern“ klicken. Dadurch wird sichergestellt, dass nur einfache Anführungszeichen verwendet werden. Auch die Zeilenlänge wird auf eine bestimmte Zeichenanzahl festgelegt. Diese Änderungen gelten für alle Ihre Projekte, was möglicherweise nicht ideal ist, wenn Sie mit einem Team arbeiten. In diesem Fall können Sie den Prettier-Formatschalter installieren, mit dem Sie das Tool nach Bedarf ein- und ausschalten können.
So richten Sie Prettier in VS Code ein
Es gibt mehrere Formatierungsoptionen, die Prettier standardmäßig vornimmt. Sie können die Einstellungen jedoch auch nach Ihren Wünschen konfigurieren. Sie können beispielsweise zwischen einfachen und doppelten Anführungszeichen entscheiden. Sie können auch wählen, ob Sie ein Semikolon einfügen möchten oder nicht. So konfigurieren Sie Prettier-Einstellungen in VS Code.
- Gehen Sie zu den Einstellungen, indem Sie auf „Befehl + (Komma)“ klicken, wenn Sie einen Mac verwenden, oder auf „Strg + (Komma)“ für Windows.
- Suchen Sie nach „Prettier“, um eine Liste der angezeigten Einstellungen anzuzeigen.
- Sie können sie im Editor ändern und dann auf „Speichern“ klicken, wenn Sie fertig sind.
Ihre Prettier-Einstellungen wurden nun nach Ihren Wünschen konfiguriert.
Formatieren Sie ein Dokument in VS-Code mithilfe der Prettier-Befehlszeile
Mit der Befehlszeilenschnittstelle (CLI) von Prettier können Sie Ihr gesamtes Projekt auf einmal formatieren. Mit der folgenden Befehlszeile können Sie es über den VS-Code-Markt installieren.
npm install prettier –global
Aktualisieren Sie dann den aktuellen Code mit dem hier gezeigten Befehl.
hübscher „*/.ts“ –write
Das ist alles. Ihr Projekt wurde jetzt mit der Prettier-CLI formatiert. Es ist wichtig zu beachten, dass die CLI die Verwendung einiger Dateien erschweren kann, so bequem sie auch ist. Beispielsweise kann es schwierig sein, auf Git-Blamme-Dateien zuzugreifen, die Prettier bereits geändert hat.
Mit einem Klick schöner
Mit Prettier können Sie ganz einfach eine einfache und effektive Möglichkeit erstellen, Ihren Code manuell zu formatieren. Sie können Ihre Arbeit auch automatisch optimieren, wenn Sie sie speichern. Dieses zeitsparende Tool lässt sich einfach in VS-Code einrichten und ermöglicht es Ihnen, sich mehr auf das Wesentliche zu konzentrieren.
Haben Sie Prettier in VS Code verwendet? Welche Erfahrungen haben Sie gemacht? Lass es uns unten in den Kommentaren wissen.
