# Formatter JSX

Formattate i componenti React e altri JSX con questo Formatter JSX. Incollate il codice e lo strumento lo analizza come modulo JavaScript con JSX attivato, stampa JavaScript con rientri di due spazi e punti e virgola, e dispone gli elementi JSX su più righe con i tag annidati su righe separate tra parentesi. Gli errori di sintassi vengono segnalati, così gli sviluppatori React ottengono rapidamente componenti leggibili per revisioni, debug e documentazione.

## Domande frequenti

### Come funziona il Formatter JSX?

Prima analizza il codice come modulo JavaScript con JSX attivato e lo stampa con uno stile coerente. Gli elementi JSX vengono quindi disposti secondo le stesse regole del Formatter HTML, così i tag di blocco annidati occupano righe proprie con rientro.

### Come vengono scritti gli elementi JSX su più righe?

Quando un elemento contiene elementi figli di livello blocco, come div, section, p, ul o h1, ogni elemento figlio va su una riga separata e l’intero elemento viene racchiuso tra parentesi. Gli elementi che stanno su una sola riga, come un singolo tag di componente, restano in linea.

### Sono supportati i fragment e i componenti autocontenuti?

Sì, i fragment scritti come <> e </> e i componenti autocontenuti come <Item key={1}/> vengono analizzati e mantenuti. I loro attributi e le espressioni tra parentesi graffe vengono copiati così come sono.

### Cosa succede in caso di errori di sintassi?

L’analizzatore si ferma e lo strumento mostra il relativo messaggio, ad esempio un token imprevisto, invece di restituire codice formattato solo in parte. Correggete il punto segnalato e formattate di nuovo.

### Quale stile usa la parte JavaScript?

I blocchi hanno un rientro di due spazi, un’istruzione per riga, spazi intorno agli operatori e punti e virgola alla fine delle istruzioni. Non ci sono opzioni per modificare lo stile.

### I commenti vengono mantenuti?

Sì, i commenti su riga e a blocco nel JavaScript vengono mantenuti. I commenti all’interno delle espressioni JSX restano tra le parentesi graffe.

### Supporta TypeScript nei file TSX?

No, le annotazioni di tipo non fanno parte della grammatica JSX analizzata da questo strumento, quindi TSX con tipi vengono rifiutati come errore di sintassi. Per il codice tipizzato, usate il Formatter TypeScript.

### La formattazione cambierà il rendering del mio componente?

Il JavaScript viene solo ristampato e la disposizione JSX modifica gli spazi bianchi tra gli elementi di blocco, che React ignora quando si trovano su righe separate. Controllate il testo in linea accanto ai tag se la spaziatura esatta è importante.

### Perché l'output è racchiuso in un fence javascript?

JSX è un’estensione di JavaScript, quindi il risultato viene restituito come blocco di codice Markdown contrassegnato come javascript. Copiate le righe tra i delimitatori nel vostro file .jsx.

### Quanto può essere grande il mio componente?

Fino a 5 MB di codice per esecuzione; gli input più grandi vengono rifiutati con un messaggio. L’output è uguale all’opzione JSX del Code Formatter.

Il tuo annuncio qui?

[Scrivici](mailto:hi@dennn.is?subject=Pubblicit%C3%A0%20su%20OneClick%20Pro)

[Annuncio La suite di plugin pronta per gli agenti di WordPress.](https://sleekwp.com/?ref=oneclickpro)