Wechsle jederzeit zwischen Formatieren und Minifizieren; das Ergebnis aktualisiert sich beim Tippen. Räume unordentliches HTML, CSS und JavaScript auf oder verkleinere es für eine schnellere Website. Es läuft in deinem Browser und ist kostenlos und privat.
So formatierst oder minifizierst du Code
- Wähle Formatieren oder Minimieren.
- Wähle die Sprache: HTML, CSS oder JavaScript.
- Wähle zum Formatieren den Einzug: 2 Leerzeichen, 4 Leerzeichen oder Tab.
- Füge deinen Code in das Eingabefeld ein oder drücke Beispiel, um zu sehen, wie es funktioniert.
- Lies das Ergebnis unter Formatiert und drücke dann Kopieren.
- Leeren löscht die Eingabe.
Was Formatieren macht
Formatieren ändert nur Leerraum. CSS bekommt eine Deklaration pro Zeile, Regeln werden durch eine Leerzeile getrennt, Media Queries und verschachtelte Regeln werden eingerückt. JavaScript wird anhand der geschweiften Klammern neu eingerückt, mit einer Anweisung pro Zeile, während Strings, Template-Literale, reguläre Ausdrücke und for (;;)-Header genau so bleiben, wie sie geschrieben sind. HTML wird nach Verschachtelung eingerückt, wobei Inline-Elemente in derselben Zeile wie ihr Text bleiben, damit die Seite gleich dargestellt wird, und eingebettete <script>- und <style>-Blöcke werden mit den Formatierern für JavaScript und CSS formatiert.
Was Minifizieren macht
Minifizieren entfernt Kommentare und jedes Leerzeichen, das der Browser nicht braucht. Kommentare, die mit /*! beginnen, bleiben erhalten, weil sie meist eine Lizenz enthalten. JavaScript behält einen Zeilenumbruch überall dort, wo die automatische Semikolon-Einfügung davon abhängt, sodass Code ohne Semikolons weiter funktioniert. Namen werden nicht gekürzt und kein Code wird umgeschrieben, das Ergebnis verhält sich also genau wie das Original. In HTML wird der Inhalt von pre und textarea nie angetastet, und Leerraum zwischen Inline-Elementen bleibt als ein einzelnes Leerzeichen erhalten, damit Wörter nicht zusammenlaufen.
Grenzen, die du kennen solltest
Der Formatierer liest Code mit einem echten Tokenizer statt mit Suchen und Ersetzen, parst ihn aber nicht vollständig und erkennt daher nicht jeden Syntaxfehler. Findet er ein Problem, etwa einen nicht geschlossenen String, Kommentar oder eine offene Klammer, nennt er dir die Zeile. TypeScript, JSX und Template-Sprachen werden nicht unterstützt. Beim Minifizieren von HTML werden die Lücken zwischen Blockelementen wie Listeneinträgen entfernt; wenn ein Layout auf diesen Leerraum zwischen Inline-Block-Elementen angewiesen ist, prüfe es nach dem Minifizieren.
Tipps
- Behalte deine Originaldatei. Minifizierter Code ist schwer zu lesen und zu bearbeiten, minifiziere also eine Kopie zum Veröffentlichen.
- Teste deine Seite nach dem Minifizieren, vor allem wenn das Layout von Leerzeichen zwischen Elementen abhängt.
- Nutze das Formatieren, um Code zu lesen, den du nicht selbst geschrieben hast, etwa ein kopiertes Snippet oder eine komprimierte Datei.
- Wähle denselben Einzug wie dein Team, damit Änderungen klein bleiben.
- Vergleiche vorher und nachher mit dem Diff-Checker.
Für wen
Studierende, die Code lesen lernen, Freelancer, die die Website eines Kunden aufräumen, und kleine Unternehmen, die ihre Seiten für mehr Tempo verschlanken. Für JSON-Dateien nutze die JSON-Tools.
Privat von Grund auf
Dein Code wird auf dieser Seite in deinem Browser formatiert. Nichts wird hochgeladen, also ist es sicher für private oder unveröffentlichte Arbeit.
Fragen
Macht das Minifizieren meinen Code kaputt?
Er entfernt nur Kommentare und überflüssige Leerzeichen und schreibt deinen Code nicht um, das Verhalten bleibt also gleich. Teste das Ergebnis trotzdem immer.
Unterstützt es TypeScript oder JSX?
Nein. Unterstützt werden HTML, CSS und JavaScript.
Warum wurde ein Kommentar beibehalten?
Kommentare, die mit /*! beginnen, bleiben erhalten, weil sie meist eine Lizenz enthalten.