Dieser JS-Formatter verschönert oder minifiziert JavaScript, TypeScript und JSX/TSX direkt in deinem Browser. Als JavaScript-Beautifier führt er Prettier mit einem vollständigen Optionspanel aus, während das Minifizieren Terser nutzt, um Code für die Produktion zu verkleinern. Wähle den Auto-Parser, um die Syntax automatisch zu erkennen, oder erzwinge JS/JSX oder TS/TSX, wenn du einen bestimmten TypeScript-Formatter brauchst. Stelle Semikolons, Anführungszeichenstil, Tabbreite, Druckbreite und nachgestellte Kommas ein, um dem Stil deines Projekts zu entsprechen. Er ist für Entwickler gebaut, die unordentliche Snippets aufräumen, QA-Ingenieure, die gebündelte Ausgaben prüfen, und alle, die eine schnelle Prettier-online-Alternative wollen. Alles wird lokal in deinem Browser verarbeitet, sodass dein Quellcode dein Gerät nie verlässt und nichts auf einen Server hochgeladen wird.
Funktionen
Verschönere JavaScript, TypeScript und JSX/TSX mit Prettier
Minifiziere mit Terser, um Code für die Produktion zu verkleinern
Automatische Parser-Erkennung plus explizite JS/JSX- und TS/TSX-Modi
Schalte Semikolons, einfache oder doppelte Anführungszeichen und Tabs vs Leerzeichen um
Konfigurierbare Tabbreite (2 oder 4) und Druckbreite (80, 100, 120)
Wähle nachgestellte Kommas: none, es5 oder all
Sofortige Formatierung, während du eine Option anpasst
Läuft vollständig in deinem Browser
So verwendest du JS-/TS-Formatierer
Füge dein JavaScript oder TypeScript in das Eingabefeld ein.
Wähle Verschönern zum Formatieren oder Minifizieren zum Komprimieren.
Wähle den Parser: Auto, JS / JSX oder TS / TSX.
Passe Optionen wie Tabbreite, Anführungszeichen, Semikolons und nachgestellte Kommas an.
Kopiere die formatierte Ausgabe aus dem Ergebnisbereich.
Beispiel
Eingabe
const greet=(name)=>{return 'hi '+name}
Ausgabe
const greet = (name) => {
return 'hi ' + name;
};
Verschönert mit Standard-Prettier-Optionen (2 Leerzeichen Einrückung, Semikolons).
Häufige Fehler & Fehlerbehebung
Die Ausgabe ist leer oder zeigt nach dem Einfügen einen Parse-Fehler. — Stelle sicher, dass das Snippet gültiges JavaScript oder TypeScript ist. Wechsle den Parser auf TS / TSX für Typannotationen oder JS / JSX für React-Syntax.
Der Auto-Modus parst TypeScript-spezifische Syntax falsch. — Auto versucht zuerst den TypeScript-Parser und fällt auf Babel zurück; erzwinge explizit TS / TSX, wenn deine Datei fortgeschrittene Typfunktionen nutzt.
Die minifizierte Ausgabe sieht unleserlich aus. — Das ist zu erwarten. Terser entfernt Leerraum und kürzt Code für die Produktion. Nutze Verschönern, wenn du ein lesbares Ergebnis willst.
Anführungszeichen oder Semikolons sind nicht wie gewünscht. — Schalte die Optionen Einfache Anführungszeichen und Semikolons vor dem Kopieren um. Prettier formatiert sofort neu, wenn du sie änderst.
Häufig gestellte Fragen
Was ist der JS-Formatter und was kann er?
Es ist ein browserbasiertes Tool, das JavaScript, TypeScript und JSX/TSX verschönert oder minifiziert. Das Verschönern führt Prettier mit vollständigen Stiloptionen aus und das Minifizieren führt Terser aus, um Code für die Produktion zu komprimieren.
Wie formatiere ich TypeScript oder JSX mit dem JS-Formatter?
Wähle den Parser: JS / JSX, TS / TSX oder Auto. Auto versucht zuerst den TypeScript-Parser und fällt auf Babel zurück, sodass reines JavaScript, JSX und TypeScript alle korrekt formatiert werden.
Nutzt der JS-Formatter Prettier und Terser?
Ja. Das Verschönern nutzt Prettier und das Minifizieren nutzt Terser, sodass die Ausgabe denselben Tools entspricht, die du in einer echten Build-Pipeline verwenden würdest.
Welche Stiloptionen kann ich im JS-Formatter steuern?
Du kannst zwischen einfachen und doppelten Anführungszeichen und Semikolons umschalten, zwischen Tabs und Leerzeichen wechseln, die Tabbreite auf 2 oder 4 setzen, eine Druckbreite von 80, 100 oder 120 wählen und nachgestellte Kommas von none, es5 oder all wählen.
Sendet der JS-Formatter meinen Code irgendwohin?
Nein. Prettier und Terser laufen beide vollständig in deinem Browser, sodass dein Code dein Gerät nie verlässt und nichts auf einen Server hochgeladen wird.
Verwandte Tools
CSS-/SCSS-Formatierer — Verschönere oder minimiere CSS/SCSS/LESS, sortiere Eigenschaften und entferne Duplikate.
HTML-Formatierer — Verschönere oder minimiere HTML, formatiere eingebettetes CSS/JS und zeige eine Vorschau.
JSON-Formatierer — JSON verschönern, minimieren und validieren – mit Fehlerposition.
JSON zu TypeScript — Erzeuge TypeScript-Interfaces aus einer JSON-Probe.
SQL-Formatierer — Formatiere SQL für MySQL, PostgreSQL, SQL Server, SQLite, BigQuery und Oracle.
GraphQL-Formatierer — Formatiere oder minimiere GraphQL-Abfragen und -Schemas, validiere die Syntax und extrahiere Operationen.
XML-Formatierer — Verschönere, minimiere und validiere XML und konvertiere XML ↔ JSON.
cURL zu Fetch — Konvertiere einen curl-Befehl in einen JavaScript-fetch()-Aufruf.
Weitere Code-Formatierer-Tools
HTML-Formatierer — Verschönere oder minimiere HTML, formatiere eingebettetes CSS/JS und zeige eine Vorschau.
XML-Formatierer — Verschönere, minimiere und validiere XML und konvertiere XML ↔ JSON.
SQL-Formatierer — Formatiere SQL für MySQL, PostgreSQL, SQL Server, SQLite, BigQuery und Oracle.
GraphQL-Formatierer — Formatiere oder minimiere GraphQL-Abfragen und -Schemas, validiere die Syntax und extrahiere Operationen.
Dockerfile-Formatierer — Formatiere ein Dockerfile und erhalte Best-Practice- und Lint-Hinweise.