So nutzt du: JavaScript Formatierer
- Füge JavaScript (oder JSON/JSX) in JavaScript-Eingabe ein, ziehe eine
.js-Datei hinein oder klicke auf Beispiel. - Wähle die Einrückung, optional eine Zeilenumbruchbreite und deinen Klammerstil. Die Ausgabe aktualisiert sich sofort.
- Kopiere oder lade das Ergebnis herunter. Nutze den Modus Minifizieren, um Kommentare und Leerzeichen aus einem kleinen Skript zu entfernen.
Was ist ein JavaScript Formatter?
Ein JavaScript Formatter (oder Beautifier) rückt Code neu ein und setzt Anweisungen, Objekteigenschaften und Blöcke in eigene Zeilen. Seine häufigste Aufgabe ist es, Produktions-Bundles zu entpacken, damit du sie beim Debuggen lesen kannst. Genauso praktisch ist er, um einen Snippet von Stack Overflow, ein Bookmarklet oder Code aus einem Chat aufzuräumen. Dieses Tool nutzt js-beautify, das moderne Syntax versteht: Arrow Functions, Klassen, Template-Literale, async/await, optional Chaining, ES-Module und JSX.
Klammerstile
| Option | Ergebnis |
|---|---|
| Gleiche Zeile (K&R / „1TBS“) | if (ok) { – die Konvention in den meisten JavaScript-Styleguides und bei Prettier. |
| Gleiche Zeile, Inline beibehalten | Wie oben, aber kurze Blöcke wie { a: 1 } bleiben in einer Zeile. |
| Nächste Zeile (Allman) | Öffnende Klammern stehen in einer eigenen Zeile, häufig in C#-Projekten. |
| else in neuer Zeile | } und else stehen in getrennten Zeilen (ähnlich Stroustrup). |
Formatieren ist kein Deobfuscieren
Minifier wie Terser oder esbuild benennen lokale Variablen in einzelne Buchstaben um (function(e,t){…}). Formatieren stellt das Layout wieder her, kann aber weder die ursprünglichen Namen noch Kommentare zurückholen – diese Informationen sind verloren. Veröffentlicht die Seite Source Maps (//# sourceMappingURL=), können die DevTools deines Browsers stattdessen die Originalquellen anzeigen. Bewusst verschleparter Code (Stringarrays, eval-Packing) bleibt auch formatiert schwer lesbar.
Über den Minifier
Der Modus Minifizieren ist ein sicherer Minifier für Leerzeichen und Kommentare, kein vollständiger Compressor. Er zerlegt deinen Code korrekt in Tokens (Strings, Template-Literale, reguläre Ausdrücke) und entfernt Kommentare und Leerzeichen. Überall dort, wo das Entfernen einer Zeilenumbruch die automatische Semikolon-Einfügung verändern könnte – etwa nach return oder vor ++ – bleibt der Umbruch erhalten. Bei jedem Ergebnis laufen zwei Sicherheitsprüfungen: Der Token-Strom muss mit der Eingabe identisch sein, und die Ausgabe muss sich noch parsen lassen. Rechne mit 20–40 % Ersparnis. Für Produktions-Bundles bringt ein Build-Tool wie Terser oder esbuild deutlich mehr, weil es außerdem Variablen umbenennt und toten Code entfernt.
Häufige Probleme
- „Lässt sich nicht als reines JavaScript parsen“ – wird bei TypeScript, JSX oder echten Syntaxfehlern angezeigt. Formatieren funktioniert trotzdem; Minifizieren verlangt gültiges JavaScript.
- JSON lässt sich hier problemlos formatieren, der JSON Formatter prüft es zusätzlich und zeigt dir den genauen Fehler.
- Willst du eine Datei vor und nach einer Änderung vergleichen? Füge beide Versionen in den Diff Checker ein.
Auch gesucht als: js beautifier, javascript formatter online, js formatter, javascript unminify, javascript beautifier, js minifier, javascript minifier online, jsx formatter.
Passende Tools zu: JavaScript Formatierer
- Code zu Bild — Füge einen Code-Ausschnitt ein und erhalte in Sekunden einen polierten Code-Screenshot: Syntax-Highlighting für JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go und PHP, eine Auswahl an Themes, einen Fensterrahmen mit Dateiname, einen Verlauf oder transparenten Hintergrund, Innenabstand und Zeilennummern.
- HTML Formatter — Füg minifiziertes oder unübersichtliches Markup ein und erhalte sauber und einheitlich eingerücktes HTML – inklusive eingebetteter <style>- und <script>-Blöcke.
- CSS Formatter — Verwandle ein minifiziertes Stylesheet in gut lesbares CSS mit einer Eigenschaft pro Zeile und sauber verschachtelten @media-Blöcken.
- Regex-Tester — Gib ein Muster ein und sieh zu, wie Übereinstimmungen in deinem Testtext in Echtzeit hervorgehoben werden.
Häufige Fragen
Kann ich damit JavaScript von einer Website entpacken?
.min.js-Datei ein, und er wird lesbar formatiert. Vom Minifier verkürzte Variablennamen (wie e, t, n) lassen sich nicht wiederherstellen, und Kommentare sind endgültig weg.