JavaScript-Beautifier online für saubereren Website-Code

Einführung

JavaScript, das für den produktiven Einsatz minifiziert oder einfach nur schnell und ohne Rücksicht auf die Formatierung getippt wurde, kann wirklich schwer zu lesen sein: keine einheitliche Einrückung, mehrere Anweisungen in einer Zeile, Blöcke, die sich optisch nicht voneinander abheben. Beim Formatieren wird dieser Code neu formatiert — mit Einrückungen, Zeilenumbrüchen zwischen den Anweisungen und gleichmäßigen Abständen —, ohne dass sich an seiner Funktion etwas ändert. Logik, Variablennamen und Verhalten bleiben exakt gleich; es ändert sich nur das Erscheinungsbild auf dem Bildschirm. Wer JavaScript nicht nur schreiben, sondern auch lesen lernen möchte, merkt schnell, wie viel dieser Unterschied ausmacht: Dasselbe Skript wirkt als eine einzige dichte Zeile einschüchternd und ist als sauber eingerückte Folge von Anweisungen und Blöcken plötzlich völlig zugänglich.

Wie dieses Werkzeug Ihren Code formatiert

Das Werkzeug liest den eingefügten Code Stück für Stück durch und erkennt Zeichenketten, Kommentare, Klammern und Operatoren als eigenständige Bestandteile, statt Zeilenumbrüche nur nach Textmustern einzustreuen. Genau deshalb unterscheidet es zuverlässig zwischen einem /, das einen Kommentar einleitet, einem, das zu einem regulären Ausdruck gehört, und einem, das für eine Division steht — woran ein rein textbasierter Formatierer scheitern würde. Die Einrückung wird durchgängig neu aufgebaut (drei Leerzeichen pro Verschachtelungsebene), und die Zeilenumbrüche richten sich nach der Struktur des Codes, sodass jede Anweisung und jeder Block eine eigene Zeile bekommt. Kommentare werden nicht entfernt, sondern bleiben erhalten und wandern mitsamt dem Code durch die Formatierung — eine Erläuterung zu einer Funktion oder ein Lizenzhinweis steht auch in der Ausgabe noch da.

Semikolons werden an Ort und Stelle neu gesetzt, nicht ergänzt und nicht entfernt. JavaScript erlaubt es in vielen Fällen, eine Anweisung ohne Semikolon zu beenden — die offizielle Sprachspezifikation schließt die Lücke automatisch über eine Regel namens automatische Semikolon-Einfügung —, und manche Entwickler schreiben ihren Code bewusst so. Dieses Werkzeug bezieht dazu keine Stellung: Enthält Ihr Ausgangscode keine Semikolons, enthält auch die formatierte Ausgabe keine; enthält er welche, bleiben sie genau dort, wo sie waren, und werden lediglich um die neuen Zeilenumbrüche und Einrückungen herum angeordnet. Das ist gut zu wissen, wenn Sie mit dem Werkzeug vermitteln oder selbst nachvollziehen möchten, wie JavaScript-Anweisungen enden, denn das Werkzeug wird den einen Stil nicht in den anderen „korrigieren".

Was Sie vorher wissen sollten

Zwei Punkte lohnt es sich zu kennen, bevor Sie echten Code hier einfügen:

• Leerzeilen bleiben nicht erhalten. Der Formatierer entscheidet anhand der Struktur des Codes, wo Zeilenumbrüche hingehören — und nicht danach, wo Sie in Ihrer Vorlage zufällig Leerzeilen gesetzt hatten. Wenn Sie Abschnitte eines Skripts durch Leerzeilen optisch voneinander getrennt haben, überlebt diese Gliederung die Formatierung nicht zwangsläufig; die Logik und sämtliche Anweisungen sind weiterhin vorhanden, nur eben ohne Ihre ursprüngliche Gruppierung.
• Template-Literale (Zeichenketten mit Backticks) werden nicht als Zeichenketten erkannt. Modernes JavaScript erlaubt es, Zeichenketten aus Backticks und eingebetteten Ausdrücken zu bauen, etwa `Hello, ${name}`. Der Formatierer behandelt Text zwischen Backticks nicht so wie gewöhnlichen Text in Anführungszeichen, weshalb Code mit Template-Literalen an diesen Stellen falsch umformatiert werden kann. Sehen Sie sich diese Stellen nach dem Formatieren genau an, oder formatieren Sie den restlichen Code und lassen Sie die betreffenden Zeilen so, wie sie waren.

