Minifiziert CSS nach einer Syntaxprüfung: Kommentare, Zeilenumbrüche, Leerzeichen um { } : ; und das letzte Semikolon jeder Regel fallen weg, ein 40-KB-Stylesheet verliert so vor gzip meist einen guten Teil. /*! Lizenz */-Kommentare bleiben, wie es die meisten Lizenzen verlangen.
Anleitung
- Sprache wählen (beim Einfügen oder Ablegen einer Datei wird sie automatisch erkannt), dann Code einfügen oder Datei öffnen.
- Formatieren nutzt Prettier, bei SQL sql-formatter. Einrückung und Zeilenbreite wählen; bei JavaScript auch Anführungszeichen und Semikolons, bei SQL Dialekt und Schreibweise der Schlüsselwörter.
- Minifizieren entfernt Kommentare und Leerraum bei HTML, CSS, JSON, XML, SQL und GraphQL. Bei JavaScript und TypeScript werden nur Leerraum und Kommentare entfernt.
- Syntaxfehler zeigen genaue Zeile und Spalte mit Markierung. Auf den Fehler tippen, um dorthin zu springen.
- Ergebnis kopieren, herunterladen oder als neue Eingabe verwenden.
- Die Formatierung läuft in einem Hintergrund-Worker im Browser: Große Dateien blockieren die Seite nicht und dein Code wird nie hochgeladen.
- Sprach-Plugins werden erst bei der ersten Nutzung geladen.
- JSON mit Kommentaren oder abschließenden Kommas (JSONC) wird beim Formatieren akzeptiert; zum Minifizieren ist striktes JSON nötig.
- YAML und Markdown lassen sich nicht sicher minifizieren, daher gibt es dort nur Formatieren.
Warum ein Formatter
Einheitliche Formatierung lenkt Code-Reviews auf die Logik statt auf Leerzeichen und hält Diffs klein. Prettier ist meinungsstark: Es druckt die ganze Datei aus dem Syntaxbaum neu, das Ergebnis hängt also nicht von der ursprünglichen Einrückung ab. Einstellbar sind nur wenige Optionen: Einrückungsbreite oder Tabs, Zeilenbreite (standardmäßig 80 Zeichen) und bei JavaScript einfache oder doppelte Anführungszeichen sowie Semikolons.
Weil der Code zuerst geparst wird, ist der Formatter nebenbei ein schneller Syntaxcheck. Eine fehlende Klammer oder ein offenes Tag stoppen die Formatierung und zeigen eine Markierung an der genauen Stelle, oft schneller als ein Stacktrace.
Verschönern oder minifizieren
Verschönern fügt Zeilenumbrüche und Einrückung für Menschen ein. Minifizieren entfernt Kommentare und Leerraum für Maschinen: Bei HTML wird Leerraum zusammengefasst, Inhalte von pre und textarea bleiben aber unangetastet; bei CSS fallen Kommentare weg, außer /*! Lizenz */-Blöcken; SQL, JSON, XML und GraphQL werden zu einer kompakten Zeile. Bei JavaScript und TypeScript werden nur Leerraum und Kommentare entfernt, Variablen werden nicht umbenannt wie bei einem Bundler. YAML und Markdown hängen von Leerraum ab, dort gibt es nur Verschönern.
SQL formatieren
Für SQL gibt es keinen einheitlichen Stil. Schlüsselwörter lassen sich hier GROSS oder klein schreiben, und die Dialekt-Einstellung bringt dem Formatter die Syntax von MySQL, PostgreSQL, SQL Server (T-SQL), Oracle PL/SQL, SQLite, BigQuery, Snowflake und weiteren bei, etwa Backtick-Bezeichner, ::-Casts oder $1-Parameter.
Häufige Fragen
Wird mein Code auf einen Server geladen?
Nein. Formatiert wird in einem Web Worker im Browser. Der Code verlässt dein Gerät nicht, was bei proprietärem Code und Dateien mit Zugangsdaten wichtig ist.
Welche Sprachen werden unterstützt?
HTML, CSS, SCSS, LESS, JavaScript, JSX, TypeScript, TSX, JSON, SQL in 20 Dialekten, XML, YAML, GraphQL und Markdown. Die Sprache wird beim Einfügen oder Ablegen einer Datei erkannt.
Entspricht das Ergebnis dem Prettier in meinem Projekt?
Ja, bei gleichen Optionen. Der Formatter ist Prettier selbst; mit gleicher Einrückung, Zeilenbreite, Anführungszeichen und Semikolons kommt dasselbe heraus wie mit prettier --write.
Warum scheitert die Formatierung an einem Syntaxfehler?
Der Formatter parst den Code, bevor er ihn neu ausgibt, ungültiger Code lässt sich daher nicht formatieren. Die Meldung nennt Zeile und Spalte; dort den Fehler beheben, dann klappt es wieder.
Benennt das Minifizieren von JavaScript Variablen um?
Nein. Es entfernt nur Kommentare und überflüssigen Leerraum. Für Produktions-Bundles mit Umbenennung und Dead-Code-Entfernung ein Build-Tool wie esbuild oder Terser nutzen.
Kann ich JSON mit Kommentaren formatieren?
Beim Verschönern ja: JSON mit Kommentaren und abschließenden Kommas (JSONC, wie in tsconfig.json) wird akzeptiert. Zum Minifizieren muss es striktes JSON sein.