JS/HTML-Formatierer

Der JavaScript- und HTML-Formatierer rückt komprimierten oder unübersichtlichen Code neu ein, sodass Sie ihn wieder lesen können. Fügen Sie ein minifiziertes Produktionsskript, ein einzeiliges HTML-Dokument oder ein Snippet ein, das Ihnen eine Kollegin ohne Zeilenumbrüche geschickt hat, wählen Sie einen Einrückungsstil, und der Beautifier erweitert es zu konsistent eingerücktem, strukturiertem Code. Er eignet sich für Entwickler, die Bundles von Drittanbietern untersuchen, die Ausgabe eines Codegenerators debuggen oder die Einrückung vereinheitlichen, bevor sie eine Datei in ein Projekt aufnehmen.

Verwendung

1. Wählen Sie den Modus – JavaScript oder HTML –, damit der Formatierer die richtige Grammatik anwendet.
2. Fügen Sie den Code in den Eingabebereich ein. Die Ausgabe aktualisiert sich, sobald Sie auf Formatieren klicken oder Strg+Enter drücken.
3. Wählen Sie einen Einrückungsstil: zwei Leerzeichen, vier Leerzeichen oder Tabs.
4. Kopieren oder laden Sie das Ergebnis herunter. Das Bedienfeld zeigt außerdem die ursprüngliche und die formatierte Dateigröße, eine nützliche Erinnerung daran, wie viel einer minifizierten Datei aus Leerraum bestand.

Was das Verschönern ändert – und was nicht

Die Formatierung berührt Leerraum, und nur Leerraum. Sie fügt Zeilenumbrüche zwischen Anweisungen ein, rückt Blöcke entsprechend ihrer Verschachtelung ein und richtet Fortsetzungszeilen aus. Sie benennt nicht Variablen um, ordnet nicht Anweisungen um, fügt weder bedeutungstragende Semikolons hinzu noch entfernt sie sie und wandelt auch keine Syntax um. Diese Zurückhaltung macht sie sicher: Die formatierte Datei und das Original werden identisch ausgeführt.

Der praktische Wert ist diagnostisch. Wenn zehn Anweisungen und vier verschachtelte Blöcke in einer Zeile stehen, ist eine nicht zusammenpassende Klammer unsichtbar. Sobald jeder Block in einer eigenen eingerückten Zeile steht, fällt dieselbe Klammer sofort auf. Das Lesen minifizierten Fremdcodes, um die Funktion zu finden, die Sie überschreiben müssen, ist der andere häufige Anwendungsfall – das Verschönern verwandelt eine Zeichenwand in eine navigierbare Datei.

Ein Praxisbeispiel

Ein minifiziertes Snippet kommt so an:

function total(items){let sum=0;for(const it of items){if(it.active){sum+=it.price*it.qty;}}return sum;}

Nach dem Verschönern mit Einrückung von zwei Leerzeichen:

function total(items) {
  let sum = 0;
  for (const it of items) {
    if (it.active) {
      sum += it.price * it.qty;
    }
  }
  return sum;
}

An der Berechnung hat sich nichts geändert. Was sich geändert hat: Das if liegt nun sichtbar innerhalb der Schleife, der Akkumulator wird davor deklariert, und das return steht außerhalb – die Struktur ist auf einen Blick lesbar, statt im Kopf rekonstruiert werden zu müssen.

HTML profitiert auf dieselbe Weise. Ein von einem Framework erzeugtes Template kommt oft als eine einzige Zeile verschachtelter Tags an, und das Neueinrücken zeigt, welche Elemente welche umschließen. Das ist besonders nützlich, wenn Sie eine Seite auf Barrierefreiheit prüfen: Sobald die Hierarchie sichtbar ist, fällt eine Überschrift, die von h2 auf h4 springt, oder eine Liste, deren Elemente außerhalb des Listenelements liegen, sofort auf. Der Formatierer validiert das Markup nicht, macht die Verschachtelung aber lesbar genug für eine Prüfung mit dem Auge.

Einen Einrückungsstil wählen

• Zwei Leerzeichen – der De-facto-Standard in JavaScript und die Annahme der meisten Linter. Kompakt, und tief verschachtelter Code driftet nicht so weit nach rechts.
• Vier Leerzeichen – deutlichere Verschachtelungshinweise, verbreitet in Java-beeinflussten Codebasen und manchen TypeScript-Projekten.
• Tabs – ein Zeichen pro Ebene; jeder Leser stellt seine bevorzugte Anzeigebreite ein, weshalb manche Teams sie trotz der Mischungsrisiken in gemeinsamem Code bevorzugen.

Welchen Sie auch wählen: Führen Sie den Formatierer aus, bevor Sie mit dem Bearbeiten beginnen, nicht danach. Eine bereits geänderte Datei neu zu formatieren erzeugt einen Diff voller Leerraum-Rauschen, das die echten Änderungen begräbt – eine Angewohnheit, die Reviewer bei jedem Pull Request Zeit kostet.

Häufige Fehler

• Minifizierung erwarten. Das Tool erweitert nur; verwenden Sie einen dedizierten Minifier in einem Build-Schritt, wenn Sie das Gegenteil brauchen.
• HTML in den JavaScript-Modus einfügen. Tags sind keine JavaScript-Anweisungen; wählen Sie den passenden Modus, sonst stimmt die Ausgabe nicht.
• Annehmen, Formatierung behebe Syntaxfehler. Läuft der Code vor dem Verschönern nicht, läuft er auch danach nicht. Ein Formatierer ordnet gültige Tokens neu; ungültige repariert er nicht.
• Innerhalb eines String-Literals formatieren. Text in Anführungszeichen sind Daten, kein Code. Ein Formatierer lässt ihn in Ruhe, aber seien Sie vorsichtig beim manuellen Bearbeiten von Template-HTML oder in Strings eingebettetem SQL.
• Das Original verlieren. Bewahren Sie die minifizierte Quelle auf, wenn Sie später dagegen diffen wollen; die verschönerte Fassung ist zum Lesen da, nicht zum Ausliefern.

Funktionen

• JavaScript und HTML mit strukturierter Einrückung verschönern
• Einrückungsstile: zwei Leerzeichen, vier Leerzeichen oder Tabs
• Bereichsbewusste Formatierung, die Blöcke, Schleifen und Verschachtelung respektiert
• Anzeige der ursprünglichen und der formatierten Größe
• Kopieren in die Zwischenablage oder Herunterladen als Datei
• 100 % clientseitig – privater Code verlässt den Browser nie

Anwendungsfälle

• Minifizierten Code debuggen: Ein Produktions-Bundle erweitern, um zu finden, wo etwas bricht.
• Bibliotheken von Drittanbietern prüfen: Eine Abhängigkeit neu einrücken, um zu verstehen, was sie tut.
• Code-Bereinigung: Die Einrückung vereinheitlichen, wenn Sie Snippets aus verschiedenen Quellen zusammenführen.
• Lernen: Generiertes HTML formatieren, um zu sehen, wie ein Dokument tatsächlich verschachtelt ist.
• Fehlerberichte: Lesbaren Code erzeugen, bevor Sie ihn in ein Issue oder Review einfügen.

Verwandte Tools

• CSS-Minifier/-Formatierer
• JSON Formatter
• HTML Encoder/Decoder
• XML Formatter