Code formatieren & minifizieren

HTML, CSS, SCSS, Less, JavaScript, TypeScript und XML mit Prettier formatieren oder HTML, CSS, JavaScript und XML minifizieren. Läuft im Browser.

Läuft lokal in deinem Browser
Einrückung

Über dieses Tool

Code aus dem Browser-Quelltext, aus einer E-Mail-Vorlage oder einer minifizierten Bibliothek ist oft in einer einzigen langen Zeile oder uneinheitlich eingerückt. Der Formatter bringt ihn mit Prettier in eine saubere, einheitliche Form: HTML, CSS, SCSS, Less, JavaScript und TypeScript. XML wird mit einem eigenen Formatter eingerückt, der gleichzeitig prüft, ob alle Tags korrekt geschlossen sind.

Im Modus „Minifizieren“ geht es in die andere Richtung: JavaScript wird mit Terser komprimiert (Variablen werden gekürzt, toter Code entfernt), CSS, HTML und XML verlieren Kommentare und überflüssige Leerzeichen. Der HTML-Minifier ist bewusst vorsichtig: Inhalte von pre und textarea bleiben unverändert, und Leerzeichen zwischen Inline-Elementen bleiben erhalten. Alles läuft im Browser, dein Code wird nicht hochgeladen.

So funktioniert’s

  1. Füge deinen Code ein. Die Sprache wird automatisch erkannt, du kannst sie aber auch selbst wählen.
  2. Wähle „Formatieren“ und stelle Einrückung, Zeilenlänge und bei JavaScript/TypeScript Semikolons und Anführungszeichen ein.
  3. Oder wähle „Minifizieren“, um HTML, CSS, JavaScript oder XML zu verkleinern. Darunter siehst du, wie viel kleiner das Ergebnis ist.
  4. Kopiere das Ergebnis oder lade es als Datei herunter.

Häufige Fragen

Welche Formatierungsregeln werden verwendet?

Für HTML, CSS, SCSS, Less, JavaScript und TypeScript die Standardregeln von Prettier, dem verbreitetsten Code-Formatter. Einstellbar sind Einrückung (2 oder 4 Leerzeichen oder Tabs), Zeilenlänge, Semikolons und einfache Anführungszeichen.

Warum wird mein Code nicht formatiert?

Der Code muss syntaktisch gültig sein. Bei einem Fehler zeigt das Tool Zeile und Spalte an. Prüfe auch, ob die richtige Sprache ausgewählt ist, z. B. TypeScript statt JavaScript bei Typangaben.

Kann ich SCSS, Less oder TypeScript minifizieren?

Nein, diese Sprachen werden normalerweise erst kompiliert. Minifiziere stattdessen das erzeugte CSS bzw. JavaScript. Formatieren funktioniert für alle sieben Sprachen.

Verändert das Minifizieren das Verhalten meiner Seite?

Der CSS-, HTML- und XML-Minifier entfernt nur Kommentare und Leerzeichen, die keine Wirkung haben. Lizenzkommentare mit /*! bleiben erhalten. Terser kürzt beim JavaScript lokale Variablennamen und vereinfacht Ausdrücke; globale Namen bleiben unverändert. Inline-Skripte mit Syntaxfehlern übernimmt der HTML-Minifier unverändert.

Gibt es auch einen Formatter für JSON und SQL?

Ja, JSON formatierst und prüfst du mit dem JSON-Formatierer & Validator, SQL mit dem SQL-Formatierer. Für Markdown gibt es den Markdown-Editor mit Live-Vorschau.