JavaScript formatieren

So funktioniert es

Wer das Skript einer Website untersucht, einen Fehler sucht oder kopierten Code verstehen will, bekommt JavaScript oft als eine lange Zeile, in der hunderte Funktionen mit Semikolons aneinanderkleben. Fügen Sie den Code in das linke Feld ein; rechts steht danach jede Anweisung auf einer eigenen Zeile, Funktionsrümpfe, if/else-Blöcke und Schleifen sind in der gewählten Breite eingerückt, Objekte und Arrays so geöffnet, dass ihre Werte lesbar sind. Sie entscheiden, ob die öffnende Klammer in derselben Zeile bleibt (if (a) {) oder in die nächste rückt. Leerzeichen in Zeichenketten, Template-Strings (`...`) und regulären Ausdrücken (/a{2}/) werden nicht angefasst; der Code verhält sich genau wie vorher, nur sein Aufbau ändert sich. Von einem Minimierer gekürzte Variablennamen (a, b, n) kommen nicht zurück, weil die Originalnamen nicht mehr in der Datei stehen, doch die Struktur wird lesbar. TypeScript und JSX werden meist richtig eingerückt, Typangaben ohne Gewähr. Mit Was soll passieren? → Minimiert geht es in die Gegenrichtung: Leerraum und Kommentare fallen weg, lokale Namen werden kürzer; ist der Code unlesbar, stehen Zeile und Spalte des Fehlers da.

Dieses Werkzeug ist auch als javascript formatieren, javascript formatieren online, js code formatieren, javascript beautifier, minimiertes javascript lesbar machen, typescript formatieren bekannt.

Was ist JavaScript?

JavaScript ist die Programmiersprache, mit der Webseiten etwas tun: ein Menü beim Antippen öffnen, ein Formular vor dem Absenden prüfen, eine Warenkorbsumme sofort aktualisieren. Browser lesen den Code unabhängig von Zeilen und Leerzeichen; Semikolons und geschweifte Klammern trennen die Anweisungen. Deshalb lässt sich derselbe Code lesbar eingerückt oder in einer Zeile schreiben, und Live-Seiten liefern meist die einzeilige Fassung aus.

Was ist Beautifier?

Ein Beautifier (Formatierer) ändert nur, wie Code aussieht, nie was er tut: Er fügt Zeilenumbrüche ein, rückt Blöcke ein und setzt Leerzeichen um Operatoren. Anders als Entwicklungswerkzeuge wie Prettier braucht er keine Konfigurationsdatei und keine Installation; man fügt Code einmal ein und nimmt das Ergebnis mit. Diese Seite führt die Open-Source-Bibliothek js-beautify in Ihrem Browser aus.

Was ist der Unterschied zwischen JavaScript formatieren und minimieren?

Formatieren ordnet Code für Menschen: Es fügt Zeilenumbrüche und Einrückung hinzu und ändert keinen Namen und keinen Wert. Minimieren verdichtet Code für den Browser: Es entfernt Leerraum und Kommentare, kürzt lokale Variablennamen auf einen Buchstaben und streicht ungenutzten Code. Formatieren lässt sich vollständig rückgängig machen; beim Minimieren gehen Kommentare und Originalnamen verloren, und formatierter Minimalcode bringt nur die Struktur zurück.

Verändert das Formatieren den Code?

Im eingerückten Modus nicht: Es kommen nur Leerzeichen, Zeilenumbrüche und Einrückung hinzu, und die ignoriert JavaScript. Der formatierte Code läuft also gleich. Achten muss man nur auf Zeilen ohne Semikolon: JavaScript wertet manche Zeilenumbrüche als Ende einer Anweisung, darum fügt der Formatierer bestehende Zeilen nie so zusammen, dass sich ihre Bedeutung ändert.

Das Werkzeug führt Ihren Code nicht aus und prüft die Syntax nicht; auch fehlerhafter Code wird eingerückt. Originalnamen kann das Formatieren ebenfalls nicht zurückholen: Hat ein Minimierer gesamtPreis zu n gemacht, sehen Sie auch im formatierten Code n. Zurück zur Originalquelle führt nur eine Source Map, sofern der Entwickler eine veröffentlicht hat.

Eingerückt oder minimiert?

Eingerückter Code dient dem Lesen, der Fehlersuche und der Arbeit im Team. Minimierter Code dient dem Betrieb: Je kleiner das Skript, das beim Browser ankommt, desto früher reagiert die Seite.

Die Option Minimiert führt einen üblichen terser-Durchlauf aus: Leerraum und Kommentare fallen weg, lokale Namen werden kürzer, toter Code verschwindet; Lizenzkommentare mit /*! bleiben. Wenn Sie selbst entscheiden wollen, ob Namen gekürzt oder console.log-Aufrufe entfernt werden, und einen Vorher-nachher-Vergleich in Byte sehen möchten, nutzen Sie das Werkzeug JavaScript minimieren.

• Fremde .min.js-Datei lesen → Eingerückt
• Eigenen Code einheitlich einrücken → Eingerückt
• Veröffentlichen → Minimiert

Häufige Fragen

Wie mache ich minimiertes JavaScript wieder lesbar?

Fügen Sie den Code links auf dieser Seite ein. Jede Anweisung bekommt eine eigene Zeile, Blöcke werden eingerückt. Gekürzte Variablennamen kommen nicht zurück, die Struktur wird aber lesbar. Das Ergebnis können Sie kopieren oder als .js-Datei herunterladen.

Lässt sich auch TypeScript oder React (JSX) formatieren?

Meistens ja: JSX-Tags und die meisten TypeScript-Schreibweisen werden richtig eingerückt. Der Formatierer versteht aber keine Typen; bei komplexen Typdefinitionen und Generics (<T>) kann die Einrückung anders ausfallen als erwartet. Die Bedeutung des Codes ändert sich in keinem Fall, nur der Leerraum verschiebt sich.

Macht das Formatieren meinen Code kaputt?

Nein. Im eingerückten Modus kommen nur Leerzeichen und Zeilenumbrüche hinzu; Zeichenketten, Template-Strings und reguläre Ausdrücke bleiben unberührt. JavaScript ignoriert Leerraum, der Code läuft also gleich.

Wird mein Code an einen Server geschickt?

Nein. Formatieren und Minimieren laufen beide in Ihrem Browser; Ihr Code verlässt diese Seite nicht.