TypeScript mit Visual Studio – automatische Formatierung
Eine automatische Formatierung des Quellcodes bringt zahlreiche Vorteile mit. Visual Studio Code kann dahingehend konfiguriert werden. Ich zeige in diesem Artikel wie ich meinem Visual Studio Code beigebracht habe meinen TypeScript Code nach meinen Regeln automatisch zu formatieren.
TypeScript mit Visual Studio – automatische Formatierung
Visual Studio Code unterstützt die Entwicklung von Plugins. Mit diesen Plugins kann man die Entwicklung in der IDE für bestimmte Sprachen optimieren. Ein recht nützliches Tool für die automatische Formatierung von Code ist Prettier. Im folgenden zeige ich wie man das Plugin verwendet um den Code beim Speichern automatisch formatiert. So ist der Quellcode stets gut leserlich, auch wenn mehrere Entwickler an der Codebasis arbeiten.
Installation
Die Installation ist trivial. Auf der Menüseite der Extensions nach „Prettier“ suchen und auf „Install“ klicken. Die Installation ist damit abgeschlossen, als Benutzer merkt man aber noch keinen Unterschied. Einzig auf der Seite der installierten Plugins wird Prettier nun aufgeführt.
Konfiguration
STRG+SHIFT+P öffnet die „Command Palette…“ über die man Einstellungen ansteuern kann. Diese findet man, wenn man nach Preferences sucht. Die Einstellungen lassen sich über die IDE oder über eine *.json Konfigurationsdatei bearbeiten. Ich wähle den Weg über die IDE:
In dieser Liste von Settings findet man auch die Werte für das Plugin. Diese manuell suchen ist mühsam, weshalb man über die Suchfunktion nach „prettier“ eine Abkürzung nehmen kann.
Prettier wird üblicherweise über eine Konfigurationsdatei mit JSON Code konfiguriert. Wer also lieber die Konfiguration mit ins Git aufnehmen möchte kann eine solche Datei nutzen und über die IDE angeben.
Alternative
Prettier ist ein Tool, das man auch ohne Visual Studio Code verwenden kann. Beispielsweise kann man es als npm Paket mit folgendem Befehl installieren:
npm install --save-dev prettier
Ohne jegliches Tool könnte man Beispielsweise einen ganzen Ordner src mit *.ts Dateien mit folgendem Befehl im Batchbetrieb alle Dateien neu formatieren:
prettier --config .prettierrc 'src/**/*.ts' --write
Die Konfiguration der gewünschten Anpassungen basiert in dem Fall nicht über Settings in der IDE sondern über eine Konfigurationsdatei. Diese heißt standardmäßig .prettierrc und ist üblicherweise im root Verzeichnis des Projekts zu finden.
Fazit
Prettier formatiert den TypeScript Code automatisch. Es ist möglich dieses Tool direkt in Visual Studio Code zu verwenden oder ohne IDE auf der Kommandozeile unabhängig vom gewählten Betriebssystem.
Wie formatierst du Source Code? Welche Regeln befolgt dein Layout? Camel Case oder Pascal Case?
