Prettier - es ist ein Tool, mit dem Sie Ihren Code automatisch formatieren können, wodurch er lesbarer und konsistenter wird. Wenn Sie mit dem Visual Studio Code-Editor in TypeScript entwickeln, kann das Einrichten von Prettier Ihren Workflow erheblich beschleunigen.
In diesem Artikel erfahren Sie, wie Sie Prettier in Visual Studio Code für die Arbeit mit TypeScript richtig konfigurieren. Sie müssen die Prettier-Erweiterung für VS Code installieren und einige Parameter so konfigurieren, dass sie Ihren Codierungsvorlieben und -standards entsprechen.
Nach der Installation der Prettier-Erweiterung stehen Ihnen viele Formatierungsoptionen zur Verfügung, z. B. Einrücken, einfache oder doppelte Anführungszeichen, Zeilenlänge usw. Sie können diese Optionen in der VS-Code-Einstellungsdatei anpassen oder eine Datei erstellen. "prettierrc" im Stammverzeichnis Ihres Projekts.
Das Einrichten eines Prettier kann die Lesbarkeit und Konsistenz Ihres Codes erheblich verbessern. Es spart auch Zeit, die Sie für die manuelle Formatierung aufwenden würden. Denken Sie daran, regelmäßig nach Prettier-Updates zu suchen und sie zu installieren, um über die neuesten Änderungen und Funktionen auf dem Laufenden zu bleiben.
Prettier in VS Code für TypeScript: Schritt für Schritt Anleitung
In diesem Artikel betrachten wir eine schrittweise Anleitung zum Einrichten von Prettier in VS Code für TypeScript.
- Installieren Sie die Prettier Erweiterung für VS Code. Öffnen Sie dazu VS Code und klicken Sie auf die Registerkarte "Extensions" (Erweiterungen). Geben Sie "prettier" in die Suchleiste ein und installieren Sie die von der Codeformatierung entwickelte Erweiterung.
- Installieren Sie das Prettier-Paket für TypeScript. Öffnen Sie das Terminal VS Code (mit Strg + ` ) und führen Sie den folgenden Befehl aus: npm install --save-dev prettier . Dadurch wird das Prettier Paket installiert, das zum Formatieren des TypeScript-Codes benötigt wird.
- Konfigurieren Sie Prettier in VS Code. Setzen Sie den VS-Code zurück und öffnen Sie die Einstellungen, indem Sie auf klicken Ctrl + , oder indem Sie "File" (Datei) im Menü auswählen und "Preferences" (Einstellungen) auswählen. Suchen Sie die Editor-Einstellung.defaultFormatter und wählen Sie "Prettier - Code formatter" aus der Dropdown-Liste aus.
- Erstellen Sie eine Konfigurationsdatei für Prettier. Erstellen Sie eine Datei mit dem Namen .prettierrc im Stammverzeichnis Ihres Projekts. Legen Sie in der Datei die Prettier-Einstellungen im JSON-Format fest. Sie können beispielsweise eine maximale Zeilenlänge oder spezielle Regeln für die Codeformatierung festlegen.
- Konfigurieren Sie den Befehl, um den Code mit Prettier zu formatieren. Öffnen Sie die VS Code-Einstellungen erneut und suchen Sie nach der Editor-Einstellung.formatOnSave . Setzen Sie den Wert auf true , damit VS Code den Code beim Speichern der Datei automatisch formatiert.
Jetzt haben Sie einen angepassten Prettier in VS Code für TypeScript! Sie können den Befehl "Dokument formatieren" verwenden oder einfach die Datei speichern, damit Prettier Ihren Code automatisch formatiert und Ihnen hilft, einen einheitlichen Code-Schreibstil in Ihrem Projekt beizubehalten.
Prettier installieren
1. Stellen Sie sicher, dass die Visual Studio Code-Entwicklungsumgebung auf Ihrem Computer installiert ist. Sie können es von der offiziellen Visual Studio Code-Website herunterladen.
2. Öffnen Sie Visual Studio Code, und wählen Sie im linken Seitenmenü die Registerkarte Erweiterungen aus. Geben Sie in der Suchleiste "Prettier - Code formatter" ein und drücken Sie die Eingabetaste.
3. Suchen Sie die Erweiterung "Prettier - Code formatter" vom Entwickler Prettier und klicken Sie auf die Schaltfläche "Installieren". Klicken Sie nach der Installation der Erweiterung auf die Schaltfläche "Reload", um den Editor neu zu laden.
4. Nachdem Sie Prettier installiert und heruntergeladen haben, müssen Sie es für Ihr Projekt konfigurieren. Erstellen Sie eine Datei '.prettierrc` im Stammordner Ihres Projekts und fügen Sie die erforderlichen Einstellungen hinzu. Sie können beispielsweise angeben, dass Ihr Code mit zwei Leerzeichen anstelle von Tabulatoren formatiert werden muss:
5. Jetzt ist Prettier einsatzbereit! Öffnen Sie TypeScript-Dateien in Visual Studio Code und drücken Sie die Tastenkombination Umschalt + Alt + F (oder klicken Sie auf die Registerkarte Ansicht und wählen Sie Dokument formatieren). Prettier formatiert Ihren Code automatisch entsprechend den Einstellungen in der Datei `.prettierrc`.
Sie haben also Prettier in Visual Studio Code für die TypeScript-Programmiersprache installiert und konfiguriert. Jetzt können Sie Ihren Code bequem formatieren und ihn lesbarer und konsistenter machen.
Einrichten von Prettier in VS Code
Schritt 1: Installieren Sie Prettier
Der erste Schritt besteht darin, die Prettier-Erweiterung für Ihren VS Code-Editor zu installieren. Öffnen Sie dazu VS Code und gehen Sie zum Abschnitt "Extensions" (Erweiterungen). Geben Sie im Suchfeld "prettier" ein und klicken Sie auf "Install", um die Erweiterung zu installieren. Starten Sie den Editor nach der Installation neu.
Schritt 2: Erstellen einer Konfigurationsdatei
Als nächstes erstellen Sie eine Datei mit dem Namen ".prettierrc" an der Wurzel Ihres Projekts. In dieser Datei können Sie Formatierungsoptionen wie Einzug und Zeilenlänge angeben. Zum Beispiel ist hier ein Beispiel für eine einfache Datei. "prettierrc":
Schritt 3: Anpassen des Editors
Um VS Code so zu konfigurieren, dass Code automatisch mit Prettier formatiert wird, müssen Sie einige Einstellungen in den Editor-Einstellungen ändern. Öffnen Sie dazu "Datei" → "Einstellungen" im Hauptmenü von VS Code. Das Einstellungsfenster wird geöffnet, in dem Sie Änderungen vornehmen können.
Geben Sie im Einstellungsfenster "Format on save" in das Suchfeld ein und aktivieren Sie das Kontrollkästchen neben "Editor: Format On Save". Auf diese Weise formatiert VS Code den Code beim Speichern automatisch.
In den Einstellungen können Sie auch Ihre eigenen Prettier-Parameter mit der Option "Prettier: Config Path" konfigurieren. Geben Sie den Pfad zu Ihrer Konfigurationsdatei an. "prettierrc".
Schritt 4: Verwenden Sie Prettier
Nachdem Sie den Editor eingerichtet haben, können Sie Prettier verwenden, um Ihren Code zu formatieren. Öffnen Sie einfach die Datei, die Sie formatieren möchten, und drücken Sie die Tastenkombination "Strg + Umschalt + P" (oder "Cmd + Umschalt + P" auf dem Mac), um die Befehlspalette zu öffnen. Geben Sie "Dokument formatieren" ein und wählen Sie die entsprechende Option aus. Ihr Code wird automatisch entsprechend den Prettier-Einstellungen formatiert.
Einrichten des TypeScript-Compilers
Stellen Sie zunächst sicher, dass Sie das TypeScript-Paket installiert haben. Sie können es global mit dem folgenden Befehl festlegen:
npm install -g typescript
Nach der Installation von TypeScript erstellen Sie eine tsconfig-Datei.json im Stammordner Ihres Projekts. Diese Datei definiert die Einstellungen für den TypeScript-Compiler.
Ein Beispiel für eine einfache tsconfig.json-Datei:
,"include": ["src/**/*.ts"],"exclude": ["node_modules"]>compilerOptions enthält die Einstellungen des TypeScript-Compilers. Im obigen Beispiel geben wir die Zielversion von JavaScript (es6), das modulare System (commonjs), den Ausgabeordner für kompilierte Dateien (dist) und den strikten Typisierungsmodus (strict) an.
include und exclude legen Sie fest, welche Dateien beim Kompilieren von TypeScript-Dateien enthalten oder ausgeschlossen werden sollen. Im obigen Beispiel schließen wir alle Dateien mit der Erweiterung ein .ts im Ordner src und seinen Unterordnern, und wir schließen den Ordner node_modules aus.
Nachdem du eine tsconfig hast.json-Datei mit den erforderlichen Einstellungen können Sie Ihre TypeScript-Dateien mit dem Befehl kompilieren:
Dies kompiliert alle Dateien mit der Erweiterung .die im include angegebenen ts werden gemäß den tsconfig-Einstellungen angegeben.json .
Durch die Konfiguration des TypeScript-Compilers können Sie alle Funktionen der TypeScript-Sprache effizient nutzen und die Typen in Ihrem Projekt steuern. Es wird empfohlen, diese Einstellungen für jedes neue TypeScript-Projekt anzuwenden.
Anwenden von Prettier auf ein Projekt
Schritte zum Einrichten:
-
Installieren Sie die Prettier Erweiterung für VS Code, wenn Sie dies noch nicht getan haben. Führen Sie den folgenden Befehl an einer Eingabeaufforderung aus:
code --install-extension esbenp.prettier-vscodeJetzt formatiert Prettier Ihren TypeScript-Code automatisch entsprechend den eingestellten Einstellungen jedes Mal, wenn Sie eine Datei speichern.
Alternativ können Sie VS Code auch so konfigurieren, dass Ihr Code beim Einfügen oder Kopieren automatisch formatiert wird. Fügen Sie dazu die folgenden Einstellungen zu Ihrer settings-Datei hinzu.json :
Ihr Code wird nun beim Einfügen oder Kopieren automatisch formatiert.
Die Verwendung von Prettier hilft dabei, einen einheitlichen Formatierungsstil im Projekt beizubehalten, wodurch der Code lesbarer wird und mögliche Formatierungsfehler vermieden werden. Durch die Integration von Prettier in VS Code können Sie es einfach auf Ihren Code anwenden und Zeit für die manuelle Formatierung sparen.
Nützliche Tipps zur Verwendung von Prettier
| Rat | Die Beschreibung |
|---|---|
| Verwendet .prettierrc Datei | Erstellen Sie eine Datei .prettierrc im Stammordner Ihres Projekts, um Prettier nach Ihren Wünschen anzupassen. Sie können verschiedene Einstellungen wie Einrücken, Leerzeichen, Semikolons und vieles mehr angeben. |
| Führen Sie Prettier beim Speichern der Datei aus | Richten Sie Ihren Code-Editor (z. B. VS Code) so ein, dass Prettier beim Speichern der Datei automatisch ausgeführt wird. Dadurch können Sie Ihren Code bei jedem Speichern automatisch formatieren und Unstimmigkeiten im Formatierungsstil vermeiden. |
| Verwenden Sie den Befehl Prettier über die Befehlszeile | Wenn Sie eine Datei oder sogar das gesamte Projekt schnell formatieren müssen, können Sie den Befehl Prettier über die Befehlszeile verwenden. Navigieren Sie einfach zum Stammordner Ihres Projekts und führen Sie den Befehl prettier --write aus ." um das gesamte Projekt zu formatieren. |
| Ignorieren Sie Dateien, die Sie nicht formatieren möchten | Sie können die Datei anpassen .prettierignore, damit Prettier bestimmte Dateien oder Ordner beim Formatieren ignoriert. Dies ist nützlich, wenn Sie beispielsweise Dateien in einem Testordner oder temporäre Dateien ausschließen möchten. |
| Verwenden Sie Erweiterungen, um Prettier zu integrieren | Abhängig von Ihrem Code-Editor können Sie Erweiterungen finden und verwenden, mit denen Sie Prettier noch bequemer anpassen und verwenden können. Zum Beispiel gibt es für VS Code die Erweiterung Prettier - Code formatter, die zusätzliche Funktionalität und Prettier-Integration hinzufügt. |
Wenn Sie diese Tipps befolgen, können Sie Prettier effektiv nutzen und Ihren Code lesbarer und strukturierter gestalten. Prettier ist ein großartiges Werkzeug, mit dem Sie Zeit und Mühe sparen können, den Code manuell zu formatieren.
