01
Zuerst die Syntax wählen
Typangaben gehören in TS, Komponenten mit JSX und Typen in TSX. Spitze Klammern können sonst anders interpretiert werden.
- Das Beispiel lädt Code für den gewählten Modus.
HTML / CSS Dev Tools
JavaScript formatieren
Syntax und Stil wählen, dann Original und Ergebnis nebeneinander prüfen.
JavaScript formatieren
Quellcode
Ihr Code bleibt in diesem Browser-Tab und wird nicht hochgeladen.
Formatiertes Ergebnis
Code einfügen oder Beispiel laden.
Wenn ein Codeschnipsel aus einem Ticket unleserlich eingerückt ist, lässt sich JavaScript formatieren, ohne die Vorlage zu überschreiben. Links bleibt der Quelltext, rechts erscheint das Ergebnis für JS, JSX, TS oder TSX.
Hier lässt sich JavaScript formatieren, indem erst ein Parser den Code liest und dann Prettier ihn ausgibt. Template-Strings und Typannotationen werden nicht mit einfachen Leerzeichenersetzungen beschädigt. So lässt sich JS-Code verschönern, ohne das Original zu verlieren.
Warum hier JavaScript formatieren?
Ein eindeutiger Modus und ein unverändertes Original erleichtern die Kontrolle.
Vier Syntaxvarianten
JS, JSX, TS und TSX haben eigene Auswahlmöglichkeiten. Ein TSX-Baustein behält Typen und JSX; er wird nicht stillschweigend wie ausführbares JS minimiert.
Stiländerungen bleiben sichtbar
Einrückung, Zitate, Semikolons, Zeilenbreite und Schlusskommas lassen sich ändern, ohne die Eingabe zu ersetzen. Wer JavaScript formatieren will, erhält erst nach Neuberechnung ein kopierbares Ergebnis.
Drei Hinweise gegen falsche Ergebnisse
02
Stil bewusst einstellen
Die automatische Formatierung startet 350 ms nach der letzten Eingabe und reagiert auch auf Optionen. Beim Ausschalten erscheint die manuelle Schaltfläche.
- Im manuellen Modus funktioniert Ctrl/Cmd+Enter.
03
Aktualität prüfen
Nach Änderungen sind Kopieren und Download gesperrt, bis das neue Ergebnis vorliegt. Bei Fehlern helfen Zeile und Spalte.
- Eine erfolgreiche Syntaxprüfung ist keine TypeScript-Typprüfung.
Parser, Stil und Ausgabe
JS bis TSX
Prettier verarbeitet JavaScript, JSX-Tags, TypeScript-Typen und TSX mit dem jeweils passenden Parser.
Anpassbarer Stil
Zwei oder vier Leerzeichen, Tabs, Anführungszeichen, Semikolons, Zeilenbreite und Schlusskommas steuern die Ausgabe.
Prüfen und minimieren
Die Syntaxprüfung ist ein eigener Schritt. Terser minimiert ausschließlich reines JS und liefert eine .min.js-Datei. JavaScript minifizieren ist auf den JS-Modus begrenzt.
Grenzen der Verarbeitung
- Keine Typprüfung
- Ein erfolgreicher Parse beweist nur gültige Syntax im gewählten Modus. tsconfig.json, Projektabhängigkeiten und ESLint werden nicht geladen.
- Minimierung nur für JS
- JSX, TS und TSX müssen zuerst im eigenen Build in JavaScript übersetzt werden; in diesen Modi ist Minimieren deaktiviert.
- Keine Reparatur von Code
- Ein offener String oder eine fehlende Klammer wird mit Position gemeldet. Dieses Werkzeug ergänzt nichts und führt eingefügten Code nicht aus.
- Keine Projektkonfiguration
- Es gelten nur die sichtbaren Optionen. .prettierrc-Dateien, Plugins und Ignore-Regeln werden nicht automatisch gelesen.
JavaScript formatieren: häufige Fragen
Warum erscheint ein Syntaxfehler?
Der gewählte Parser hat eine ungültige oder unvollständige Stelle gefunden. Prüfen Sie Zeile und Spalte sowie den gewählten JS-, JSX-, TS- oder TSX-Modus.
Wird der Code deobfuskiert?
Nein. Minimierung kann entfernte Kommentare oder ursprüngliche Bezeichner nicht wiederherstellen.
Kann ich TypeScript formatieren?
Ja. Wählen Sie TypeScript oder TSX. Das Werkzeug formatiert die Schreibweise, übersetzt Typen aber nicht in JavaScript.
Wird das, was ich einfüge, an einen Server geschickt?
Nein. Der eingefügte Code wird im Browser verarbeitet und von diesem Werkzeug nicht an einen Server gesendet.
Was ist der Unterschied zwischen JS-Formatierer und JS-Minifier?
Formatieren strukturiert lesbar um; Minimieren verkleinert reines JavaScript. Für TS, TSX und JSX ist der Minify-Knopf gesperrt.
Frage offen?
Jetzt JavaScript formatieren
Zum Editor zurückkehren, den Syntaxmodus wählen und Änderungen mit dem Original vergleichen. Erst danach das aktuelle Ergebnis kopieren.
Lokal im Browser verarbeitet.