Zum Inhalt springen
🛠️
Whiz Tools

Kostenloser Code-Formatierer: Verschönern Sie JavaScript, Python, HTML und mehr

Formatieren Sie Code sofort mit korrekter Einrückung und Abstände. Unterstützt 12+ Sprachen, einschließlich JavaScript, Python, HTML, CSS und Java. Browserbasiert, sicher und kostenlos. Keine Anmeldung erforderlich.

Code-Formatierer

Formatieren Sie Ihren Code mit einem Klick. Wählen Sie eine Sprache, fügen Sie Ihren Code ein und lassen Sie ihn korrekt formatieren.

Anleitung:

  1. Wählen Sie Ihre Programmiersprache aus dem Dropdown-Menü.
  2. Fügen Sie Ihren unformatierten Code in den Eingabebereich ein.
  3. Klicken Sie auf die Schaltfläche 'Code formatieren'.
  4. Kopieren Sie das formatierte Ergebnis aus dem Ausgabebereich.
Ladekalkulator...
📚

Dokumentation

Was ist ein Code-Formatter?

Ein Code-Formatter ist ein Werkzeug, das Quellcode mit einheitlicher Einrückung, Zeilenumbrüchen und Abständen neu schreibt, ohne das Verhalten des Codes zu ändern. Dieser Code-Formatter läuft in einem Webbrowser. Er unterstützt 12 Programmiersprachen, darunter JavaScript, Python, HTML und CSS.

Funktionsweise dieses Code-Formatters

Das Werkzeug verwendet für jede Sprache einen anderen Regelsatz. Keine dieser Regeln erstellt einen vollständigen Syntaxbaum des Codes, außer bei JSON.

  • JSON wird mit dem integrierten JSON-Parser des Browsers geparst und anschließend mit einer Einrückung von zwei Leerzeichen wieder ausgegeben. Wenn das JSON ungültig ist, meldet das Werkzeug einen Fehler und zeigt keine Ausgabe an.
  • JavaScript, TypeScript, Java, C, C++ und C# verwenden denselben Formatter. Er durchläuft den Code Zeichen für Zeichen und verfolgt geschweifte Klammern, runde Klammern und Semikolons. Jedes { beginnt einen neuen eingerückten Block, und jedes } oder ; beendet eine Zeile. Kommentare und Zeichenketten in Anführungszeichen werden unverändert übernommen. Dieser Formatter fügt keine Leerzeichen um Operatoren oder nach Kommas ein, die im ursprünglichen Code fehlten – er erstellt nur Zeilenumbrüche und Einrückungen neu.
  • Python liest die vorhandene Einrückung jeder Zeile und erstellt sie mit vier Leerzeichen pro Ebene neu, entsprechend den Verschachtelungsregeln der Programmiersprache Python. Lange Zeilen werden nicht aufgeteilt, Leerzeilen nicht eingefügt und keine Abstände um Operatoren ergänzt; normalisiert wird nur die Einrückungstiefe jeder Zeile.
  • CSS entfernt zusätzliche Zeilenumbrüche und Leerraum und fügt anschließend nach jedem { und ; sowie vor jedem } einen Zeilenumbruch ein.
  • HTML und XML fügen für jede Ebene verschachtelter Tags einen Zeilenumbruch und zwei Leerzeichen Einrückung ein und erkennen standardmäßige selbstschließende Tags wie <br>, <img> und <input>.
  • SQL wandelt eine festgelegte Gruppe von Schlüsselwörtern wie SELECT, FROM, WHERE, JOIN und ORDER BY in Großbuchstaben um und beginnt vor jeder wichtigen Klausel eine neue Zeile.

Da nur der JSON-Pfad die Eingabe tatsächlich parst, erkennen die anderen Formatter keine Syntaxfehler wie eine fehlende Klammer oder eine nicht geschlossene Zeichenkette. Sie formatieren jeden übergebenen Text neu, auch wenn er nicht ausführbar wäre.

Unterstützte Sprachen

SpracheÜbliche DateierweiterungEinrückungsbreite
JavaScript.js2 Leerzeichen
TypeScript.ts2 Leerzeichen
HTML.html2 Leerzeichen
CSS.css2 Leerzeichen
Python.py4 Leerzeichen
Java.java4 Leerzeichen
C.c4 Leerzeichen
C++.cpp4 Leerzeichen
C#.cs4 Leerzeichen
SQL.sqlZeilenumbrüche nach Klauseln
JSON.json2 Leerzeichen
XML.xml2 Leerzeichen

Code formatieren

  1. Wählen Sie im Dropdown-Menü eine Programmiersprache aus.
  2. Fügen Sie den unformatierten Code in das Eingabefeld ein.
  3. Wählen Sie „Code formatieren“.
  4. Kopieren Sie das formatierte Ergebnis aus dem Ausgabefeld.

Die Formatierung erfolgt vollständig im Browser. Der Code wird nie an einen Server gesendet.

