Formatieren Sie Ihren Code mit Prettier Like a Pro

Sei nicht wie dieser Kerl – sei kein Idiot.

Warum formatierter Code benötigt wird

Formatierung hilft dabei, die von Ihnen geschriebenen Codezeilen zu strukturieren und sie so leichter lesbar und verständlich zu machen. Dies ist von entscheidender Bedeutung, wenn an einer Codebasis mit mehreren Entwicklern gearbeitet wird, die alle ihren eigenen Stil und ihre eigenen Vorlieben für die Struktur ihres Codes haben. Eine einheitlich formatierte Codebasis hilft, Probleme beim Zusammenführen zu vermeiden und schafft einen Standard, auf dem Sie und Ihr Team aufbauen können.

Es gibt mehrere Möglichkeiten, eine Formatierungsvorlage für sich und Ihr Team einzurichten. In diesem Artikel untersuchen wir eine der beliebtesten Optionen: Hübscher.

Laut der Umfrage „State of JS 2021“ verwenden 83 % der Befragten regelmäßig Prettier als Formatierungsprogramm ihrer Wahl, ein Anstieg von 13 % gegenüber der Vorjahresumfrage. Viele prominente Teams – etwa Facebook, Webflow, Jest, Dropbox, Spotify und PayPal – verwenden Prettier, um eine konsistente Formatierung in ihren Codebasen sicherzustellen.

Prettier kann auf verschiedene Arten konfiguriert und ausgeführt werden. In diesem Beispiel zeige ich, wie man Prettier mit einem Git-Hook für die Automatisierung in VS Code einrichtet. Weitere Beispiele und Konfigurationen finden Sie in der Dokumentation von Prettier.

---

Bevor Sie beginnen

Obwohl dies nicht erforderlich ist, ist es hilfreich zu verstehen, welche Optionen Sie konfigurieren und was sie bewirken. Sie müssen zwei Dateien erstellen und diese auf der Stammebene Ihres Projekts platzieren. Beachten Sie, dass diese Formatierungsoptionen projektspezifisch sind. Sie müssen diesen Vorgang daher für jedes neue Projekt wiederholen. Diese Dateien enthalten die Optionen, die Sie auswählen können, und Sie können Optionen ändern oder entfernen, die nicht den Anforderungen Ihres Projekts entsprechen.

---

.prettierrc

Diese Datei, die sich auf der Stammebene Ihres Projekts befindet, definiert die grundlegenden Formatierungsregeln für Prettier. Es verwendet eine JSON-Struktur und kann an die Standards Ihres Teams angepasst werden. Hier ist ein Beispiel:

---

.editorconfig

Diese Datei gewährleistet die Konsistenz Ihrer Editoreinstellungen, noch bevor Prettier ausgeführt wird. Es deckt auch Optionen ab, die .prettierrc nicht bietet. Hier ist ein Beispiel:

---

Einrichten des Workflows

Der Einfachheit halber können beide Dateien am Ende des Artikels kopiert werden. Sobald Sie die Dateien .prettierrc und .editorconfig erstellt und konfiguriert haben, können Sie fortfahren. Installieren Sie diese drei npm-Pakete, um den Formatierungsprozess zu optimieren:

npm install --save-dev prettier lint-staged husky

Dann initialisieren Sie Husky

npx husky init

Mit diesen Schritten wird Folgendes erreicht:

• Installieren Sie Prettier zur Formatierung.
• Installieren Sie lint-staged, um vor dem Festschreiben nur bereitgestellte Dateien zu formatieren.
• Installieren Sie Husky, um Git-Hooks für die Automatisierung einzurichten.
• Initialisieren Sie Husky, wodurch die erforderlichen Abhängigkeiten und eine Pre-Commit-Datei erstellt werden.

---

Neue Dateien konfigurieren

Zwei zusätzliche Dateien müssen konfiguriert werden: pre-commit und .lintstagedrc

vorab festlegen

Diese von Husky automatisch erstellte Datei leitet den Automatisierungsprozess. Es befindet sich im Husky-Ordner, der während der Initialisierung erstellt wurde. Konfigurieren Sie es wie unten gezeigt:

.lintstagedrc

Erstellen Sie diese Datei (ohne Erweiterung wie .editorconfig und .prettierrc) im Stammordner des Projekts. Es schränkt den Umfang der Dateien in schöneren Formaten durch den Git-Hook ein. Unten sehen Sie ein Beispiel, das Sie jedoch je nach Dateityp Ihres Projekts anpassen können:

---

Testen des Workflows

Sobald alle vier Dateien vorhanden sind – .prettierrc, .editorconfig, .lintstagedrc und pre-commit – können Sie den Workflow testen.

1. Nehmen Sie eine einfache Formatierungsänderung an einer .js-Datei vor (fügen Sie beispielsweise unnötige Leerzeichen oder Einzüge hinzu).
2. Stellen Sie Ihre Änderungen bereit: git add -A
3. Commit mit einer Testnachricht git commit -m „Formatierungsworkflow testen“

Wenn alles richtig eingerichtet wurde, sollte Ihr Terminal eine Erfolgsmeldung anzeigen und die Formatierungsänderungen werden automatisch übernommen.

---

Das ist es!

Sie haben jetzt eine einfache, aber effektive Möglichkeit, Prettier und Git-Hooks zu nutzen, um die Formatierung Ihres Codes zu automatisieren.

Ich würde gerne Ihre Meinung hören! Lassen Sie mich in den Kommentaren wissen, ob dies hilfreich war oder ob Sie auf Probleme stoßen – ich bin hier, um Ihnen zu helfen!

---

Beispiele für Kopieren und Einfügen von Dateien

.prettierrc

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

.editorconfig

# Top-most EditorConfig file
root = true

# Global settings
[*]
indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# Overrides
[*.md]
trim_trailing_whitespace = false
max_line_length = off

[*.yml]
indent_style = space
indent_size = 2

[*.ts]
indent_style = space
indent_size = 4

[Makefile]
indent_style = tab

[*.html]
indent_size = 2

[*.json]
indent_size = 2

Das obige ist der detaillierte Inhalt vonFormatieren Sie Ihren Code mit Prettier Like a Pro. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!