Zum Hauptinhalt springen

Installation

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Installiere Prettier zunächst lokal:

npm install --save-dev --save-exact prettier@%PRETTIER_VERSION%

Erstelle dann eine leere Konfigurationsdatei, um Editoren und anderen Tools mitzuteilen, dass du Prettier verwendest:

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

Erstelle als Nächstes eine .prettierignore-Datei, um der Prettier-CLI und Editoren mitzuteilen, welche Dateien nicht formatiert werden sollen. Hier ist ein Beispiel:

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
Tipp

Prettier befolgt Regeln aus .gitignore, falls diese im selben Verzeichnis existiert, von dem aus es ausgeführt wird. Du kannst deine .prettierignore-Datei auch auf .eslintignore basieren (falls vorhanden).

Weiterer Tipp

Falls dein Projekt noch nicht bereit ist, bestimmte Dateien wie HTML-Dateien zu formatieren, füge *.html hinzu.

Formatiere nun alle Dateien mit Prettier:

npx prettier . --write
Info

What is that npx thing? npx ships with npm and lets you run locally installed tools. We’ll leave off the npx part for brevity throughout the rest of this file!

Warnung

If you forget to install Prettier first, npx will temporarily download the latest version. That’s not a good idea when using Prettier, because we change how code is formatted in each release! It’s important to have a locked down version of Prettier in your package.json. And it’s faster, too.

prettier --write . eignet sich hervorragend, um alles zu formatieren, kann bei großen Projekten jedoch etwas dauern. Du kannst prettier --write app/ ausführen, um ein bestimmtes Verzeichnis zu formatieren, oder prettier --write app/components/Button.js für eine bestimmte Datei. Alternativ verwende ein Glob-Muster wie prettier --write "app/**/*.test.js", um alle Tests in einem Verzeichnis zu formatieren (siehe fast-glob für die unterstützte Glob-Syntax).

Falls du eine CI-Umgebung eingerichtet hast, führe folgenden Befehl darin aus, um sicherzustellen, dass alle Prettier verwenden. Dies vermeidet Merge-Konflikte und andere Kollaborationsprobleme!

npx prettier . --check

--check funktioniert ähnlich wie --write, überprüft jedoch nur, ob Dateien bereits formatiert sind, statt sie zu überschreiben. prettier --write und prettier --check sind die gängigsten Methoden, Prettier auszuführen.

Editor einrichten​

Die Formatierung über die Kommandozeile ist ein guter Einstieg, aber das volle Potenzial von Prettier entfaltet sich, wenn du es über deinen Editor ausführst – entweder per Tastenkürzel oder automatisch beim Speichern einer Datei. Wenn eine Zeile beim Programmieren so lang geworden ist, dass sie nicht mehr auf den Bildschirm passt, drücke einfach eine Taste und sieh zu, wie sie magisch in mehrere Zeilen umgebrochen wird! Oder wenn du Code einfügst und die Einrückung durcheinander gerät, lass Prettier dies beheben, ohne deinen Editor zu verlassen.

Siehe Editor-Integration für die Einrichtung deines Editors. Falls dein Editor Prettier nicht unterstützt, kannst du stattdessen Prettier mit einem Datei-Watcher ausführen.

Hinweis

Überspringe nicht die lokale Installation! Editor-Plugins verwenden deine lokale Prettier-Version und stellen sicher, dass du in jedem Projekt die korrekte Version nutzt. (Du möchtest nicht, dass dein Editor versehentlich viele Änderungen verursacht, weil er eine neuere Prettier-Version als dein Projekt verwendet!)

Und Prettier über die Kommandozeile ausführen zu können, bleibt eine gute Rückfalloption und ist für CI-Umgebungen notwendig.

ESLint (und andere Linter)​

Falls du ESLint verwendest, installiere eslint-config-prettier, damit ESLint und Prettier harmonisch zusammenarbeiten. Dies deaktiviert alle ESLint-Regeln, die unnötig sind oder mit Prettier kollidieren könnten. Für Stylelint gibt es eine ähnliche Konfiguration: stylelint-config-prettier

(Siehe Prettier vs. Linter für mehr über Formatierung vs. Linting, Integration mit Lintern für detaillierte Informationen zur Konfiguration deiner Linter und Verwandte Projekte für weitere Integrationsmöglichkeiten, falls benötigt.)

Git-Hooks​

Zusätzlich zur Ausführung von Prettier über die Kommandozeile (prettier --write), der Formatprüfung in CI und dem Einsatz im Editor, nutzen viele Entwickler Prettier auch als Pre-Commit-Hook. So werden alle Commits automatisch formatiert, ohne auf den CI-Build warten zu müssen.

So kannst du beispielsweise Prettier vor jedem Commit ausführen:

  1. Installiere husky und lint-staged:
npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"
  1. Füge Folgendes zu deiner package.json hinzu:
{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}
Hinweis

Wenn du ESLint verwendest, stelle sicher, dass lint-staged ESLint VOR Prettier ausführt, nicht danach.

Weitere Details findest du unter Pre-Commit Hook.

Zusammenfassung​

Zusammenfassend haben wir gelernt:

  • Installiere eine exakte Version von Prettier lokal in deinem Projekt. Dies stellt sicher, dass alle Teammitglieder dieselbe Prettier-Version nutzen. Selbst ein Patch-Release kann geringfügige Formatierungsänderungen verursachen – unterschiedliche Versionen würden zu ständigem Hin-und-Her-Formatieren führen.

  • Füge eine .prettierrc hinzu, um deinen Editor über die Prettier-Nutzung zu informieren.

  • Erstelle eine .prettierignore, die deinem Editor mitteilt, welche Dateien nicht formatiert werden sollen. Außerdem ermöglicht sie das Ausführen von prettier --write . für das gesamte Projekt (ohne ungewollte Dateien zu verändern oder bei generierten Dateien Probleme zu verursachen).

  • Führe prettier --check . in CI aus, um die konsistente Formatierung deines Projekts sicherzustellen.

  • Nutze Prettier direkt im Editor für optimale Ergebnisse.

  • Verwende eslint-config-prettier für harmonisches Zusammenspiel von Prettier und ESLint.

  • Richte einen Pre-Commit-Hook ein, um formatierte Commits zu garantieren.