Cosa fa un formattatore JavaScript?
Un formattatore riscrive il codice con uno stile uniforme senza cambiarne il comportamento: stesso rientro ovunque, a capo quando una riga è troppo lunga, spazi coerenti attorno a operatori e parentesi. Serve a leggere codice altrui, a rendere comprensibile uno script minificato e a evitare discussioni di stile nelle revisioni.
Questo strumento usa Prettier con il parser Babel, quindi accetta JavaScript moderno, JSX (componenti React) e anche JSON. Puoi scegliere il rientro (2 spazi, 4 spazi o tab), la larghezza di riga (80, 100 o 120), se usare i punti e virgola, virgolette singole o doppie e se aggiungere le virgole finali (trailing comma) in oggetti, array e parametri.
Su codice minificato, il formattatore ripristina rientri e a capo, rendendolo di nuovo navigabile. Non può però recuperare i nomi originali delle variabili: se il minificatore le ha rinominate in a, b, c, restano così. Se il codice contiene un errore di sintassi, vedi il messaggio del parser con la posizione del problema.
Le stesse opzioni corrispondono a quelle di un file .prettierrc, quindi puoi replicare le impostazioni del tuo progetto: per esempio senza punti e virgola, con virgolette singole e virgole finali, come in molte basi di codice moderne. Il risultato si incolla nel repository senza introdurre differenze di stile.
Il codice viene formattato nel tuo browser e non viene caricato su un server. La prova gratuita copre un file o un testo incollato, che puoi riformattare con altre opzioni. ToolStudio Pro offre uso illimitato, più file insieme scaricati in uno ZIP e nessuna pubblicità.
Come formattare codice JavaScript
- Incolla JavaScript, JSX o JSON nel riquadro oppure trascina o scegli un file.
- Imposta rientro e larghezza di riga.
- Scegli punti e virgola, tipo di virgolette e virgole finali.
- Clicca sul pulsante per formattare.
- Copia il codice formattato o scaricalo.
Quando formattare il JavaScript
- Rendere leggibile uno script minificato per capire cosa fa.
- Formattare un JSON compatto restituito da un’API.
- Uniformare lo stile di un componente React scritto in JSX.
- Applicare le regole di stile del team a uno snippet senza configurare Prettier in locale.
- Preparare esempi di codice puliti per documentazione, blog o Stack Overflow.
Formattare non significa de-minificare
Un minificatore fa due cose: toglie spazi e a capo e, con il mangle, rinomina variabili e funzioni locali. Il formattatore annulla completamente la prima: il codice torna indentato e diviso in righe. La seconda invece è irreversibile, perché i nomi originali non sono più nel file. Il risultato è leggibile nella struttura ma con nomi brevi; per il codice tuo, conserva sempre il sorgente o usa le source map.
Domande Frequenti
Supporta JSX e JSON?
Sì. Il parser Babel di Prettier gestisce JavaScript moderno, JSX e JSON.
Supporta TypeScript?
No, questo strumento usa il parser Babel per JavaScript, JSX e JSON.
Recupera i nomi originali delle variabili da codice minificato?
No. Ripristina rientri e a capo, ma i nomi accorciati dal minificatore non si possono ricostruire.
Il codice viene caricato su un server?
No. Prettier viene eseguito nel tuo browser.
È gratis?
Puoi provarlo gratis con un file o un testo incollato e riformattarlo con altre opzioni quante volte vuoi. Per nuovo codice serve ToolStudio Pro: uso illimitato, più file insieme in uno ZIP e niente pubblicità, disdicibile quando vuoi.