# JSX Formatter

Formatteer React-componenten en andere JSX met deze JSX Formatter. Plak uw code en de tool parseert die als een JavaScript-module met JSX ingeschakeld, geeft de JavaScript weer met inspringing van twee spaties en puntkomma's, en zet meerregelige JSX-elementen zo neer dat geneste tags op eigen regels tussen haakjes staan. Syntaxfouten worden gemeld, zodat React-ontwikkelaars leesbare componenten terugkrijgen voor reviews, debugging en documentatie.

## Veelgestelde vragen

### Hoe werkt de JSX Formatter?

Eerst wordt de code als een JavaScript-module geparseerd met JSX ingeschakeld en in een consistente stijl weergegeven. JSX-elementen worden vervolgens volgens dezelfde regels neergezet als bij de HTML Formatter, zodat geneste block-tags eigen ingesprongen regels krijgen.

### Hoe worden meerregelige JSX-elementen geschreven?

Als een element block-level-kinderen bevat, zoals div, section, p, ul of h1, komt elk kind op een eigen regel te staan en wordt het hele element tussen haakjes geplaatst. Elementen die op één regel passen, zoals één componenttag, blijven inline.

### Worden fragments en zelfsluitende componenten ondersteund?

Ja, fragments geschreven als <> en </> en zelfsluitende componenten zoals <Item key={1}/> worden geparseerd en behouden. Hun attributen en expressies tussen accolades worden overgenomen zoals ze zijn geschreven.

### Wat gebeurt er bij syntaxfouten?

De parser stopt en de tool toont de melding, bijvoorbeeld een onverwacht token, in plaats van gedeeltelijk geformatteerde code terug te geven. Herstel de gemelde plek en formatteer opnieuw.

### Welke stijl gebruikt het JavaScript-gedeelte?

Blokken krijgen een inspringing van twee spaties, één statement per regel, spaties rond operators en puntkomma's aan het einde van statements. Er zijn geen opties om de stijl aan te passen.

### Blijven opmerkingen behouden?

Ja, regel- en blokcommentaar in de JavaScript blijven behouden. Commentaar binnen JSX-expressies blijft tussen de accolades staan.

### Ondersteunt het TypeScript in TSX-bestanden?

Nee, typeannotaties maken geen deel uit van de JSX-grammatica die deze tool parseert, dus TSX met types wordt als syntaxfout geweigerd. Gebruik de TypeScript Formatter voor getypeerde code.

### Verandert het formatteren hoe mijn component wordt weergegeven?

De JavaScript wordt alleen opnieuw weergegeven, en de JSX-indeling verandert de witruimte tussen block-elementen, die React negeert wanneer ze op afzonderlijke regels staan. Controleer inline tekst naast tags als exacte spatiëring belangrijk is.

### Waarom staat de uitvoer in een javascript-codefence?

JSX is een uitbreiding van JavaScript, dus het resultaat wordt teruggegeven als een Markdown-codeblok met de aanduiding javascript. Kopieer de regels tussen de hekjes naar uw .jsx-bestand.

### Hoe groot mag mijn component zijn?

Maximaal 5 MB code per bewerking; grotere invoer wordt geweigerd met een melding. De uitvoer is hetzelfde als de JSX-optie van de Code Formatter.

Hier adverteren?

[E-mail ons](mailto:hi@dennn.is?subject=Adverteren%20op%20OneClick%20Pro)

[Advertentie De plug-insuite voor agents van WordPress.](https://sleekwp.com/?ref=oneclickpro)