Wie man Code mit Prettier in Visual Studio Code formatiert

Einführung

Das konsistente Formatieren von Code ist eine Herausforderung, aber moderne Entwicklungswerkzeuge machen es möglich, Konsistenz in der Codebasis Ihres Teams automatisch aufrechtzuerhalten.

In diesem Artikel werden Sie Prettier einrichten, um Ihren Code in Visual Studio Code, auch bekannt als VS Code, automatisch zu formatieren.

Zur Veranschaulichung dient hier der Beispielcode, den Sie formatieren werden:

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

Wenn Sie mit dem Formatieren von Code vertraut sind, können Sie möglicherweise einige Fehler erkennen:

• A mix of single and double quotes.
• Der erste Eigenschaft des person Objekts sollte auf einer eigenen Zeile stehen.
• Die Konsoleanweisung innerhalb der Funktion sollte eingerückt werden.
• Sie mögen vielleicht die optionalen Klammern um den Parameter der Pfeilfunktion oder vielleicht auch nicht.

Inhaltsverzeichnis

• Verwenden des Befehls zum Formatieren des Dokuments
• Formatieren von Code beim Speichern
• Ändern der Prettier-Konfigurationseinstellungen
• Erstellen einer Prettier-Konfigurationsdatei

Voraussetzungen

Um dieses Tutorial zu folgen, benötigen Sie:

• Laden Sie Visual Studio Code herunter und installieren Sie es.
• Um mit Prettier in Visual Studio Code zu arbeiten, müssen Sie die Erweiterung installieren. Suchen Sie dazu im Erweiterungsbereich von VS Code nach Prettier - Code Formatter. Wenn Sie es zum ersten Mal installieren, sehen Sie eine installieren-Schaltfläche statt der hier gezeigten deinstallieren-Schaltfläche:

Schritt 1 – Verwenden des Befehls „Format Document“

Mit der installierten Prettier-Erweiterung können Sie nun nutzen, um Ihren Code zu formatieren. Beginnen wir, den Format Document-Befehl zu erkunden. Dieser Befehl sorgt dafür, dass Ihr Code konsistenter wird, indem Abstände, Zeilenumbruch und Anführungszeichen formatiert werden.

Um das Befehls-Palette zu öffnen, können Sie auf macOS COMMAND + SHIFT + P verwenden oder auf Windows CTRL + SHIFT + P.

Im Befehls-Palette können Sie nach format suchen und dann Dokument formatieren auswählen.

Sie werden möglicherweise aufgefordert, welche Formatierung zu verwenden ist. Klicken Sie dazu auf die Konfigurieren Schaltfläche:

Wählen Sie dann Prettier – Code Formatter.

Ihr Code ist jetzt mit Abständen, Zeilenumbruch und konsistenten 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 bei CSS-Dateien. Sie können etwas mit inkonsistenter Einzug, geschweiften Klammern, neuen Zeilen und Semikolons in gut formatierten Code umwandeln. Zum Beispiel:

body {color: red;
}
h1 {
  color: purple;
font-size: 24px
}

Wird als umformatiert:

body {
  color: red;
}
h1 {
  color: purple;
  font-size: 24px;
}

Jetzt, da wir diesen Befehl erkundet haben, schauen wir uns an, wie dies automatisch ausgeführt werden kann.

Schritt 2 – Codeformatierung beim Speichern

Bisher musstest du einen Befehl ausführen, um deinen Code manuell zu formatieren. Um diesen Prozess zu automatisieren, kannst du in VS Code eine Einstellung auswählen, um deine Dateien automatisch zu formatieren, wenn du speicherst. Dies stellt auch sicher, dass der Code nicht in die Versionskontrolle übernommen wird, der nicht formatiert ist.

Um diese Einstellung zu ändern, drücke COMMAND + , auf macOS oder CTRL + , auf Windows, um dasEinstellungen Menü zu öffnen. Sobald das Menü geöffnet ist, suche nach Editor: Format On Save und stelle sicher, dass diese Option aktiviert ist:

Sobald dies eingestellt ist, kannst du deinen Code wie gewohnt schreiben und er wird automatisch formatiert, wenn du die Datei speicherst.

Schritt 3 – Prettier-Konfigurationseinstellungen ändern

Prettier erledigt viele Dinge für dich standardmäßig, aber du kannst auch die Einstellungen anpassen.

Öffne das Einstellungen Menü. Dann suche nach Prettier. Dies bringt alle Einstellungen zum Vorschein, die du ändern kannst:

Hier sind einige der häufigsten Einstellungen:

• Einfache Anführungszeichen – Wähle zwischen einfachen und doppelten Anführungszeichen.
• Semikolon – Wähle, ob du Semikolons am Ende von Zeilen einfügen möchtest oder nicht.
• Tab-Breite – Gib an, wie viele Leerstellen du möchtest, dass eine Tabulator-Taste einfügt.

Der Nachteil bei der Verwendung des integrierten Einstellungsmenüs in VS Code ist, dass es nicht die Konsistenz unter den Entwicklern in Ihrem Team gewährleistet.

Schritt 4 — Erstellen einer Prettier-Konfigurationsdatei

Wenn Sie Einstellungen in Ihrem VS Code ändern, könnte jemand anderes auf seinem Computer eine gänzlich andere Konfiguration haben. Sie können eine konsistente Formatierung in Ihrem Team durch die Erstellung einer Konfigurationsdatei für Ihr Projekt etablieren.

Erstellen Sie eine neue Datei namens .prettierrc.Erweiterung mit einer der folgenden Erweiterungen:

• yml
• yaml
• json
• js
• toml

Hier ist ein Beispiel für eine einfache Konfigurationsdatei mit JSON:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Auf weitere Details zu den Konfigurationsdateien finden Sie in den Prettier Dokumentationen. Nachdem Sie eine dieser Dateien erstellt und in Ihr Projekt eingecheckt haben, können Sie sicherstellen, dass jeder Teammitglied dieselben Formatierungsregeln befolgt.

Schlussfolgerung

Es ist eine gute Praxis, konsistenten Code zu haben. Besonders vorteilhaft ist dies, wenn man an einem Projekt mit mehreren Mitarbeitern arbeitet. Die Vereinbarung einer Reihe von Konfigurationen trägt zur Lesbarkeit und zum Verständnis des Codes bei. Mehr Zeit kann der Lösung anspruchsvoller technischer Probleme gewidmet werden, anstatt sich mit bereits gelösten Problemen wie der Einrückung des Codes herumzuschlagen.

Prettier sorgt für Konsistenz bei der Formatierung des Codes und automatisiert den Prozess.