Softonic

JavaScript-Formatter

Schritt 1 / 3
Nächste

Fügen Sie einen Block von minimiertem oder schlecht eingerücktem JavaScript ein und erhalten Sie sauberen, lesbaren Code, der mit denselben Regeln formatiert ist, die auch Editoren verwenden. Wählen Sie Tabs oder Leerzeichen, einfache oder doppelte Anführungszeichen, Semikolons oder nicht, abschließende Kommas in ES5 oder alle. Unterstützt moderne Syntax, optionale Verkettung, nullish coalescing, JSX, TypeScript, top-level await.

Wie man JavaScript formatiert

  1. 1

    Fügen Sie den Quellcode ein

    Jedes gültige JS, JSX oder TypeScript. Der Parser wählt den Dialekt aus der Syntax.

  2. 2

    Stellen Sie Ihre Präferenzen ein

    Einzuggröße, Tabs vs. Leerzeichen, Anführungszeichen-Stil, Semikolons, Druckbreite, abschließende Kommas.

  3. 3

    Formatieren

    Das Tool führt einen Prettier-kompatiblen Durchgang aus und gibt das formatierte Ergebnis aus.

  4. 4

    Kopieren Sie die Ausgabe

    Ein-Klick-Kopie oder als Datei herunterladen. Der ursprüngliche Einzug wird verworfen, nicht darübergelegt.

Stiloptionen

Option Werte Standard
Einzug tab, 2, 4 2 Leerzeichen
Anführungszeichen-Stil einfach, doppelt doppelt
Semikolons immer, nie immer
Druckbreite 60 - 120 80
Abschließende Kommas keine, es5, alle es5
Pfeilklammern immer, vermeiden immer
Klammerabstand true, false true
JSX einfache Anführungszeichen true, false false

Warum Formatierung wichtig ist

Formatierung ist nicht kosmetisch, es geht darum, die kognitive Belastung zu reduzieren. Ein konsistent formatiertes Code-Repository ermöglicht es den Prüfern, sich auf die logische Änderung zu konzentrieren, nicht auf die Suche nach einer fehlplatzierten Klammer.

  • Bike-shedding endet, sobald ein Projekt einen Formatter annimmt. git diff zeigt die tatsächliche Änderung, nicht die Debatten über Einrückungen.
  • Pre-commit-Hooks (mit Tools wie Husky + lint-staged) formatieren automatisch die gestagten Dateien, bevor sie committet werden.
  • Editor-Integration (VS Code, WebStorm) wendet dieselben Regeln beim Speichern an.

Was Formatierung nicht tut

  • Es lintet nicht. Stilregeln (no-unused-vars, eqeqeq) sind das Gebiet von ESLint. Ein Formatter verändert nur Leerzeichen und Interpunktion, er lehnt keinen Code wegen logischer Probleme ab.
  • Es behebt keine Syntaxfehler. Wenn der Eingabewert ungültiges JS ist, wird der Formatter einen Fehler auslösen. Verwenden Sie es als Überprüfung, dass Ihr Code zumindest analysierbar ist.
  • Es erzwingt keine Namenskonventionen. camelCase vs snake_case ist eine Lint-Regel, keine Formatter-Regel.

Häufige Fehler

  • Gegen den Formatter kämpfen. Wenn Sie nach dem Ausführen weiterhin umformatieren, verschwenden Sie beide Zeit. Entweder konfigurieren Sie die Optionen oder akzeptieren die Wahl des Projekts.
  • Formatierung einer generierten Datei. Bundler-Ausgaben, transpilierten Code, .min.js, keiner von ihnen profitiert. Formatieren Sie Quellen, nicht Artefakte.
  • Formatierung ohne Parsing. Ein Regex “schön drucken” wird Template-Literale, Regex-Literale und JSX beschädigen. Verwenden Sie immer einen AST-basierten Formatter (wie diesen).

Häufig gestellte Fragen

Ja. Der Parser erkennt TypeScript-Syntax (Typen, Schnittstellen, Generika, Dekoratoren) und formatiert entsprechend. JSX wird auch in .tsx / .jsx-Dateien unterstützt.

Es folgt denselben Regeln wie die Standardwerte von Prettier, konfigurierbar über die üblichen Optionen (Druckbreite, Anführungszeichen, Semikolons, abschließende Kommas). Eine hier formatierte Datei sollte mit einer von Prettier mit derselben Konfiguration formatierten übereinstimmen.

Der Formatter benötigt gültiges, analysierbares JavaScript. Wenn Sie einen Fehler erhalten, hat der Code wahrscheinlich ein Syntaxproblem (nicht geschlossene Klammer, ungültiges JSX, Tippfehler). Führen Sie es zuerst durch einen Linter, wenn die Nachricht unklar ist.

Ja. Sowohl einzeilige (//) als auch Blockkommentare (/* */) werden in der Ausgabe beibehalten, nahe der Stelle, an der sie im Quellcode waren.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Farbrad-Explorer

Erforschen Sie das Farbrad interaktiv. Rotieren Sie Harmonien, vergleichen Sie HSL mit RYB, erkennen Sie komplementäre und triadische Paare in Echtzeit.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

HTML-Formatter

Formatieren Sie HTML lokal im Browser mit zwei oder vier Leerzeichen Einrückung. HTML wird weder hochgeladen noch validiert.

Tool in anderen Sprachen verfügbar