Einführung
Die Formatierung von Code ist immer eine Herausforderung, doch moderne Entwicklertools ermöglichen es, die Konsistenz im gesamten Code Ihres Teams automatisch zu gewährleisten. In diesem Artikel erfahren Sie, wie Sie Prettier einrichten, um Ihren Code in Visual Studio Code (VS Code) automatisch zu formatieren.
Zur Veranschaulichung finden Sie hier ein Beispiel des von Ihnen formatierten Codes:
const name = "James";
const person ={first: name
}
console.log(person);
const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}
sayHelloLinting('James');Wenn Sie mit der Formatierung von Code vertraut sind, werden Ihnen möglicherweise einige fehlerhafte Schritte auffallen:
- Eine Kombination aus einfachen und doppelten Anführungszeichen.
- Die erste Eigenschaft des Person-Objekts sollte in seiner Zeile stehen.
- Die Console-Anweisung innerhalb der Funktion muss eingerückt sein.
- Ob Ihnen die optionalen Klammern um den Parameter der Pfeilfunktion gefallen, ist Ihnen überlassen.
Voraussetzungen
- Laden Sie Visual Studio Code herunter und installieren Sie es.
- Um Prettier in Visual Studio Code zu verwenden, müssen Sie das Plugin installieren. Suchen Sie dazu in der Plugin-Übersicht von VS Code nach „Prettier – Code Formatter“. Wenn Sie das Plugin zum ersten Mal installieren, sehen Sie anstelle der hier gezeigten Schaltfläche „Deinstallieren“ die Schaltfläche „Installieren“.
Schritt 1 – Verwenden des Befehls „Dokument formatieren“
Nachdem das Prettier-Plugin installiert ist, können Sie es nun zur Codeformatierung verwenden. Beginnen wir mit dem Befehl „Dokument formatieren“. Dieser Befehl sorgt für einheitlicheren Code durch formatierte Abstände, Zeilenumbrüche und Anführungszeichen.
Um die Befehlspalette zu öffnen, können Sie Folgendes verwenden: Befehl + Umschalt + P Auf macOS oder STRG + UMSCHALT + P Zur Verwendung unter Windows.
Suchen Sie in der Befehlspalette nach „Format“ und dann nach „Format“. Dokumentformat Wählen.
Anschließend werden Sie möglicherweise aufgefordert, das zu verwendende Format auszuwählen. Klicken Sie dazu auf die Schaltfläche „Konfigurieren“.
Wählen Sie anschließend Prettier – Code Formatter.
Ihr Code ist nun mit Leerzeichen, Zeilenumbruch und festen Anführungszeichen formatiert:
const name = "James";
const person = { first: name };
console.log(person);
const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`);
};
sayHelloLinting("James");Dies funktioniert auch mit CSS-Dateien. Sie können Code mit inkonsistenten Einrückungen, Klammern, Zeilenumbrüchen und Semikolons in korrekt formatierten Code umwandeln. Zum Beispiel:
body {color: red;
}
h1 {
color: purple;
font-size: 24px
}Es ist wie folgt formatiert:
body {
color: red;
}
h1 {
color: purple;
font-size: 24px;
}Nachdem wir diesen Befehl nun besprochen haben, sehen wir uns an, wie wir ihn automatisieren können.
Schritt 2 – Formatieren des Codes beim Speichern
Bisher mussten Sie Ihren Code manuell formatieren. Um diesen Vorgang zu automatisieren, können Sie in VS Code eine Einstellung wählen, die Ihre Dateien beim Speichern automatisch formatiert. Dadurch wird auch sichergestellt, dass unformatierter Code nicht in die Versionskontrolle eingecheckt wird.
Um diese Einstellung zu ändern, BEFEHL + auf macOS oder STRG + Drücken Sie in Windows die entsprechende Taste, um das Einstellungsmenü zu öffnen. Sobald das Menü geöffnet ist, Editor: Formatieren beim Speichern Suchen Sie nach dieser Option und stellen Sie sicher, dass sie aktiviert ist:
Nach der Einrichtung können Sie Ihren Code wie gewohnt schreiben; er wird beim Speichern der Datei automatisch formatiert.
Schritt 3 – Ändern Sie die Einstellungen für die Prestier-Konfiguration.
Prettier nimmt Ihnen standardmäßig viel Arbeit ab, aber Sie können die Einstellungen auch individuell anpassen.
Öffnen Sie das Menü „Einstellungen“. Suchen Sie anschließend nach „Prettier“. Daraufhin werden alle Einstellungen angezeigt, die Sie ändern können:
Hier sind einige der gängigsten Einstellungen:
- Einfaches Anführungszeichen – Wählen Sie zwischen einfachen und doppelten Anführungszeichen.
- Semi – Wählen Sie aus, ob am Ende der Zeilen Semikolons stehen sollen.
- Tabulatorbreite – Geben Sie an, wie viele Leerzeichen ein Tabulator eingefügt werden soll.
Der Nachteil der Verwendung des integrierten Einstellungsmenüs in VS Code besteht darin, dass es keine einheitliche Vorgehensweise zwischen den Entwicklern in Ihrem Team gewährleistet.
Schritt 4 – Erstellen Sie eine übersichtlichere Konfigurationsdatei
Wenn Sie die Einstellungen in Ihrem VS Code ändern, kann es sein, dass jemand anderes auf seinem Rechner eine völlig andere Konfiguration hat. Sie können eine einheitliche Formatierung für Ihr Team gewährleisten, indem Sie eine Konfigurationsdatei für Ihr Projekt erstellen.
Eine neue Datei namens prettierrc.extension Erstellen Sie es mit einer der folgenden Erweiterungen:
ymlYAMLJSONjstoml
Hier ist ein Beispiel für eine einfache Konfigurationsdatei im JSON-Format:
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}Weitere Details zu Konfigurationsdateien finden Sie in der ausführlicheren Dokumentation. Sobald Sie eine solche Datei erstellt und in Ihrem Projekt eingecheckt haben, können Sie sicherstellen, dass alle Teammitglieder dieselben Formatierungsregeln einhalten.
Einführung
Einheitlicher Code ist eine bewährte Vorgehensweise. Dies ist besonders hilfreich bei Projekten mit mehreren Beteiligten. Die Einigung auf gemeinsame Einstellungen verbessert die Lesbarkeit und das Verständnis des Codes. So bleibt mehr Zeit für die Lösung komplexer technischer Probleme, anstatt sich mit bereits gelösten Problemen wie der Codeeinrückung auseinanderzusetzen.
