JavaScript-Formatierer & Verschönerer

Fügen Sie JavaScript-Code (auch minimierte Dateien) ein und erhalten Sie eine saubere, eingerückte Version. Perfekt für die Analyse von komprimiertem Produktionscode.

Funktionen

Umschalten zwischen Verschönern und Minifizieren
Individuelle Einrückung
Syntaxhervorhebung

Anleitung

1. Fügen Sie JavaScript in das Eingabefeld links ein.

2. Klicken Sie auf Formatieren zum Verschönern oder Minifizieren zum Komprimieren.

3. Kopieren Sie die formatierte Ausgabe.

Über dieses Werkzeug

Minifizierte Skripte, aus einem Chat eingefügter Code oder ein im Browser geöffnetes Bundle sind in einer einzigen Zeile schwer zu lesen. Dieser Formatierer rückt JavaScript anhand von geschweiften, eckigen und runden Klammern neu ein, setzt Anweisungen in eigene Zeilen und lässt Strings und Kommentare unangetastet, sodass die Struktur von Funktionen und Objekten wieder sichtbar wird. Wählen Sie zwei Leerzeichen, vier Leerzeichen oder Tabs. Minifizieren geht den umgekehrten Weg und entfernt Kommentare und überflüssigen Leerraum für eine kompakte Kopie. Es ist ein leichtgewichtiger Formatierer, der sofort im Browser läuft, kein vollständiger Compiler – ideal zum Lesen und Aufräumen von Code. Für einheitliche Formatierung in einem ganzen Projekt verwenden Sie Prettier oder den Formatierer Ihres Editors.

Häufig gestellte Fragen

Kann er verschleierten oder minifizierten Code in das Original zurückverwandeln?
Formatieren stellt Einrückung und Zeilenumbrüche wieder her und macht minifizierten Code lesbar, doch verkürzte Variablennamen wie a, b oder e lassen sich nicht in die ursprünglichen Namen zurückverwandeln. Dafür braucht es Source Maps.
Unterstützt er TypeScript oder JSX?
Einfaches TypeScript und JSX lassen sich oft ordentlich formatieren, weil die Einrückung den Klammern folgt; Typannotationen und JSX-Tags werden aber nicht gesondert geparst. Für zuverlässige Formatierung dieser Sprachen nutzen Sie Prettier.
Kann ich die minifizierte Ausgabe im Produktivbetrieb verwenden?
Sie entfernt Kommentare und Leerraum, benennt aber keine Variablen um und entfernt keinen toten Code wie spezialisierte Minifier, etwa Terser oder esbuild. Für Produktiv-Builds verwenden Sie den Minifier Ihres Bundlers, der zugleich Source Maps erzeugt.
Ändert das Formatieren, wie mein Code ausgeführt wird?
Der Formatierer ändert nur Leerraum und Zeilenumbrüche. Das Hauptrisiko ist Code, der sich über Zeilen hinweg auf automatisch eingefügte Semikolons verlässt; führen Sie vor dem Commit immer Ihre Tests mit dem formatierten Code aus.
Warum sieht die Ausgabe rund um reguläre Ausdrücke seltsam aus?
Ein Regex-Literal wie /[a-z]+/ kann für einen leichtgewichtigen Formatierer wie eine Division aussehen. Wird eine Zeile mit komplexem regulärem Ausdruck merkwürdig umbrochen, korrigieren Sie diese Zeile von Hand oder nutzen einen Formatierer mit vollständigem Parser.

Verwandte Werkzeuge