Code Formatter (Prettier) — Code-Formatierer

Was dieser Code-Formatierer macht

Dieses Tool führt Prettier, den meinungsstarken Code-Formatierer, der in weiten Teilen des JavaScript-Ökosystems im Einsatz ist, direkt in deinem Browser aus. Prettier rückt nicht einfach Zeilen neu ein: Es zerlegt deinen Quelltext in einen Syntaxbaum und gibt ihn nach einem kleinen Satz von Regeln komplett neu aus. Deshalb ist das Ergebnis einheitlich, egal wie chaotisch die Eingabe war – lange Argumentlisten werden umbrochen, Objekte werden nur dann auf mehrere Zeilen verteilt, wenn sie die Zeilenbreite überschreiten, Anführungszeichen und Semikolons folgen einer einzigen Konvention und Leerzeichen am Zeilenende verschwinden.

Du kannst JavaScript, JSX, TypeScript und TSX formatieren, die drei wichtigsten Stylesheet-Dialekte (CSS, SCSS und Less), HTML mit eingebetteten Styles und Skripten, JSON, GraphQL-Schemas und -Abfragen, Markdown-Dokumente sowie YAML-Konfigurationsdateien. Jede Sprache nutzt ihr eigenes Prettier-Plugin, und es wird nur das Plugin geladen, das du wirklich brauchst – so bleibt die Seite schlank, bis du tatsächlich etwas formatierst.

Die Optionen im Überblick

Print width (Zeilenbreite) ist die Zeilenlänge, unter der Prettier zu bleiben versucht; 80 ist der Standard, 100 oder 120 sind in Teams mit breiten Monitoren üblich. Tab width legt fest, wie viele Leerzeichen eine Einrückungsebene umfasst, und Indent with schaltet zwischen Leerzeichen und echten Tabulatorzeichen um. Semicolons steuert, ob Anweisungen in JavaScript und TypeScript mit einem Semikolon enden; ist die Option aus, setzt Prettier nur dort eines, wo es nötig ist, um Mehrdeutigkeiten zu vermeiden. Single quotes bevorzugt bei Strings ' statt ", sofern dadurch kein Escaping nötig wird. Diese Optionen entsprechen eins zu eins den Einstellungen in einer .prettierrc-Datei, sodass du die Konfiguration deines Projekts nachbilden kannst.

Privat und praktisch

Alles passiert lokal: Der Formatierer lädt deinen Code nie hoch, speichert ihn nicht und schickt ihn an keine API. Damit eignet er sich auch für proprietären Quellcode, Konfigurationsdateien mit internen Hostnamen oder Snippets, die du während eines Produktionsvorfalls kopiert hast. Findet der Parser einen Syntaxfehler, zeigt die Meldung Zeile und Spalte an und der Cursor springt an genau diese Stelle der Eingabe – ein schneller Weg, eine fehlende Klammer in einer großen JSON- oder YAML-Datei aufzuspüren. Im Arbeitsalltag gehört Prettier in deinen Editor und deine CI; diese Seite ist ideal, wenn du an einem Rechner ohne deine Toolchain sitzt, ein Snippet aus dem Chat prüfst oder Code aufräumen willst, bevor du ihn in eine Dokumentation einfügst.