# JSX Formatter

Formatiere React-Komponenten und anderes JSX mit diesem JSX Formatter. Füge deinen Code ein. Das Werkzeug parst ihn als JavaScript-Modul mit JSX, gibt das JavaScript mit zwei Leerzeichen Einzug und Semikolons aus und setzt mehrzeilige JSX-Elemente mit verschachtelten Tags in Klammern untereinander. Syntaxfehler werden gemeldet, damit React-Entwickler lesbare Komponenten für Reviews, Debugging und Dokumentation erhalten.

## Häufig gestellte Fragen

### Wie funktioniert der JSX Formatter?

Zuerst wird der Code als JavaScript-Modul mit aktiviertem JSX geparst und in einem einheitlichen Stil ausgegeben. Anschließend werden JSX-Elemente nach denselben Regeln wie beim HTML Formatter angeordnet, sodass verschachtelte Block-Tags jeweils eigene eingerückte Zeilen erhalten.

### Wie werden mehrzeilige JSX-Elemente geschrieben?

Wenn ein Element Blockelemente wie div, section, p, ul oder h1 enthält, steht jedes Kindelement in einer eigenen Zeile und das gesamte Element wird in Klammern gesetzt. Elemente, die in eine Zeile passen, etwa ein einzelnes Komponenten-Tag, bleiben inline.

### Werden Fragmente und selbstschließende Komponenten unterstützt?

Ja, Fragmente in der Form <> und </> sowie selbstschließende Komponenten wie <Item key={1}/> werden geparst und beibehalten. Ihre Attribute und Ausdrücke in geschweiften Klammern werden unverändert übernommen.

### Was passiert bei Syntaxfehlern?

Der Parser hält an und das Werkzeug zeigt die Fehlermeldung an, zum Beispiel ein unerwartetes Token, statt teilweise formatierten Code auszugeben. Korrigiere die angezeigte Stelle und formatiere den Code erneut.

### Welchen Stil verwendet der JavaScript-Teil?

Blöcke werden mit zwei Leerzeichen eingerückt, pro Zeile steht eine Anweisung, um Operatoren stehen Leerzeichen und Anweisungen enden mit Semikolons. Der Stil lässt sich nicht ändern.

### Bleiben Kommentare erhalten?

Ja, Zeilen- und Blockkommentare in JavaScript bleiben erhalten. Kommentare innerhalb von JSX-Ausdrücken bleiben in ihren geschweiften Klammern.

### Unterstützt es TypeScript in TSX-Dateien?

Nein, Typannotationen gehören nicht zur JSX-Grammatik, die dieses Werkzeug parst. Daher wird TSX mit Typen als Syntaxfehler abgelehnt. Verwende für Code mit Typen den TypeScript Formatter.

### Ändert die Formatierung, wie meine Komponente gerendert wird?

JavaScript wird nur neu ausgegeben, und das Layout von JSX ändert den Leerraum zwischen Blockelementen. React ignoriert diesen, wenn die Elemente in eigenen Zeilen stehen. Prüfe Inline-Text neben Tags, wenn der genaue Abstand wichtig ist.

### Warum ist die Ausgabe als javascript-Codezaun formatiert?

JSX ist eine Erweiterung von JavaScript, daher wird das Ergebnis als Markdown-Codeblock mit der Kennzeichnung javascript ausgegeben. Kopiere die Zeilen zwischen den Begrenzungszeichen in deine .jsx-Datei.

### Wie groß darf meine Komponente sein?

Pro Ausführung sind bis zu 5 MB Code möglich. Größere Eingaben werden mit einer Meldung abgelehnt. Die Ausgabe entspricht der Option JSX des Code Formatters.

Deine Anzeige hier?

[Schreib uns eine E-Mail](mailto:hi@dennn.is?subject=Werbung%20auf%20OneClick%20Pro)

[Anzeige Die agentenfähige Plugin-Suite für WordPress.](https://sleekwp.com/?ref=oneclickpro)