Mehrere Prettier-Plugins nutzen: So bleibt Code konsistent und zeitsparend

In vielen Entwicklungsteams führt ein vermeintlich einfaches Code-Review plötzlich zu stundenlangen Diskussionen über Formattierungsdetails. Ein fehlendes Leerzeichen hier, ein überflüssiges Semikolon dort – und plötzlich geht es nicht mehr um die Logik, sondern um persönliche Vorlieben. Doch statt Entwickler für ihre Präferenzen zu kritisieren, sollte man die Werkzeuge hinterfragen, die solche Konflikte erst ermöglichen.

Prettier, kombiniert mit den passenden Plugins, setzt hier an und übernimmt die Formatierung vollständig. Während viele Tutorials diese Mehr-Plugin-Konfiguration nur am Rande erwähnen, zeigt sich: Die 30 Minuten zusätzliche Einrichtung sparen später unzählige Stunden.

💡 Die Kernidee: Wenn ein Entwicklungsteam nie wieder über Formatierung diskutieren muss, dann liegt das nicht an perfekten Menschen – sondern daran, dass eine Software diese Entscheidung übernommen hat.

Warum manuelle Formatierung scheitert – und Prettier hilft

Ohne automatisierte Formatierung entsteht selbst in kleinen Teams schnell Chaos. Zwei Entwickler mit unterschiedlichen Editor-Einstellungen generieren zwei Versionen derselben Datei – mal mit Leerzeichen vor Klammern, mal ohne, mal mit oder ohne abschließenden Kommas. Prettier eliminiert diese Variable: Jeder im Team erhält dasselbe Ergebnis, unabhängig von persönlichen Einstellungen.

Doch der wahre Vorteil offenbart sich erst bei genauerem Hinsehen. Bei einem Team mit 15 bis 20 Pull Requests pro Woche summieren sich die Minuten, die mit Formatierungsdebatten verloren gehen, auf etwa einen gesamten Ingenieur-Tag pro Sprint. Diese Zeit ist weg – es sei denn, Prettier wird nahtlos in den Workflow integriert.

Die Erweiterungsmöglichkeiten von Prettier: Mehr als nur JavaScript

Die Basisversion von Prettier unterstützt bereits eine Vielzahl von Sprachen wie JavaScript, TypeScript, CSS, HTML, Markdown, JSON, YAML und GraphQL. Doch echte Projekte bestehen selten aus einem einzigen Technologie-Stack. Ein PHP-Backend hier, ein Go-Microservice dort, XML-Konfigurationen, die niemand anfassen möchte – hier kommen Plugins ins Spiel.

Ein gut konfigurierter Satz an Plugins sorgt dafür, dass Prettier nicht nur JavaScript-Dateien formatiert, sondern auch:

• SCSS- und Less-Dateien konsistent darstellt
• PHP-Syntax korrekt behandelt
• GraphQL-Schemas in lesbarer Form ausgibt
• YAML- und XML-Dateien strukturiert

Doch Vorsicht: Nicht jedes Plugin ist gleich gut gewartet. Besonders bei Framework-spezifischen Plugins (z. B. für React) sollte man prüfen, ob das letzte Update nicht länger als 18 Monate zurückliegt. Ansonsten riskiert man, dass neuere Sprachfeatures nicht korrekt formatiert werden.

Wie Prettier intern funktioniert: Warum Plugins entscheidend sind

Viele gehen fälschlicherweise davon aus, dass Prettier wie ein Linter arbeitet – also bestehende Formatierungsfehler korrigiert. Doch das ist nicht der Fall. Stattdessen parst Prettier den Quellcode in einen abstrakten Syntaxbaum – eine strukturierte Repräsentation des Codes ohne jegliche Formatierung. Anschließend generiert es daraus eine komplett neu formatierte Version, strikt nach den Regeln von Prettier.

Das erklärt, warum die Konsistenz von Prettier so hoch ist: Es ersetzt die Formatierung, statt sie nur zu reparieren. Gleichzeitig wird klar, warum Parser so wichtig sind. Ohne einen passenden Parser für eine Sprache kann Prettier diese nicht formatieren. Jede Sprache benötigt ihren eigenen Parser, entweder bereits in Prettier integriert oder über ein Plugin nachrüstbar.

Warum mehrere Plugins? Der Unterschied zwischen "funktioniert" und "fühlt sich richtig an"

