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!