So richten Sie Prettier in Visual Studio Code ein

Das Schreiben von sauberem und lesbarem Code ist unerlässlich, egal ob Sie alleine oder mit einem Team von Entwicklern arbeiten. Während viele Faktoren zur Lesbarkeit des Codes beitragen, ist einer der wichtigsten die konsistente Codeformatierung.

Aber hier ist das Problem: Die manuelle Codeformatierung kann absolut mühsam und sehr fehleranfällig sein. Tools wie Prettier machen das Formatieren von HTML, CSS, JavaScript und anderen Sprachen so viel einfacher. Erfahren Sie, wie Sie die Prettier-Erweiterung für die Codeformatierung installieren und verwenden, sowie einige erweiterte Konfigurationseinstellungen.

Schöner installieren

Bevor Sie fortfahren, stellen Sie sicher, dass Node.js auf Ihrem Computer installiert ist. Sie können die neueste Version von der installieren offizielle Node.js-Downloadseite. Es kommt mit der Node-Paketmanager (npm) integriert, mit dem Sie Ihre Node.js-Pakete verwalten.

Nachdem Sie bestätigt haben, dass Node.js lokal installiert ist, erstellen Sie zunächst ein leeres Verzeichnis für Ihr Projekt. Sie können das Verzeichnis benennen hübscher-demo.

Wechseln Sie als Nächstes über eine Befehlszeile in dieses Verzeichnis und führen Sie dann den folgenden Befehl aus, um ein Node.js-Projekt zu initialisieren:

npm init -y

Dieser Befehl generiert eine package.json-Datei mit den Standardeinstellungen.

Um die Prettier-Erweiterung zu installieren, führen Sie diesen Terminalbefehl aus:

npm i --save-dev hübscher

Der --save-dev flag wird schöner als Dev-Abhängigkeit installiert, was bedeutet, dass es nur während der Entwicklung verwendet wird.

Jetzt, da Sie es installiert haben, können Sie damit beginnen, die Funktionsweise von Prettier zu erkunden, indem Sie es in der Befehlszeile verwenden.

Verwenden von Prettier über die Befehlszeile

Beginnen Sie mit der Erstellung einer script.js Datei und füllen Sie sie mit dem folgenden Code:

FunktionSumme(ein, b) { zurückkehren ein + b }
konst Benutzer = { Name: "Kyle", Alter: 27,
 istProgrammierer: WAHR,
 langer Schlüssel: "Wert",
 mehrDaten: 3
}

Führen Sie den folgenden Befehl aus, um den Code in dieser script.js-Datei über die Befehlszeile zu formatieren:

npx hübscher --write script.js

Der Befehl formatiert den JavaScript-Code in script.js auf den Standardstandard von Prettier um. Das wird das Ergebnis sein:

FunktionSumme(ein, b) {
zurückkehren a + b;
}
konst Benutzer = {
 Name: "Kyle",
 Alter: 27,
 istProgrammierer: WAHR,
 langer Schlüssel: "Wert",
 mehrDaten: 3,
};

Sie können HTML-Markup auch über die Befehlszeile formatieren. Erstelle ein index.html Datei im gleichen Verzeichnis wie script.js. Fügen Sie dann den folgenden schlecht formatierten HTML-Code in die Datei ein:

"" alt=""Klasse="Wetter-Symbol groß">

Klasse="aktuelleHeaderTemp"><Spanne>21Spanne></div>
</div>
 </header>

Führen Sie diesen Befehl aus, um den HTML-Code zu formatieren:

npx hübscher --write index.html

Dieser Befehl formatiert den HTML-Code auf den Standardstandard von Prettier neu, was zu folgendem Code führt:

<Header>
<div>
<BildQuelle=""alt=""Klasse="Wetter-Symbol groß" />
<divKlasse="aktuelleHeaderTemp"><Spanne>21Spanne>div>
div>
Header>

Sie können auch die verwenden --überprüfen -Flag, um zu prüfen, ob der Code den Standards von Prettier entspricht. Das folgende Beispiel prüft script.js:

npx hübscher --check script.js

Dies ist nützlich, wenn Sie einen Pre-Commit-Hook wünschen, um sicherzustellen, dass die Leute Prettier verwenden und die Dateien formatieren, bevor sie sie an Git senden. Das funktioniert gut, wenn Beitrag zu Open Source.

Integrieren von Prettier in Visual Studio-Code

Die Verwendung von Prettier über die Befehlszeile kann mühsam sein. Anstatt jedes Mal einen Befehl manuell auszuführen, wenn Sie Code formatieren möchten, können Sie ihn so einrichten, dass er automatisch formatiert wird, wenn Sie eine Datei ändern. Glücklicherweise hat Visual Studio Code (VS Code) eine integrierte Möglichkeit, dies für Sie zu tun.

Gehen Sie zum Erweiterungen Registerkarte in VS Code und suchen Sie nach Hübscher. Klicke auf Schöner - Code-Formatierer, installieren Sie es und aktivieren Sie es dann.

