Prettier - es ist ein Tool, das Ihnen hilft, Code automatisch zu formatieren, wodurch er lesbarer und benutzerfreundlicher für die Teamarbeit wird. VS Code bietet ein praktisches Plugin für die Verwendung von Prettier in TypeScript-Projekten. In diesem Leitfaden zeigen wir Ihnen, wie Sie Prettier in VS Code für TypeScript-Projekte einrichten, damit Sie die perfekte Formatierung Ihres Codes genießen können.
Installieren Sie zuerst Prettier plugin aus dem VS-Code-Marktplatz. Suchen Sie nach dem Namen "Prettier - Code formatter" und installieren Sie ihn. Dieses Plugin ermöglicht es uns, Prettier direkt in VS Code zu verwenden, ohne einen separaten Befehl ausführen zu müssen.
Nach erfolgreicher Installation gehen Sie zu den VS-Code-Einstellungen, indem Sie das Menü "Datei" -> "Einstellungen" -> "Einstellungen" öffnen. Dadurch wird das Einstellungsfenster des Editors geöffnet. Es gibt zwei Registerkarten in diesem Bereich auf der linken Seite: "User" und "Workspace". Die Registerkarte "User" bezieht sich auf die Einstellungen, die für Ihr Benutzerprofil gelten, und "Workspace" auf das aktuelle Projekt.
Was ist ein Prettier?
Der Vorteil der Verwendung von Prettier besteht darin, dass es lange Diskussionen über den Codestil im Entwicklungsteam vermeidet, da sich alle Einstellungen an einem Ort befinden und automatisch angewendet werden.
Prettier unterstützt eine Vielzahl von Programmiersprachen, einschließlich TypeScript, JavaScript, HTML, CSS und vielen anderen. Aus diesem Grund können Entwickler Prettier in verschiedenen Projekten und in verschiedenen Programmiersprachen verwenden.
Sie müssen die Erweiterung installieren, um Prettier in Verbindung mit Visual Studio Code verwenden zu können Prettier - Code Formatter. Nach der Installation der Erweiterung formatiert Prettier Ihren Code automatisch entsprechend den gewählten Regeln, wenn Sie die Datei speichern oder auf Anfrage speichern.
Sie müssen Prettier mit einer Datei konfigurieren .prettierrc, um die Formatierungsregeln zu definieren, die Prettier anwenden wird. Sie können vordefinierte Regeln verwenden oder sie entsprechend den Vorlieben Ihres Projekts anpassen.
Die Verwendung von Prettier kann den Entwicklungsprozess erheblich beschleunigen, da Sie keine Zeit mit der manuellen Formatierung des Codes verschwenden müssen. Darüber hinaus wird das Projekt dank eines einheitlichen Codierungsstils für alle Mitglieder des Entwicklungsteams lesbarer und verständlicher.
Warum verwenden Sie Prettier für TypeScript?
1. Einheitlicher Codierungsstil: Prettier bietet einen einheitlichen und konsistenten Codierungsstil in Ihrem Projekt. Dies ist besonders wichtig in der Teamentwicklung, wenn verschiedene Entwickler unterschiedliche Präferenzen für den Codierungsstil haben können. Mit Prettier können Sie einen allgemein akzeptierten Stil festlegen und automatisch auf Ihren Code anwenden.
2. Zeiteinsparung: Prettier formatiert Ihren Code automatisch, wodurch Sie viel Zeit und Mühe sparen können. Anstatt Zeit damit zu verschwenden, Codezeilen auszurichten oder falsche Einzüge zu korrigieren, können Sie sich auf die Entwicklung selbst konzentrieren.
3. Verbesserung der Lesbarkeit von Code: Prettier macht Ihren Code sauberer und lesbarer. Es passt die Einrückung automatisch an, fügt Leerzeichen hinzu und richtet die Anweisungen aus. Dadurch können Sie den Code leichter verstehen und Fehler schneller finden.
4. Integration mit Code-Editoren: Prettier lässt sich nahtlos in verschiedene Code-Editoren integrieren, einschließlich VS Code. Sie können Prettier so konfigurieren, dass Ihr Code beim Speichern einer Datei oder sogar während der Eingabe formatiert wird. Dies vereinfacht den Prozess der Verwendung von Prettier und stellt sicher, dass die Formatierung dauerhaft auf Ihren Code angewendet wird.
Als Ergebnis ermöglicht die Verwendung von Prettier für TypeScript die Erstellung sauberer, konsistenter und lesbarer Code. Dies hilft, Ihr Projekt besser zu unterstützen und verbessert den Entwicklungsprozess.
Einrichten von Prettier für VS Code
Befolgen Sie einige einfache Schritte, um Prettier in der Visual Studio Code-Entwicklungsumgebung (VS Code) zu konfigurieren:
1. Installieren der Prettier-Erweiterung für VS Code. Öffnen Sie den Bereich Erweiterungen (Strg+ Umschalt+ X) und geben Sie "Prettier - Code formatter" in die Suchleiste ein. Installieren Sie die gefundene Erweiterung.
2. Installieren von Projektabhängigkeiten. Wenn Sie Prettier noch nicht in Ihrem Projekt installiert haben, öffnen Sie ein Terminal und installieren es mit npm oder yarn. Führen Sie für npm den Befehl aus:
npm install --save-dev prettier
3. Erstellt eine Einstellungsdatei. Erstellen Sie im Stammverzeichnis Ihres Projekts eine Datei mit dem Namen .prettierrc und definieren Sie die erforderlichen Formatierungseinstellungen. Zum Beispiel:
4. Automatische Formatierung. Nachdem Sie die Prettier-Erweiterung installiert und eine Einstellungsdatei erstellt haben, formatiert VS Code Ihren Code automatisch, wenn Sie die Datei speichern. Sie können den Code auch manuell mit dem Befehl "Format Document" (Umschalt+Alt+F) oder "Format Selection" (Strg+K Strg+F) formatieren.
Jetzt wird Ihr Code immer strukturiert und konsistent aussehen, was das Lesen und die Unterstützung des Entwicklungsteams erheblich erleichtert.
Installieren Sie das Prettier Plugin
Um mit Prettier in Visual Studio Code zu beginnen, müssen Sie das entsprechende Plugin für Ihr Betriebssystem installieren. Führen Sie dazu die folgenden Schritte aus:
- Öffnen Sie Visual Studio Code.
- Klicken Sie links neben der Seitenleiste auf das Erweiterungssymbol oder drücken Sie eine Tastenkombination Ctrl+Shift+X (Windows/Linux) oder Cmd+Shift+X (Mac).
- Geben Sie in das Suchfeld "Prettier - Code formatter" ein und wählen Sie das Plugin aus, das vom Befehl "Prettier" entwickelt wurde.
- Klicken Sie auf die Schaltfläche "Installieren", um das Plugin zu installieren.
Nach der Installation des Plug-ins ist Prettier für die Arbeit mit Ihrem Projekt in Visual Studio Code verfügbar.
Standardeinstellung für Prettier
Installieren Sie zunächst die Prettier-Erweiterung für Visual Studio Code, um sie im Editor zu verwenden. Verwenden Sie dann die folgende Anweisung:
Schritt 1: Öffnen Sie die Visual Studio Code-Einstellungen, indem Sie eine Tastenkombination drücken Ctrl + , oder wählen Sie "Datei" -> "Einstellungen".
Schritt 2: Suchen Sie im Einstellungsfenster den Abschnitt "JSON-Einstellungen" und klicken Sie auf den Link "JSON-Einstellungen öffnen" oder fügen Sie der Einstellungsdatei die folgende Zeile hinzu:
Schritt 3: Speichern Sie die Änderungen und schließen Sie die Einstellungsdatei. Jetzt wird Prettier standardmäßig zum Formatieren Ihres Codes in Visual Studio Code verwendet.
Sie können auch zusätzliche Formatierungsoptionen für Prettier konfigurieren, indem Sie sie zur Einstellungsdatei hinzufügen. Fügen Sie dazu einfach die entsprechenden Parameter zum Abschnitt "JSON-Einstellungen" hinzu. Zum Beispiel:
Dies bedeutet, dass die maximale Länge einer Codezeile 80 Zeichen beträgt.
Jetzt können Sie Prettier als Standard in Visual Studio Code konfigurieren und die automatische Formatierung Ihres Codes in TypeScript genießen.
Prettier-Konfiguration für TypeScript
Schritt 1: Installieren Sie die Prettier-Erweiterung für Visual Studio Code. Öffnen Sie dazu Visual Studio Code, wechseln Sie zum Abschnitt "Extensions" (Erweiterungen) und geben Sie "Prettier - Code formatter" in das Suchfeld ein. Installieren Sie eine Erweiterung, die dem Prettier-Entwickler entspricht, um sie mit Ihrem TypeScript-Projekt zu verwenden.
Schritt 2: Erstellen Sie eine Datei. "prettierrc" im Stammordner Ihres Projekts. In dieser Datei können Sie verschiedene Optionen wie Einrücken, Zeilenbreite und andere Einstellungen anpassen, damit Prettier Ihren Code nach Ihren Wünschen formatiert. Hier sind einige Beispieleinstellungen:
Schritt 3: Konfigurieren Sie Visual Studio Code so, dass Ihr Code beim Speichern der Datei automatisch mit Prettier formatiert wird. Öffnen Sie dazu die Datei settings.json" in Visual Studio Code und fügen Sie die folgende Einstellung hinzu:
Jetzt wird jedes Mal, wenn Sie eine TypeScript-Datei speichern, diese entsprechend den Prettier-Einstellungen formatiert, die Sie in der Datei angegeben haben. "prettierrc".
Das ist alles! Jetzt können Sie Prettier verwenden, um Ihren TypeScript-Code in Visual Studio Code zu formatieren.
Einstellen der automatischen Formatierung
- Installieren Sie die Prettier-Erweiterung für VS Code.
- Öffnen Sie die VS-Code-Konfigurationsdatei (settings).json) in Ihrem Projekt.
- Fügen Sie eine Konfiguration für Prettier hinzu, indem Sie die Formatierungsregeln angeben, die Sie benötigen. Zum Beispiel:
In diesem Beispiel geben wir an, dass die Formatierung jedes Mal angewendet werden muss, wenn Sie eine Datei speichern, Text einfügen und neuen Code eingeben. Die Tabulator-Größe ist auf 2 Leerzeichen gesetzt, und alle einfachen Anführungszeichen werden durch doppelte Anführungszeichen ersetzt.
Nach dem Einrichten von Prettier müssen Sie sich nicht mehr um die korrekte Formatierung des Codes kümmern. Geben Sie einfach Ihren Code ein und Prettier erledigt den Rest für Sie!
