In der heutigen Welt der Softwareentwicklung wird immer mehr darauf geachtet, sauberen und lesbaren Code zu schreiben. Code, der ordentlich und organisiert aussieht, ermöglicht es Programmierern, effizienter im Team zu arbeiten und ihren eigenen Code auch nach längerer Zeit zu verstehen. Ein Werkzeug, das dazu beiträgt, ist Prettier - ein Tool zur automatischen Codeformatierung.
Prettier ist ein Tool, das den Code automatisch zu festgelegten Formatierungsregeln führt. Es basiert auf einer Konfigurationsdatei im Projekt, in der Sie verschiedene Einrückungsregeln, Klammern, Zeilenlänge und andere Formatierungsoptionen festlegen können. Wenn eine Datei gespeichert wird, formatiert Prettier sie automatisch so, dass sie mit den festgelegten Regeln übereinstimmt.
Interessanterweise kann Prettier so konfiguriert werden, dass es mit einer Vielzahl von Programmiersprachen funktioniert, einschließlich TypeScript. Das Installieren und Konfigurieren von Prettier für die Verwendung mit TypeScript in VS Code ist ziemlich einfach und dauert nicht lange. In diesem Artikel werden wir alle notwendigen Schritte untersuchen, um Prettier in VS Code einzurichten, damit es unseren TypeScript-Code nach unseren Vorlieben formatiert.
Was ist ein Prettier und warum wird es benötigt?
Das Hauptziel von Prettier ist es, den Arbeitsprozess mit Code zu erleichtern und seine Lesbarkeit zu verbessern. Es richtet die Einrückung automatisch aus, ordnet Klammern, Kommas und Semikolons entsprechend bestimmten Formatierungsregeln an. Außerdem entfernt Prettier unnötige Leerzeichen und Zeilenumbrüche, setzt monotone Anführungszeichen und richtet Kommentare aus. Dadurch wird der gesamte im Projekt geschriebene Code einheitlich dargestellt, was die Arbeit des Entwicklungsteams erleichtert.
Prettier kann autonom in der Befehlszeile ausgeführt werden, aber seine Integration in Code-Editoren wie VS Code ermöglicht es Ihnen, den Code direkt während des Schreibens zu formatieren. Dies ist praktisch und ermöglicht es Ihnen, die Formatierungsergebnisse sofort zu sehen, ohne zusätzliche Befehle ausführen zu müssen.
Die Verwendung von Prettier reduziert auch den Zeitaufwand für das Iterieren des Quellcodes, da es Streitigkeiten über den Formatierungsstil beseitigt und die Lesbarkeit des Codes verbessert. Darüber hinaus hilft die Implementierung von Prettier in den frühen Entwicklungsstadien, die Ansammlung von Fehlern und falscher Formatierung zu verhindern, was die weitere Arbeit am Projekt erschweren kann.
- Vereinfachte Teamentwicklung
- Verkürzung der Codearbeitszeit
- Vermeidung von Formatierungsfehlern
Prettier in VS Code installieren
Um mit Prettier in VS Code zu beginnen, müssen Sie die Prettier-Erweiterung installieren. Führen Sie dazu die folgenden Schritte aus:
- Öffnen Sie VS Code.
- Klicken Sie auf die Registerkarte "Erweiterungen" (oder drücken Sie Strg+Umschalt+X).
- Geben Sie in der Suchleiste "Prettier - Code formatter" ein und wählen Sie die erste vorgeschlagene Erweiterung aus.
- Klicken Sie auf die Schaltfläche "Installieren".
- Starten Sie nach der Installation der Erweiterung den VS-Code neu, damit die Änderungen wirksam werden.
Nachdem Sie die Prettier-Erweiterung installiert haben, können Sie sie nach Belieben anpassen. In den folgenden Abschnitten werden wir die grundlegenden Einstellungen von Prettier untersuchen und wie Sie sie in VS Code für TypeScript konfigurieren.
Erstellen einer Konfigurationsdatei für Prettier
Um Prettier in VS Code für TypeScript einzurichten, müssen Sie eine Konfigurationsdatei für dieses Tool erstellen. Die Datei muss benannt werden .prettierrc und befindet sich im Stammordner Ihres Projekts.
Öffnen Sie einen Texteditor und erstellen Sie eine Datei mit dem Namen .prettierrc . Innerhalb der Datei können Sie verschiedene Prettier-Einstellungen angeben, die festlegen, wie der Code formatiert wird. Hier ist ein Beispiel für eine grundlegende Konfigurationsdatei:
In diesem Beispiel haben wir drei Einstellungen angegeben:
- singleQuote - Beinhaltet die Verwendung von einfachen Anführungszeichen anstelle von doppelten Anführungszeichen;
- trailingComma - Fügt ein Komma nach dem letzten Element in Arrays und Objekten hinzu;
- tabWidth - Legt die Tabulatorbreite auf zwei Leerzeichen fest.
Sie können diese Einstellungen nach Ihren Wünschen ändern. Eine vollständige Liste der Einstellungen und ihrer Werte finden Sie in der offiziellen Prettier-Dokumentation.
Nachdem Sie die Konfigurationsdatei erstellt haben, verwendet Prettier diese Einstellungen beim Formatieren Ihres Codes.
Prettier für TypeScript einrichten
Schritte zum Einrichten von Prettier für TypeScript in VS Code:
- Installieren Sie Prettier, indem Sie den Befehl npm install prettier --save-dev im Stammordner Ihres Projekts ausführen.
- Installieren Sie die Prettier-Erweiterung für VS Code, indem Sie auf die Registerkarte "Extensions" gehen und "Prettier - Code formatter" in die Suchleiste eingeben. Wählen Sie die Erweiterung aus und klicken Sie auf die Schaltfläche "Installieren".
- Erstellen Sie eine Datei .prettierrc befindet sich im Stammordner des Projekts, und fügen Sie die folgenden Einstellungen hinzu:
In diesem Beispiel fügen wir nach jeder Codezeile ein Semikolon ein ( "semi": true ), verwenden einfache Anführungszeichen anstelle von doppelten Anführungszeichen ( "singleQuote": true ), beschränken die Zeilenbreite auf 80 Zeichen ( "printWidth": 80 ) und setzen die Tabulator-Breite auf 2 Leerzeichen ( "tabWidth": 2 ).
4. Öffnen Sie die VS Code-Konfigurationsdatei ( .vscode/settings.json ) und fügen Sie die folgende Konfiguration hinzu:
Jetzt formatiert Prettier Ihren TypeScript-Code automatisch, wenn Sie die Datei in VS-Code speichern.
Dadurch können Sie einen einheitlichen Codierungsstil im Projekt beibehalten, was das Lesen und Warten des Codes erleichtert.
Beachten Sie, dass Sie vor dem Einrichten von Prettier für TypeScript in VS Code sicherstellen müssen, dass Sie TypeScript und VS Code auf Ihrem System installiert haben.
Verwenden von Prettier in VS Code
Wenn Sie diese Schritte befolgen, können Sie Prettier in VS Code für TypeScript konfigurieren:
- Setzt VS Code und Prettier. Sie können sie über die VS Code Marketplace-Erweiterungen installieren.
- Öffnen Sie die Datei mit Ihrem TypeScript-Code in VS Code.
- Drücken Ctrl + ,, um die VS Code-Einstellungen zu öffnen.
- Einfuehrt Prettier suchen Sie im Suchfeld nach dem Abschnitt mit den Prettier-Einstellungen.
- Klicken Sie auf Edit in settings.json ein Link, um Ihre Einstellungsdatei zu öffnen.
- Fügen Sie der Einstellungsdatei die folgende Einstellung hinzu:
"editor.defaultFormatter": "esbenp.prettier-vscode"Prettier jetzt wird der integrierte Formatierer in VS Code verwendet, um Ihren TypeScript-Code zu formatieren.
Darüber hinaus können Sie andere Prettier-Optionen wie Einrücken, ESLint-Integration usw. anpassen. Dies kann besonders dann nützlich sein, wenn Sie als Team arbeiten und einen einheitlichen Codierungsstil für Ihr Projekt beibehalten möchten.
So können Sie Prettier in Visual Studio Code verwenden, um Ihren TypeScript-Code zu formatieren. Ich hoffe, dieser Artikel war hilfreich für Sie!
