JavaScript-Formatierer & Minifier

Was ist ein JavaScript-Formatierer?#

Ein JavaScript-Formatierer nimmt Code, der schwer zu lesen ist — minifizierte Ausgabe eines Bundlers, ein zusammengequetschter Schnipsel aus einem Chat oder schlicht eine Datei, die von fünf Personen mit fünf unterschiedlichen Einrückungsgewohnheiten bearbeitet wurde — und schreibt ihn so um, dass die Struktur sichtbar wird. Die Einrückung folgt der Schachtelungstiefe, Operatoren erhalten konsistente Abstände und Anweisungen enden dort, wo man es erwartet. Ein guter Formatierer beherrscht auch das Gegenteil: alles Nicht-Essentielle entfernen, wenn Sie den kleinstmöglichen Payload brauchen.

Diese Seite erledigt beide Aufgaben und ist ehrlich darüber, wie jede davon funktioniert. Formatieren wird vom Standalone-Build von Prettier mit dem Babel-Parser angetrieben — derselben Engine, die viele Teams beim Speichern im Editor laufen haben, sodass die Ausgabe hier mit dem übereinstimmt, was Ihr Projekt erzeugen würde. Minifizieren ist bewusst konservativ: Es entfernt Kommentare und kollabiert Whitespace, behält aber jeden Zeilenumbruch, damit das automatische Semikolon-Einfügen (ASI) niemals fehlschlägt. Es ist kein Token-basierter Minifier wie esbuild oder terser — es benennt keine Variablen um, entfernt keinen toten Code und verstümmelt keine Eigenschaftsnamen. Das macht es sicher, das Ergebnis direkt wieder einer JS-Engine zu übergeben, aber es ist das falsche Werkzeug, um einen Produktions-Bundle zu verkleinern. Genau diesen Unterschied zu kennen, ist der Schlüssel, das Werkzeug sinnvoll einzusetzen.

Verwendung#

1. Fügen Sie Ihr JavaScript in die JavaScript-Fläche links ein oder klicken Sie auf Beispiel, um ein kurzes Beispiel zu laden.
2. Wählen Sie auf der Werkzeugleiste eine Einrückung: 2, 4 oder Tabulator. Zwei Leerzeichen sind in modernen Projekten der nahezu universelle Standard; wählen Sie Tabulator nur, wenn Sie anschließend in einen Editor einfügen, der auf Tabulatoren konfiguriert ist.
3. Klicken Sie auf eine Aktion:
   • Formatieren — gibt den Code durch Prettier mit der gewählten Einrückung neu aus. Semikola werden standardmäßig emittiert, was dem Standardverhalten von Prettier entspricht.
   • Minifizieren — entfernt //-Zeilenkommentare und /* */-Blockkommentare, kollabiert Folgen von Leerzeichen und Tabulatoren und streift Whitespace am Ende jeder Zeile. Zeilenumbrüche werden absichtlich beibehalten.
4. Lesen Sie das Ergebnis in der Ausgabe-Fläche rechts. Verwenden Sie Kopieren in der Ausgabe-Kopfzeile, um es zu übernehmen. Leeren leert beide Flächen.

Wenn Formatieren Ihre Eingabe nicht parsen kann (eine verwaiste Klammer, ein nicht abgeschlossenes Template-Literal), zeigt die Statusleiste Prettiers Fehlermeldung, anstatt eine kaputte Ausgabe zu erzeugen — so beheben Sie das eigentliche Problem, statt einer irreführenden Neuformatierung hinterherzujagen.

Eckpunkte#

