UTILS.
100 % im Browser
🎨

JavaScript-Beautifier / -Formatierer

Formatiere minifiziertes oder unaufgeräumtes JavaScript und JSON mit konsistenter Einrückung, Abständen und Zeilenumbrüchen – ein handgeschriebener Formatierer, der vollständig im Browser läuft.

— Ausgabe erscheint hier —

Über dieses Tool

Der JavaScript-Beautifier formatiert minifiziertes, einzeiliges oder inkonsistent eingerücktes JavaScript und JSON zu sauberem, lesbarem Quellcode mit einheitlicher Einrückung und Abständen um. Er ist praktisch, um eine gebündelte Bibliothek zu lesen, ein kopiertes Snippet aufzuräumen oder einen JSON-Blob zu untersuchen. Alles geschieht in deinem Browser – der Code wird nur als Text neu formatiert, niemals ausgeführt, es gibt also kein eval, kein new Function und nichts wird hochgeladen.

Der Formatierer ist ein handgeschriebener Tokenizer, kein Regex-Trick: Er scannt den Quellcode in Tokens, während er das Innere von Strings, Template-Literalen, regulären Ausdrücken sowie Zeilen-/Blockkommentaren korrekt überspringt, sodass Anführungszeichen und Schrägstriche darin nie mit Struktur verwechselt werden. Eine klassische Lookbehind-Heuristik unterscheidet einen Divisionsoperator von einem Literal für reguläre Ausdrücke. Der Token-Strom wird dann neu ausgegeben mit Zeilenumbrüchen nach '{', '[' und ';', ausgerückten Zeilen vor '}' und ']', einem Element pro Zeile innerhalb von Objekt- und Array-Literalen und einem einzelnen Leerzeichen um Operatoren und nach Schlüsselwörtern.

Wähle eine Einrückung von 2 Leerzeichen, 4 Leerzeichen oder einem Tab sowie einen Klammerstil: Kollabieren behält die öffnende Klammer in derselben Zeile (K&R / 1TBS), während Erweitern sie in eine eigene Zeile verschiebt (Allman). Da das Tool String- und Regex-Inhalte byteweise bewahrt, ist der neu formatierte Code semantisch identisch mit der Eingabe. Kopiere das Ergebnis direkt in deinen Editor.

Häufig gestellte Fragen

Führt es meinen Code aus oder wertet es ihn aus?
Nein. Der Beautifier tokenisiert deinen Quellcode nur und gibt ihn als Text neu aus. Er ruft niemals eval oder new Function auf und führt den Code nie aus, sodass das Einfügen von nicht vertrauenswürdigem oder proprietärem JavaScript sicher ist. Alle Arbeit bleibt in deinem Browser.
Funktioniert es auch mit JSON?
Ja. JSON ist eine Teilmenge der JavaScript-Syntax, sodass das Einfügen eines minifizierten JSON-Objekts oder -Arrays es in eingerückte Form mit einem Schlüssel pro Zeile umformt. Strings, Zahlen und verschachtelte Strukturen werden genauso formatiert wie in JavaScript.
Was ist der Unterschied zwischen den Klammerstilen?
Kollabieren (K&R / 1TBS) behält die öffnende Klammer in derselben Zeile wie die Anweisung, z. B. 'if (x) {'. Erweitern (Allman) setzt die öffnende Klammer in eine eigene Zeile darunter. Beide erzeugen identischen, gültigen Code – nur das Layout unterscheidet sich.
Ändert es, was mein Code tut?
Nein. Nur Leerzeichen, Einrückung und Zeilenumbrüche ändern sich. Die Inhalte von Strings, Template-Literalen und regulären Ausdrücken bleiben exakt erhalten, sodass die neu formatierte Ausgabe funktional identisch mit dem ursprünglichen Quellcode ist.

Weitere Tools