Keiner der beiden Punkte ändert etwas an der Funktion Ihres Codes — Sie arbeiten immer mit Ihrer eigenen Eingabe, und nichts wird verändert, solange Sie das formatierte Ergebnis nicht selbst in Ihr Projekt zurückkopieren.

Wann dieses Werkzeug das richtige ist

• Ein fremdes, minifiziertes Skript lesen. Wer sich das JavaScript einer öffentlichen Website über die Entwicklerwerkzeuge des Browsers ansieht, bekommt meist eine dichte, unformatierte Datei zu Gesicht — hier eingefügt und verschönert lässt sie sich tatsächlich studieren, was ein echter Beitrag zur digitalen Mündigkeit ist und nicht bloß Codekosmetik.
• Abgegebenen Schülercode durchsehen. Ein Skript ohne einheitliche Formatierung liest und bewertet sich spürbar langsamer; vorher verschönert, geht die Rückmeldung schneller und leichter von der Hand.
• Den eigenen Code vor der Abgabe aufräumen. Eine einheitliche Formatierung macht es der Lehrkraft — oder Ihnen selbst ein halbes Jahr später — leichter, dem Ablauf zu folgen.
• Ein Codebeispiel für den Unterricht vorbereiten. Eine bei der Vorbereitung schnell hingeschriebene Funktion ist am Beamer oft dicht und schwer zu verfolgen; verschönert ergibt sie sauberen, gleichmäßig eingerückten Code, den eine Klasse auch aus der letzten Reihe noch lesen kann.

Für Code, der stark auf Template-Literale setzt, oder für eine große moderne Codebasis, bei der die Ausgabe garantiert korrekt sein muss, ist der eingebaute Formatierer eines Code-Editors die verlässlichere Wahl — siehe die Einschränkung weiter oben. Dieses Werkzeug eignet sich am besten für Skripte in typischer Unterrichtsgröße.

Beispiel

Eine Schülerin findet auf einer Tutorial-Seite ein kurzes interaktives Skript, zu einer einzigen dichten Zeile minifiziert, und möchte verstehen, wie es funktioniert, bevor sie es für ihr eigenes Projekt anpasst. In dieses Werkzeug eingefügt, zieht es sich zu sauber eingerückten Anweisungen und Blöcken auseinander, sodass sich der Ablauf wirklich lesen lässt — welche Funktion bei welchem Ereignis läuft, wo eine Schleife beginnt und wo sie endet —, statt eine einzige ununterbrochene Codezeile absuchen zu müssen.

Häufige Fragen

Ändert das Formatieren, wie mein Code ausgeführt wird?

Nein. Es ändert sich nur die Formatierung — Einrückung, Zeilenumbrüche und Abstände; Logik und Verhalten bleiben gleich.

Bleiben meine Kommentare erhalten?

Ja. Kommentare, auch Lizenzhinweise, bleiben erhalten und werden zusammen mit dem übrigen Code neu formatiert.

Kommt es mit Template-Literalen (Backtick-Zeichenketten) zurecht?

Nicht zuverlässig. Code mit `like this ${example}` kann an diesen Stellen falsch umformatiert werden — prüfen Sie diesen Teil der Ausgabe, oder lassen Sie die betreffenden Zeilen unformatiert.

Wird mein Code irgendwo gespeichert?

Nein. Der eingefügte Code wird verarbeitet, um das formatierte Ergebnis zu erzeugen, und danach nicht aufbewahrt; festgehalten wird nur, dass das Werkzeug benutzt wurde, nicht der Code selbst.

Werden Semikolons ergänzt oder entfernt?

Nein. Semikolons bleiben genau so stehen, wie sie in Ihrem Ausgangscode vorkommen, und werden nur um die neuen Zeilenumbrüche und Einrückungen herum neu angeordnet — enthält Ihr Code keine, enthält auch die Ausgabe keine.

Kann ich mehrere Skripte auf einmal verschönern?

Fügen Sie immer nur ein Skript ein und verschönern Sie es einzeln. Fassen Sie die Dateien vorher zusammen, wenn sie gemeinsam formatiert werden sollen, oder wiederholen Sie den Vorgang für jede einzeln.

Welche verwandten Werkzeuge kann ich nutzen?

Mit CSS Beautifier oder HTML Beauty formatieren Sie anderen Code, und CSS Minifier komprimiert CSS, sobald es für den produktiven Einsatz fertig ist.