Formattatore e abbellitore di codice
Incolla il codice o apri un file, premi Formatta e ottieni un testo ordinato. Il linguaggio è riconosciuto in automatico — JavaScript, TypeScript, CSS, HTML, JSON, XML, SQL, YAML, Markdown e GraphQL, tutto nel tuo browser.
Tutto avviene nel tuo browser: il codice non viene mai caricato su alcun server.
La larghezza riga vale per JavaScript, TypeScript, CSS, SCSS, LESS, HTML, YAML, Markdown e GraphQL. La formattazione non controlla mai logica, tipi o regole di stile.
Il linguaggio viene riconosciuto appena aggiungi del codice.
Trascina qui un file di codice (fino a 5 MB), incolla il testo o carica un esempio. Premi Ctrl+Invio per formattare.
Formattare e abbellire il codice nel browser
Il codice copiato da un bundle minificato, da un log, da un messaggio in chat o da un vecchio progetto è difficile da leggere e ancora più difficile da rivedere. Questo formattatore lo riporta a un testo ordinato e con rientri coerenti con un solo clic. Incolla il codice, premi Formatta (o Ctrl+Invio) e il risultato compare accanto all'originale, con i numeri di riga su entrambi i lati per confrontarli a colpo d'occhio.
Lo strumento copre i formati che gli sviluppatori incontrano più spesso: JavaScript con JSX, TypeScript con TSX, CSS, SCSS e LESS, HTML con script e stili incorporati, JSON, XML, SQL in tredici dialetti, YAML, Markdown e GraphQL. Di norma il linguaggio viene riconosciuto da solo, dal nome del file quando ne apri uno e dal testo quando incolli. Se il testo potrebbe essere più cose, lo strumento te lo dice e propone i candidati più probabili, invece di scegliere in silenzio il parser sbagliato.
Lo stile lo decidi tu. Puoi scegliere due spazi, quattro spazi o tabulazioni, e una larghezza di riga di 80, 100 o 120 caratteri per i linguaggi formattati con Prettier. Per l'SQL puoi indicare il dialetto, come PostgreSQL, MySQL, SQL Server o BigQuery. Per il JSON c'è anche il pulsante Minifica, che toglie ogni spazio senza toccare numeri, stringhe o ordine delle chiavi. Le impostazioni restano salvate nel browser e, se preferisci vedere il risultato mentre scrivi, puoi attivare la formattazione automatica.
Quando qualcosa non va, il messaggio è breve e preciso: il linguaggio, che cosa si aspettava il parser, la riga e la colonna. L'input non viene mai sovrascritto e un pulsante porta il cursore sul punto dell'errore. Il pulsante Annulla recupera ciò che hai svuotato o sostituito per sbaglio; puoi scaricare il risultato con l'estensione giusta per il suo linguaggio, oppure aprire le due versioni affiancate in Confronto testi per vedere esattamente che cosa è cambiato.
Tutto avviene sul tuo dispositivo. I motori di formattazione più pesanti vengono scaricati solo per il linguaggio che formatti davvero e girano in un worker in background, così un file grande non blocca la pagina. Tieni presenti i limiti: si possono aprire file fino a 5 MB, gli input oltre 300.000 caratteri possono richiedere qualche secondo e quelli oltre due milioni di caratteri vengono rifiutati. La formattazione non è un linter né un compilatore: non trova errori di logica e qualche sintassi insolita potrebbe essere rifiutata.
Domande frequenti
Il mio codice viene caricato da qualche parte?
No. Il codice viene formattato da librerie che girano dentro il tuo browser, in un thread in background. Non viene inviato nulla a un server. Nella memoria locale di questo browser restano solo le tue impostazioni e, se vuoi, una bozza; puoi svuotare la casella quando vuoi.
La formattazione cambia il comportamento del mio codice?
Il formattatore cambia soltanto l'aspetto: rientri, a capo e spaziatura. Può anche uniformare le virgolette, aggiungere o togliere parentesi facoltative e sistemare i punti e virgola in modo coerente, ma il significato resta lo stesso. Non controlla logica, tipi o regole di lint: se il codice è corretto, il risultato lo è; se è sbagliato, resta sbagliato.
Come viene riconosciuto il linguaggio?
Se apri un file, decide l'estensione. Altrimenti lo strumento osserva il testo stesso: tag, parentesi graffe, parole chiave e punteggiatura tipica. Quando due linguaggi si somigliano, per esempio CSS e SCSS oppure JavaScript e TypeScript, ti chiede di scegliere invece di tirare a indovinare. Puoi sempre scegliere il linguaggio a mano dall'elenco Linguaggio.
Che cosa succede se il codice ha un errore di sintassi?
L'output resta vuoto, l'input rimane esattamente com'era e ricevi un breve messaggio con riga e colonna. Usa il pulsante Mostra nell'input per saltare al punto indicato, correggi e premi di nuovo Formatta.
Posso minificare il codice qui?
Solo il JSON, dove togliere gli spazi è sempre sicuro. Minificare bene JavaScript o CSS richiede un minificatore dedicato, perché rinominare le variabili o unire le regole può cambiare il comportamento, quindi questo strumento non ci prova. Per un controllo più approfondito della sintassi SQL usa SQL Formatter & Validator.