Minifizierten Code lesbar machen
Ein Kunde schickt dir ein Stylesheet in einer einzigen Zeile, oder eine API liefert JSON ohne einen Umbruch. Füge es ein, und der Code erscheint rechts sauber eingerückt. Dieser Code-Beautifier nutzt Prettier 3 direkt auf der Seite und kennt JavaScript (mit JSX), JSON, CSS, SCSS, LESS und HTML.
Drei Dinge, die du ändern kannst, bevor du kopierst
- Füge den Code links ein oder lade mit Beispielcode ein Beispiel für die gewählte Sprache.
- Lass Sprache auf „Automatisch erkennen“ oder wähle sie selbst. Die erkannte Sprache steht unter dem Eingabefeld.
- Stelle Einrückung (2 Leerzeichen, 4 Leerzeichen, Tabulator) und Zeilenbreite (80, 100, 120) ein. Für JavaScript kommen Anführungszeichen, Semikolons, Komma am Ende und Leerzeichen in Klammern dazu.
- Prüfe rechts das Ergebnis und die Zeilenzahl vorher und nachher. Dann klickst du auf Kopieren oder Herunterladen. Die Datei heißt
formatted.js,.json,.css,.scss,.lessoder.html.
Prettier gibt den Stil vor, nicht dein Team
Prettier liest den Code ein und druckt ihn nach eigenen Regeln neu. Deine alten Leerzeichen und Umbrüche zählen nicht, daher liefern zwei verschieden eingerückte Fassungen dasselbe Ergebnis. Mit den Standardwerten wandelt es einfache in doppelte Anführungszeichen um, ergänzt fehlende Semikolons und setzt nach dem letzten Eintrag einer mehrzeiligen Liste ein Komma. Alles drei lässt sich abschalten. Kommentare bleiben erhalten. Fehler im Code repariert Prettier nicht.
Ein Detail verwirrt bei JSON und JavaScript-Objekten: Steht der erste Schlüssel in derselben Zeile wie die öffnende Klammer und passt das Objekt in die Zeilenbreite, bleibt es einzeilig. Schreib den ersten Schlüssel in eine neue Zeile, dann bleibt das Objekt aufgeklappt.
Warum Optionen ausgegraut sind
Was für eine Sprache nicht gilt, ist deaktiviert, und ein Hinweis unter den Einstellungen nennt es. JSON kennt weder einfache Anführungszeichen noch ein Komma am Ende. Bei CSS, SCSS und LESS entfallen Semikolons, Kommas und Klammerabstand. HTML nimmt eine Sonderrolle ein: Für das Markup gibt es keine Einstellung, aber Script- und Style-Blöcke im Dokument folgen deinen Optionen.
Erkennung, Syntaxfehler und die 2-Millionen-Grenze
Die automatische Erkennung ist eine kurze Schätzung. Beginnt der Text mit <, ist es HTML. Beginnt er mit einer Klammer und lässt sich als JSON lesen, ist es JSON. Regeln wie a { color: red; } ohne function, const oder => gelten als Stylesheet, wobei SCSS- und LESS-Variablen die beiden Dialekte verraten. Alles andere ist JavaScript. Liegt die Schätzung daneben, wähle die Sprache selbst.
Lässt sich der Code nicht lesen, siehst du Zeile, Spalte und die erste Zeile der Prettier-Meldung. Eingaben über 2.000.000 Zeichen lehnt das Tool ab. TypeScript, Vue und Markdown gehören nicht dazu.
Wohin dein Code beim Formatieren geht
Beim ersten Mal lädt die Seite die nötigen Prettier-Dateien von dieser Website. Danach läuft die Formatierung lokal, und dein Code wird nicht verschickt. Im Netzwerk-Tab deines Browsers kannst du das beim Klick prüfen. Das Tool liest und druckt den Text nur und führt ihn nie aus. Kopieren nutzt die Zwischenablage, Herunterladen speichert eine Datei aus der Seite.