Code-Formatter & Beautifier
Code einfügen oder Datei öffnen, auf Formatieren klicken, fertig. Die Sprache wird automatisch erkannt: JavaScript, TypeScript, CSS, HTML, JSON, XML, SQL, YAML, Markdown und GraphQL, alles in Ihrem Browser.
Alles läuft in Ihrem Browser — Ihr Code wird nie auf einen Server hochgeladen.
Die Zeilenbreite gilt für JavaScript, TypeScript, CSS, SCSS, LESS, HTML, YAML, Markdown und GraphQL. Beim Formatieren werden weder Logik noch Typen oder Stilregeln geprüft.
Sobald Sie Code eingeben, wird die Sprache erkannt.
Code-Datei hier ablegen (bis 5 MB), Text einfügen oder ein Beispiel laden. Mit Strg+Eingabe formatieren.
Code im Browser formatieren und verschönern
Code aus einem minimierten Bundle, einem Log, einer Chatnachricht oder einem alten Projekt ist schwer zu lesen und noch schwerer zu prüfen. Dieser Code-Formatter bringt ihn mit einem Klick wieder in eine saubere, einheitlich eingerückte Form. Fügen Sie den Code ein, klicken Sie auf Formatieren (oder drücken Sie Strg+Eingabe), und das Ergebnis erscheint neben dem Original. Auf beiden Seiten stehen Zeilennummern, damit Sie beide Fassungen auf einen Blick vergleichen können.
Unterstützt werden die Formate, denen Entwickler am häufigsten begegnen: JavaScript mit JSX, TypeScript mit TSX, CSS, SCSS und LESS, HTML samt eingebetteten Skripten und Stilen, JSON, XML, SQL in dreizehn Dialekten, YAML, Markdown und GraphQL. Standardmäßig wird die Sprache automatisch erkannt, beim Öffnen einer Datei am Dateinamen, beim Einfügen am Text selbst. Kommen mehrere Sprachen infrage, sagt Ihnen das Tool das und nennt die wahrscheinlichen Kandidaten, statt stillschweigend den falschen Parser zu wählen.
Den Stil bestimmen Sie selbst. Wählen Sie zwei Leerzeichen, vier Leerzeichen oder Tabulatoren sowie eine Zeilenbreite von 80, 100 oder 120 Zeichen für alle Sprachen, die mit Prettier formatiert werden. Bei SQL legen Sie den Dialekt fest, zum Beispiel PostgreSQL, MySQL, SQL Server oder BigQuery. Für JSON gibt es zusätzlich die Schaltfläche Minimieren, die sämtlichen Leerraum entfernt, ohne Zahlen, Zeichenketten oder die Reihenfolge der Schlüssel anzutasten. Ihre Einstellungen merkt sich der Browser, und wer das Ergebnis lieber schon beim Tippen sehen möchte, kann die automatische Formatierung einschalten.
Wenn etwas nicht stimmt, ist die Meldung kurz und genau: die Sprache, was der Parser erwartet hat, dazu Zeile und Spalte. Ihre Eingabe wird nie überschrieben, und eine Schaltfläche setzt den Cursor direkt an die Fehlerstelle. Mit Rückgängig holen Sie zurück, was Sie versehentlich geleert oder ersetzt haben. Das Ergebnis lässt sich mit der passenden Dateiendung herunterladen, oder Sie öffnen beide Fassungen nebeneinander im Text-Diff-Checker, um genau zu sehen, was sich geändert hat.
Alles geschieht auf Ihrem Gerät. Die umfangreichen Formatierungs-Engines werden nur für die Sprache geladen, die Sie tatsächlich formatieren, und laufen in einem Hintergrund-Worker, sodass eine große Datei die Seite nicht einfrieren lässt. Beachten Sie die Grenzen: Dateien bis 5 MB lassen sich öffnen, Eingaben über 300.000 Zeichen können einige Sekunden dauern, und Eingaben über zwei Millionen Zeichen werden abgelehnt. Formatieren ist kein Linter und kein Compiler, es findet also keine Logikfehler, und manche exotische Syntax wird möglicherweise abgelehnt.
Häufig gestellte Fragen
Wird mein Code irgendwohin hochgeladen?
Nein. Der Code wird von Bibliotheken formatiert, die in einem Hintergrund-Thread in Ihrem Browser laufen. Es wird nichts an einen Server gesendet. Im lokalen Speicher dieses Browsers liegen nur Ihre Einstellungen und ein optionaler Entwurf, und Sie können das Eingabefeld jederzeit leeren.
Ändert das Formatieren, was mein Code tut?
Der Formatierer ändert nur das Erscheinungsbild: Einrückung, Zeilenumbrüche und Abstände. Er kann außerdem Anführungszeichen vereinheitlichen, optionale Klammern setzen oder entfernen und Semikolons konsistent verwenden, die Bedeutung bleibt aber gleich. Logik, Typen und Lint-Regeln werden nicht geprüft: Korrekter Code bleibt korrekt, fehlerhafter Code bleibt fehlerhaft.
Wie wird die Sprache erkannt?
Beim Öffnen einer Datei entscheidet die Dateiendung. Sonst analysiert das Tool den Text selbst: Tags, Klammern, Schlüsselwörter und typische Satzzeichen. Wenn zwei Sprachen sich ähneln, etwa CSS und SCSS oder JavaScript und TypeScript, fragt es nach, statt zu raten. In der Liste „Sprache“ können Sie jederzeit selbst eine auswählen.
Was passiert, wenn mein Code einen Syntaxfehler enthält?
Die Ausgabe bleibt leer, Ihre Eingabe bleibt unverändert, und Sie erhalten eine kurze Meldung mit Zeile und Spalte. Mit der Schaltfläche „In der Eingabe anzeigen“ springen Sie zur Stelle, korrigieren den Fehler und formatieren erneut.
Kann ich hier Code minimieren?
Nur JSON, denn dort ist das Entfernen von Leerraum immer unbedenklich. JavaScript oder CSS richtig zu minimieren erfordert einen eigenen Minifier, weil das Umbenennen von Variablen oder das Zusammenfassen von Regeln das Verhalten ändern kann; das versucht dieses Tool deshalb nicht. Für eine gründlichere SQL-Syntaxprüfung nutzen Sie den SQL-Formatierer & Validator.