Beispiel für die JavaScript-Formatierung

Vor der Formatierung:

1function add(a, b) {
2    if (a > 0) { return a + b; }
3    return 0;
4}
5

Nach der Formatierung:

1function add(a, b) {
2  if (a > 0) {
3    return a + b;
4  }
5  return 0;
6}
7

Der Formatter hat den Code innerhalb von { } in eine eigene eingerückte Zeile verschoben und die Einrückung auf zwei Leerzeichen pro Ebene vereinheitlicht. Die Abstände um a > 0 und a + b hat er genau so belassen, wie er sie vorgefunden hat, da diese Abstände bereits vorhanden waren.

Beispiel für die Python-Formatierung

Vor der Formatierung:

1def calculate_average(numbers):
2  if len(numbers) == 0:
3    return 0
4  total = sum(numbers)
5  return total / len(numbers)
6

Nach der Formatierung:

1def calculate_average(numbers):
2    if len(numbers) == 0:
3        return 0
4    total = sum(numbers)
5    return total / len(numbers)
6

Der ursprüngliche Code verwendete zwei Leerzeichen pro Einrückungsebene. Der Formatter hat die Einrückung jeder Zeile mit vier Leerzeichen pro Ebene neu erstellt, entsprechend dem in PEP 8, dem offiziellen Styleguide für Python, beschriebenen Stil. Die Reihenfolge der Zeilen blieb unverändert, und Abstände innerhalb der Zeilen wurden nicht verändert.

Warum die Formatierung von Code wichtig ist

Uneinheitliche Einrückung erschwert es zu erkennen, wo eine Funktion, Schleife oder Bedingung endet. Von mehreren Personen bearbeiteter Code enthält oft eine Mischung aus Tabulator- und Leerzeicheneinrückungen oder Zeilen, die nicht mit dem zugehörigen Block ausgerichtet sind. Die Verarbeitung mit einem Formatter verleiht jeder Datei dieselbe visuelle Struktur. Dadurch lässt sie sich schneller überblicken, und eine falsch platzierte Klammer ist leichter zu erkennen.

Einschränkungen

  • Eingabegröße: Das Werkzeug akzeptiert bis zu 50.000 Zeichen Code. Längere Eingaben werden mit einer Fehlermeldung abgewiesen, bevor die Formatierung beginnt.
  • Keine Syntaxprüfung für die meisten Sprachen: Nur JSON-Eingaben werden geparst und validiert. Code in den anderen 11 Sprachen wird unverändert neu formatiert, auch wenn eine Klammer fehlt oder eine Zeichenkette nicht geschlossen ist. Die Ausgabe kann in diesem Fall falsch eingerückt sein, statt als Fehler gekennzeichnet zu werden.
  • Keine Änderungen an Operatorabständen: Die Formatter für JavaScript, TypeScript und die C-Sprachen ordnen nur Zeilenumbrüche und Einrückungen neu. Sie fügen keine Leerzeichen um +, = oder !== beziehungsweise nach einem Komma ein, wenn dort zuvor keines vorhanden war.
  • PHP wird nicht unterstützt: Bei Auswahl einer nicht unterstützten Sprache wird der Code unverändert zurückgegeben.

Häufig gestellte Fragen

Prüft dieses Werkzeug meinen Code auf Syntaxfehler? Nur bei JSON. Die JSON-Eingabe wird geparst, daher erzeugt ungültiges JSON eine Fehlermeldung. Code in den anderen unterstützten Sprachen wird ohne Prüfung auf gültige Syntax neu formatiert.

Sendet es meinen Code an einen Server? Nein. Die Formatierung erfolgt vollständig im Browser mit JavaScript. Der Code wird weder hochgeladen noch irgendwo gespeichert.

Wie viel Code kann höchstens formatiert werden? 50.000 Zeichen. Das Einfügen von mehr Zeichen erzeugt einen Fehler, bevor die Formatierung beginnt.

Fügt es fehlende Leerzeichen um meine Operatoren oder nach Kommas ein? Nein, bei JavaScript, TypeScript, Java, C, C++ und C#. Diese Formatter erstellen nur Einrückungen und Zeilenumbrüche um Klammern und Semikolons neu; den übrigen Inhalt jeder Zeile übernehmen sie unverändert.

Welche Einrückung wird verwendet? Zwei Leerzeichen für JavaScript, TypeScript, HTML, CSS, JSON und XML. Vier Leerzeichen für Python, Java, C, C++ und C#.

Warum sieht mein Code nach der Formatierung fast gleich aus? Wenn die Eingabe bereits einheitliche Abstände und eine einheitliche Klammerung verwendet, erstellt der Formatter hauptsächlich die Einrückung neu, sodass die Änderung gering ausfallen kann. Besonders nützlich ist er bei Code mit gemischter Einrückung oder Code, der auf sehr wenige Zeilen verkürzt wurde.