Was der JavaScript Formatter macht
Der Formatter nutzt Prettier mit dem Babel-Parser. Er liest Ihren Code vollständig ein und schreibt ihn nach einheitlichen Regeln neu: Einrückung, Zeilenumbrüche, Abstände um Operatoren und Klammern, Umbruch langer Funktionsaufrufe und Objekte. Neben JavaScript werden auch JSX für React-Komponenten und JSON verarbeitet.
Sie stellen ein, wie das Ergebnis aussehen soll: Einrückung mit 2 oder 4 Leerzeichen oder Tabs, Zeilenbreite 80, 100 oder 120, Semikolons an oder aus, einfache oder doppelte Anführungszeichen und Trailing Commas, also Kommas nach dem letzten Element in Arrays, Objekten und Parameterlisten. So passt der Code zum Stil Ihres Projekts.
Besonders nützlich ist das Werkzeug als Beautifier für minifizierten Code. Es rückt ihn neu ein und macht die Struktur sichtbar. Beachten Sie aber: Wurden Variablennamen beim Minifizieren gekürzt, lassen sie sich nicht wiederherstellen, aus a, b und c werden keine sprechenden Namen. Die Logik des Codes ändert sich beim Formatieren nicht. Syntaxfehler werden mit der Meldung des Parsers angezeigt. Ein einheitliches Format ist vor allem in Teams wertvoll. Wenn jede Datei nach denselben Regeln formatiert ist, enthalten Code-Reviews und Diffs nur inhaltliche Änderungen, keine Diskussionen über Einrückung oder Anführungszeichen. Für JSON ist das Werkzeug ebenfalls praktisch: Eine kompakte API-Antwort in einer Zeile wird zu einer übersichtlich eingerückten Struktur, in der Sie Schlüssel und verschachtelte Objekte leicht finden. Kommentare im JavaScript-Code bleiben erhalten.
Der Code bleibt in Ihrem Browser und wird nicht hochgeladen. Kostenlos formatieren Sie eine Datei oder einen eingefügten Text und können denselben Text mit anderen Optionen erneut formatieren. Für neue Eingaben, mehrere Dateien gleichzeitig mit ZIP-Download und werbefreie Nutzung gibt es ToolStudio Pro, jederzeit kündbar.
So formatieren Sie JavaScript
- JavaScript, JSX oder JSON einfügen oder eine Datei ablegen bzw. auswählen.
- Einrückung und Zeilenbreite wählen.
- Semikolons, Anführungszeichen und Trailing Commas einstellen.
- Formatierung starten.
- Ergebnis kopieren oder herunterladen.
Wofür Sie den JS Formatter nutzen
- Minifizierte Skripte einer Website oder eines Pakets untersuchen.
- Unformatierte JSON-Antworten einer API lesbar machen.
- React-Komponenten mit JSX einheitlich formatieren.
- Code-Schnipsel aus Foren oder Chats an den eigenen Stil anpassen.
- Beispielcode für Dokumentation und Präsentationen vorbereiten.
- Syntaxfehler über die Meldung des Parsers lokalisieren.
Die Optionen im Überblick
- Semikolons aus: Prettier setzt nur dort Semikolons, wo sie zur Vermeidung von Mehrdeutigkeiten nötig sind.
- Einfache Anführungszeichen: Aus "text" wird 'text', außer der String enthält selbst mehr einfache Anführungszeichen.
- Trailing Commas: Ein Komma nach dem letzten Element macht Diffs übersichtlicher, weil neue Zeilen nur eine Zeile ändern.
- In JSON bleiben doppelte Anführungszeichen immer erhalten, weil JSON sie vorschreibt.
Häufig gestellte Fragen
Kann ich minifizierten Code wiederherstellen?
Die Struktur ja, die Einrückung wird neu erzeugt. Gekürzte Variablennamen bleiben allerdings kurz, denn die Originalnamen sind im minifizierten Code nicht mehr enthalten.
Werden JSX und JSON unterstützt?
Ja. Der Babel-Parser verarbeitet JavaScript, JSX und JSON.
Und TypeScript?
Der Formatter ist für JavaScript, JSX und JSON ausgelegt. TypeScript-spezifische Syntax wie Typannotationen wird nicht unterstützt.
Wird mein Code hochgeladen?
Nein, Prettier läuft vollständig in Ihrem Browser.
Ist der Formatter kostenlos?
Eine Datei oder ein eingefügter Text ist kostenlos, und denselben Text können Sie mit anderen Optionen erneut formatieren. Neue Eingaben erfordern ToolStudio Pro: unbegrenzte Nutzung, mehrere Dateien als ZIP, keine Werbung, jederzeit kündbar.