Ein generischer Formatter, der auf Python-Code angewendet wird, produziert zwar syntaktisch korrekten, aber stilistisch unpassenden Code – für erfahrene Python-Entwickler sofort erkennbar. Gleiches gilt für Go, Ruby oder andere Sprachen. Ein gut implementiertes Sprach-Plugin hingegen trägt die Formatierungsgewohnheiten der jeweiligen Community mit sich. Es sorgt nicht nur für Konsistenz, sondern dafür, dass der Code sich natürlich anfühlt.

Ein Beispiel: Ein React-Plugin versteht nicht nur die JSX-Syntax, sondern auch die Konventionen für selbstschließende Tags, die Reihenfolge von Props und die korrekte Klammerung bei mehrzeiligen JSX-Ausdrücken. Genau diese Details machen den Unterschied zwischen einem "funktionierenden" und einem tatsächlichen produktiven Codebase aus.

Praktische Einrichtung: Drei Schritte zur perfekten Formatierung

Die Einrichtung von Prettier mit mehreren Plugins folgt einem einfachen, aber wirksamen Muster. Drei Schritte – mehr nicht.

Schritt 1: Alle Abhängigkeiten auf einen Schlag installieren

npm install --save-dev prettier \
  prettier-plugin-tailwindcss \
  @prettier/plugin-php \
  prettier-plugin-organize-imports

Mit diesem Befehl werden Prettier selbst sowie alle benötigten Plugins in einem einzigen Schritt installiert. Die Verwendung des Backslash-Escape-Zeichens sorgt dafür, dass der Befehl auch in der Konsole korrekt ausgeführt wird.

Schritt 2: Eine zentrale Konfigurationsdatei anlegen

Erstellen Sie entweder eine .prettierrc-Datei oder eine prettier.config.js im Projektverzeichnis. Beide Varianten funktionieren, wobei die JavaScript-Variante mehr Flexibilität bietet.

Beispiel für `.prettierrc` (JSON-Format):

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "plugins": [
    "prettier-plugin-tailwindcss",
    "@prettier/plugin-php",
    "prettier-plugin-organize-imports"
  ]
}

Wichtige Einstellungen im Überblick:

• `semi`: Steuert, ob Semikolons verwendet werden sollen
• `singleQuote`: Legt einfache Anführungszeichen als Standard fest
• `trailingComma`: Definiert, wann abschließende Kommas erlaubt sind
• `printWidth`: Bestimmt die maximale Zeilenlänge vor einem Zeilenumbruch
• `plugins`: Liste aller benötigten Plugins

Schritt 3: Integration in den Workflow

Prettier kann auf verschiedene Weise in den Entwicklungsprozess eingebunden werden:

• Manuell über die Konsole: npx prettier --write . formatiert alle Dateien im Projektverzeichnis.
• Als Git-Hook: Automatische Formatierung vor jedem Commit verhindert inkonsistente Dateien im Repository.
• Editor-Integration: Plugins für VS Code, WebStorm und andere IDEs sorgen für Echtzeit-Formatierung beim Speichern.

Die langfristigen Vorteile: Zeit, Qualität und Teamzufriedenheit

Jede Entscheidung, die Entwickler treffen müssen, hat einen kognitiven Preis. Wenn man eine ganze Kategorie von Low-Level-Entscheidungen – etwa die Position eines Leerzeichens – aus dem Arbeitsfluss entfernt, gewinnt das Team diese Aufmerksamkeit zurück. Es geht nicht nur um weniger Minuten, die mit Formatierung verbracht werden, sondern um weniger Unterbrechungen des Arbeitsflusses.

Ein konsistentes Code-Format macht nicht nur Reviews schneller, sondern erhöht auch die Lesbarkeit. Externe Entwickler, die zum ersten Mal den Code lesen, verstehen ihn schneller. Bei nächtlichen Notfällen, wenn jemand um 3 Uhr morgens eine kritische Datei öffnet, ist jede Sekunde wertvoll – und eine einheitliche Formatierung spart diese Sekunden.

Prettier mit der richtigen Plugin-Konfiguration ist mehr als ein Werkzeug. Es ist eine Investition in die Produktivität und Zufriedenheit des gesamten Teams. Die initiale Einrichtung mag 30 Minuten dauern, doch die Rendite zeigt sich in jedem Review, jedem Commit und jedem neuen Teammitglied, das sich schneller zurechtfindet.