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.

JS-/TS-Formatierer

Verschönere oder minimiere JavaScript, TypeScript und JSX/TSX mit Prettier-Optionen.

Dein Code wird lokal in deinem Browser mit Prettier und Terser formatiert und nichts wird auf einen Server hochgeladen.

Musst du auch Styles formatieren? Probiere den CSS Formatter.

Über JS-/TS-Formatierer

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.