Code-Formatierer

Was das Tool macht

Der Code-Formatierer nimmt gequetschten, minifizierten oder uneinheitlich eingerückten Code und gibt ihn in einem sauberen, konsistenten Stil wieder aus. Er unterstützt die Sprachen, die dir in der Webentwicklung am häufigsten begegnen: HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML und GraphQL.

Unter der Haube läuft Prettier, der Formatierer, den Millionen von Projekten nutzen. Das Ergebnis sieht daher genauso aus wie Code, der in VS Code oder per Pre-Commit-Hook formatiert wurde. Der Parser einer Sprache wird erst geladen, wenn du sie auswählst – so bleibt die Seite schnell.

So funktioniert es

1. Wähle die Sprache deines Codes.
2. Füge den Code ein oder öffne eine Datei.
3. Wähle eine Einrückung (2 Leerzeichen, 4 Leerzeichen oder Tabs) und eine Zeilenbreite. Zeilen, die länger als die Breite sind, werden umbrochen, wo die Sprache es erlaubt.
4. Lege bei JavaScript und TypeScript fest, ob Anweisungen mit Semikolons enden. Wähle bei Skripten und Stylesheets Einfache Anführungszeichen, wenn dein Projekt sie bevorzugt.
5. Kopiere das Ergebnis oder lade es herunter.

Beispiel

Das Beispiel ist eine einzeilige HTML-Seite mit Inline-CSS und -JavaScript. Nach dem Formatieren steht jedes Element in einer eigenen Zeile, die CSS-Regeln sind mit einer Deklaration pro Zeile ausgeschrieben, und die Arrow-Function im Skript bekommt Klammern und ein Semikolon:

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

Tipps

• Formatieren ist auch ein schneller Syntaxcheck. Kann Prettier die Eingabe nicht parsen, zeigt die Fehlermeldung Zeile und Spalte, sodass du direkt zum Fehler springen kannst.
• XML wird so formatiert, dass Leerraum als bedeutungslos gilt, damit verschachtelte Tags eingerückt werden. Wenn dein Dokument auf exakten Leerraum innerhalb von Elementen angewiesen ist, prüfe das Ergebnis, bevor du es verwendest.
• Du brauchst das Gegenteil? Verwende den JavaScript- und CSS-Minifier, um Code für die Produktion zu verkleinern, oder den JSON-Formatierer zur Validierung und Minifizierung von JSON.