So installieren Sie Prettier in Ihrer Codebasis und VSCode

Hübscher

Prettier ist ein eigenständiger Codeformatierer mit Unterstützung für mehrere Sprachen.

Seit ich Prettier verwende, möchte ich nicht mehr ohne Code arbeiten. Obwohl ich anfangs einige Bedenken hatte (z. B. die erzwungene Linienbreite), habe ich mich in die Standardeinstellungen verliebt.

Installieren und konfigurieren Sie Prettier

Die Installation von Prettier ist einfach. Hier sind die Schritte in Kürze. Sie können auch der offiziellen Installationsanleitung folgen.

Zuerst müssen Sie die genaue Version von Prettier lokal installieren. Dadurch wird sichergestellt, dass jeder die exakt gleiche Version zum Formatieren des Codes im Projekt verwendet.

npm install --save-dev --save-exact prettier

Als nächstes müssen Sie die Prettier-Konfigurationsdateien .prettierrc und .prettierignore (optional) im Stammverzeichnis Ihres Projekts erstellen.

Sie können diesen Befehl ausführen, um die Standardkonfigurationsdatei mit einem leeren Objekt zu erstellen:

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

Die .prettierignore-Datei funktioniert auf die gleiche Weise wie eine .gitignore-Datei. Tatsächlich befolgt Prettier bereits die in Ihrem .gitignore festgelegten Regeln, sodass Sie möglicherweise nicht einmal eine benötigen:

? Standardmäßig ignoriert prettier Dateien in Versionskontrollsystemverzeichnissen („.git“, „.sl“, „.svn“ und „.hg“) und node_modules (es sei denn, die CLI-Option --with-node-modules ist angegeben). Prettier befolgt auch die in der Datei „.gitignore“ angegebenen Regeln, wenn sie im selben Verzeichnis vorhanden ist, in dem sie ausgeführt wird.

Hier ist ein Beispiel für .prettierignore, um alle HTML-Dateien zu überspringen:

# Ignore all HTML files:
**/*.html

Formatieren Sie den gesamten vorhandenen Code

Bevor Sie mit der Formatierung der gesamten Codebasis fortfahren, übernehmen Sie Ihre Änderungen. Ich empfehle außerdem, alle offenen Pull-Anfragen zusammenzuführen, da viele Dateien betroffen sein werden.

Führen Sie nun diesen Befehl im Stammordner Ihres Projekts aus, um alle Dateien zu formatieren:

npx prettier . --write

ℹ️ Durch die Verwendung von npx wird hier sichergestellt, dass die lokal installierte Version von Prettier ausgeführt wird. Dies ist wichtig, wenn Sie Prettyer auch global installiert haben.

Jetzt sollten alle Ihre Projektdateien gut formatiert sein. ?✨

Installieren Sie die Prettier VSCode-Erweiterung

Als nächstes können Sie ein Prettier-Plugin für Ihre IDE einrichten. Ich verwende Visual Studio Code, es gibt aber auch Plugins für viele andere Editoren.

Für VSCode installieren Sie diese Erweiterung: esbenp.prettier-vscode

Danach können Sie zu den VSCode-Einstellungen navigieren und nach „Formatierer“ suchen. Hier können Sie Standardformatierer auf esbenp.prettier-vscode setzen.

Wenn Sie jedoch wie ich an vielen verschiedenen Projekten arbeiten und nicht alle über Prettier verfügen, werden Sie es wahrscheinlich bei der Standardeinstellung (Keine) belassen.

Stattdessen können Sie den Standardformatierer in der lokalen VSCode-Einstellungsdatei (.vscode/settings.json) der Projekte festlegen, die Sie prettier verwenden.

Um sicherzustellen, dass alle sprachspezifischen globalen VSCode-Einstellungen von der lokalen Konfiguration überschrieben werden, müssen Sie möglicherweise defaultFormatter für jede Sprache einzeln angeben.

Hier ist ein Beispiel .vscode/settings.json als Referenz:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Das obige ist der detaillierte Inhalt vonSo installieren Sie Prettier in Ihrer Codebasis und VSCode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!