Gehen Sie zu Ihren VS Code-Einstellungen, indem Sie zu navigieren Datei > Einstellungen > Einstellungen. Suchen Sie im Suchfeld nach Hübscher. Sie finden eine Menge Optionen, die Ihnen bei der Konfiguration der Prettier-Erweiterung helfen.

In der Regel können Sie mit den Standardeinstellungen auskommen. Das einzige, was Sie ändern könnten, sind die Semikolons (Sie können sie entfernen, wenn Sie möchten). Ansonsten ist alles auf Standard eingestellt, aber Sie können es nach Belieben ändern.

Achten Sie darauf, die zu aktivieren formatieren Option, damit der Code in jeder Datei automatisch formatiert wird, wenn Sie diese Datei speichern. Um es zu aktivieren, suchen Sie einfach nach formatieren und kreuzen Sie das Kästchen an.

Wenn Sie VSCode nicht verwenden oder die Erweiterung aus irgendeinem Grund nicht funktioniert, können Sie dies tun Laden Sie die Onchange-Bibliothek herunter. Dadurch wird der Befehl zum Formatieren des Codes immer dann ausgeführt, wenn Sie die Datei ändern.

So ignorieren Sie Dateien beim Formatieren mit Prettier

Wenn Sie das hübschere ausführen würden --schreiben Befehl auf Ihren gesamten Ordner ausführen, würde er jedes einzelne Ihrer Knotenmodule durchlaufen. Aber Sie sollten keine Zeit damit verschwenden, den Code anderer Leute zu formatieren!

Um dieses Problem zu umgehen, erstellen Sie eine .schönerignorieren Datei und fügen Sie den Begriff hinzu node_modules in der Datei. Wenn Sie die ausführen würden --schreiben Befehl für den gesamten Ordner, formatiert er alle Dateien außer denen in der node_modules Ordner.

Sie können auch Dateien mit einer bestimmten Erweiterung ignorieren. Wenn Sie beispielsweise alle HTML-Dateien ignorieren möchten, fügen Sie einfach hinzu *.html Zu .schönerignorieren.

So konfigurieren Sie hübscher

Sie können konfigurieren, wie Prettier mit verschiedenen Optionen arbeiten soll. Eine Möglichkeit besteht darin, a hinzuzufügen hübscher Schlüssel zu Ihrem Paket.json Datei. Der Wert ist ein Objekt, das alle Konfigurationsoptionen enthält:

{
 ...
"Skripte": {
"prüfen": "echo \"Fehler: kein Test angegeben\" && Ausgang 1"
 },
 hübscher: {
// Optionen kommen hierher
 }
}

Die zweite Option (die wir empfehlen) besteht darin, eine .prettierrc Datei. Mit dieser Datei können Sie alle möglichen Anpassungen vornehmen.

Nehmen wir an, Sie mögen keine Semikolons. Sie können sie entfernen, indem Sie das folgende Objekt in die Datei einfügen:

{
"halb": WAHR,
"überschreibt": [
 {
"Dateien": ".ts",
"Optionen": {
"halb": FALSCH
 }
 }
 ]
}

Der überschreibt -Eigenschaft können Sie benutzerdefinierte Außerkraftsetzungen für bestimmte Dateien oder Dateierweiterungen definieren. In diesem Fall sagen wir, dass alle Dateien mit der Endung .ts (d. h. Typoskriptdateien) sollten keine Semikolons enthalten.

Verwenden von Prettier mit ESLint

ESLint ist ein Linting-Tool zum Erkennen von Fehlern in JavaScript-Code sowie zum Formatieren. Wenn Sie Prettier verwenden, möchten Sie ESLint wahrscheinlich nicht auch zum Formatieren verwenden. Um sie zusammen zu verwenden, müssen Sie sie installieren und einrichten eslint-config-hübscher. Dieses Tool deaktiviert alle ESLint-Konfigurationen für Dinge, die Prettier bereits handhabt.

Zuerst müssen Sie es installieren:

npm i --save-dev eslint-config-prettier

Als nächstes fügen Sie es der erweiterten Liste in der hinzu .eslintrc Datei (stellen Sie sicher, dass es das letzte Element in der Liste ist):

{
"erweitert": [
"irgendeine-andere-Konfiguration-die-Sie-benutzen",
"schöner"
 ],
"Regeln": {
"Einzug": "Fehler"
 }
}

Jetzt deaktiviert ESLint alle Regeln, um die sich Prettier bereits kümmert, um Konflikte zu vermeiden.

Bereinigen Sie Ihre Codebasis mit Prettier und ESLint

Prettier ist ein ideales Tool, um Ihren Code zu bereinigen und eine konsistente Formatierung innerhalb eines Projekts zu erzwingen. Wenn Sie es so einstellen, dass es mit VS Code funktioniert, ist es immer in Reichweite.

ESLint ist ein unverzichtbares JavaScript-Tool, das Hand in Hand mit Prettier geht. Es bietet eine Menge Funktionen und Anpassungsoptionen, die über die grundlegende Formatierung hinausgehen. Erfahren Sie, wie Sie ESLint mit JavaScript verwenden, wenn Sie ein produktiverer Entwickler sein möchten.