• Echte Prettier-Engine. Formatieren läuft mit dem Standalone-Build von Prettier und den Babel- + estree-Plugins, nicht mit einem selbstgestrickten Beautifier. Was Sie hier bekommen, ist das, was prettier --write erzeugt.
• ASI-sicheres Minifizieren. Zeilenumbrüche bleiben beim Minifizieren erhalten, sodass eine Zeile, die auf das automatische Semikolon-Einfügen angewiesen war, weiterhin funktioniert. Zeilenumbrüche blind zu entfernen ist genau die Art, wie beiläufige „Minifier“ Bugs einbauen.
• String-, Regex- und Template-bewusst. Der Kommentar-Entferner kennt den Unterschied zwischen // innerhalb eines Strings und einem echten Zeilenkommentar sowie zwischen / als Division und als Beginn eines Regex-Literals — er frisst sich also niemals in Ihren Code.
• Zweispaltig und kopierbereit. Eingabe und Ausgabe stehen Seite an Seite; die Ausgabe ist schreibgeschützt mit einem Klick-Kopieren.
• Läuft vollständig in Ihrem Browser. Es gibt kein Backend und keinen Upload. Prettier ist in die Seite gebündelt und wird bei Bedarf geladen, sodass das Skript weiterhin eine strikte self-only Content-Security-Policy erfüllt.

Konkretes Beispiel#

Eine Funktion, die aus einem alten Gist kopiert wurde, inklusive Kommentaren und inkonsistenter Einrückung:

Eingabe:

function fetchUser(id){/*legacy: returns null when missing*/
  const url="https://example.com/users/"+id
    const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

Klicken Sie auf Formatieren mit 2 Leerzeichen:

function fetchUser(id) {
  /*legacy: returns null when missing*/
  const url = "https://example.com/users/" + id;
  const opts = { method: "GET", cache: "no-store" };
  return fetch(url, opts).then((r) => r.json());
}

Prettier korrigiert die schiefe Einrückung, setzt die Operatoren konsistent und fügt Semikola hinzu — belässt den Blockkommentar aber genau dort, wo er war. Klicken Sie nun auf Minifizieren auf der ursprünglichen Eingabe:

function fetchUser(id){
const url="https://example.com/users/"+id
const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

Der Kommentar ist weg, die schiefe Einrückung ist weg, aber jede Anweisung steht weiterhin auf ihrer eigenen Zeile. Beachten Sie, was nicht passierte: fetchUser wurde nicht gekürzt, "GET" wurde nicht verändert, die Arrow-Function behielt ihre Parameterliste. Das ist lesbare Kompression, sicher genug, um sie wieder in ein Script-Tag einzufügen — nicht das aggressive Mangeln, das ein Bundler zur Build-Zeit betreiben würde.

FAQ#

Warum benennt Minifizieren keine Variablen um oder verkleinert meinen Bundle nicht?#

Weil das korrekt zu tun einen vollständigen Parser-and-Codegen-Durchlauf erfordert (Scope-Analyse, Property-Tracking, Seiteneffekt-Erkennung). Minifizieren in diesem Werkzeug ist absichtlich ein einfacher Scanner: Er ist schnell, hat wenige Abhängigkeiten und kann nachweislich das Laufzeitverhalten nicht verändern. Für einen Produktions-Bundle führen Sie offline einen echten Bundler aus; verwenden Sie diese Seite für schnelle Aufräumarbeiten, zum Einfügen in eine Dokumentation oder zum Vorbereiten eines Schnipsels, den jemand anderes lesen soll.

Entfernt der Minifier Kommentare innerhalb von Strings?#

Nein. Der Scanner wandert Zeichen für Zeichen durch den Quelltext und verfolgt, ob er sich gerade in einem einfach gequoteten String, einem doppelt gequoteten String, einem Template-Literal oder einem Regex-Literal befindet. Ein //, das darin auftaucht, wird als Text behandelt und ignoriert; nur echte Kommentare werden entfernt.

Werden TypeScript oder JSX unterstützt?#

Der Pfad für Formatieren verwendet den Babel-Parser, der JSX akzeptiert. TypeScript-Typannotationen und .ts/.tsx-spezifische Syntax sind hier nicht aktiviert — wenn Sie diese brauchen, meldet dieses Werkzeug einen Parse-Fehler, statt leise eine falsche Ausgabe zu erzeugen. Verwenden Sie diese Seite für reines JavaScript.

Wird mein Code irgendwo hochgeladen?#

Nein. Alles läuft in dem Tab, den Sie gerade ansehen. Prettier ist mit der Seite gebündelt und wird bei Bedarf importiert; Ihr Quelltext wird im Speicher geparst und niemals über das Netzwerk gesendet.