Come rendere leggibile il codice minificato
Incolla un foglio di stile su una sola riga, una risposta API senza a capo o uno script rientrato metà con tab e metà con spazi, e rileggilo con un layout uniforme. Questo formattatore di codice esegue Prettier 3 dentro la pagina e conosce JavaScript (anche JSX), JSON, CSS, SCSS, LESS e HTML.
Dal codice incollato al risultato copiato
- Incolla il codice nel riquadro a sinistra, oppure premi Codice di esempio per caricarne uno nel linguaggio scelto.
- Lascia Linguaggio su «Rilevamento automatico» o sceglilo tu. Sotto il riquadro compare il linguaggio rilevato.
- Imposta Rientro (2 spazi, 4 spazi o tabulazione) e Larghezza riga (80, 100 o 120). Per JavaScript ci sono anche virgolette, punto e virgola, virgole finali e spazio nelle graffe.
- Controlla il risultato a destra e il numero di righe prima e dopo, poi premi Copia o Scarica. Il file si chiama
formatted.js,.json,.css,.scss,.lesso.html.
Opzioni spente per un linguaggio
Le opzioni che non valgono per un linguaggio sono disattivate, e una nota sotto le impostazioni dice quali. JSON ignora virgolette e virgole finali. CSS, SCSS e LESS ignorano punto e virgola, virgole finali e spazio nelle graffe. L’HTML fa eccezione: il markup non ha queste impostazioni, ma i blocchi script e style seguono le tue scelte.
Cosa cambia Prettier oltre agli spazi
Con le impostazioni predefinite Prettier trasforma le virgolette singole in doppie, aggiunge i punto e virgola mancanti e mette una virgola dopo l’ultimo elemento di una lista su più righe. Puoi invertire ognuna di queste scelte. I commenti restano. Gli errori no: se il codice di partenza ha un bug, lo ha anche quello formattato.
Un dettaglio sorprende negli oggetti JSON e JavaScript: se la prima chiave è sulla stessa riga della graffa di apertura e l’oggetto sta nella larghezza di riga, resta su una riga sola. Metti la prima chiave a capo e l’oggetto rimane espanso.
Rilevamento, errori di sintassi e il limite di 2.000.000 di caratteri
Il rilevamento automatico è una stima breve, non un parser. Se il testo comincia con < è HTML. Se comincia con una graffa o una parentesi quadra e si legge come JSON, è JSON. Regole come a { color: red; } senza function, const o => sono un foglio di stile, e le variabili SCSS o LESS indicano i due dialetti. Tutto il resto è JavaScript. Se la stima sbaglia, scegli il linguaggio a mano.
Se il codice non si legge, vedi riga, colonna e la prima riga del messaggio di Prettier. Oltre 2.000.000 di caratteri lo strumento rifiuta l’input. TypeScript, Vue e Markdown non sono inclusi.
Dove va il codice mentre lo formatti
La prima volta la pagina carica da questo sito i file di Prettier che servono. Dopo, la formattazione avviene in locale e il codice non viene inviato a nessuno. Puoi verificarlo nel pannello di rete del browser mentre premi un pulsante. Lo strumento analizza e stampa il testo, non lo esegue mai. Copia usa gli appunti, Scarica salva un file dalla pagina.