Formattatore e minificatore di codice

Cos'è Formattatore e minificatore di codice?

Un formattatore e minificatore di codice online e gratuito che abbellisce o minifica HTML, CSS e JavaScript senza mai uscire dal tuo browser. Scegli il linguaggio, poi seleziona Abbellisci per reindentare codice disordinato o su una sola riga con rientro di 2 spazi, 4 spazi o tabulazione, oppure Minifica per comprimerlo. L'abbellimento è basato su js-beautify; la minificazione di JavaScript usa Terser per accorciare i nomi e ridurre le dimensioni, mentre CSS e HTML vengono compattati rimuovendo i commenti e riducendo gli spazi ridondanti. Gli sviluppatori web lo usano per rendere leggibile il codice di terze parti minificato, ridurre fogli di stile e script prima del deploy e ripulire frammenti incollati dall'output della build.

Come usare Formattatore e minificatore di codice

1. Scegli il linguaggio del tuo sorgente: HTML, CSS o JS.
2. Scegli l'azione: Abbellisci per formattare o Minifica per comprimere.
3. Per Abbellisci, scegli il rientro: 2 spazi, 4 spazi o Tabulazione.
4. Incolla o digita il tuo codice nella casella di input: l'output si aggiorna automaticamente.
5. Usa il pulsante Copia per prendere il risultato, oppure fai clic su Pulisci per svuotare l'input e ricominciare.

Esempi

a{color:red;font-weight:bold}

a {
  color: red;
  font-weight: bold
}

function add(first, second) {
  return first + second;
}

function add(n,d){return n+d}

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

<ul><li>One</li><li>Two</li></ul>

Domande frequenti

Il mio codice viene caricato su un server?

No. L'abbellimento e la minificazione avvengono tutti localmente nel tuo browser: js-beautify e Terser vengono caricati come script ed eseguiti sul tuo dispositivo. Il tuo codice non lascia mai la tua macchina e lo strumento continua a funzionare offline.

Quali linguaggi e azioni sono supportati?

Tre linguaggi - HTML, CSS e JavaScript - ciascuno con due azioni: Abbellisci (formattare con il rientro scelto) e Minifica (comprimere). JavaScript viene minificato con Terser, mentre CSS e HTML vengono compattati rimuovendo i commenti e riducendo gli spazi.

Quale rientro posso scegliere?

Quando abbellisci puoi reindentare con 2 spazi, 4 spazi o un carattere di tabulazione. Il rientro si applica solo ad Abbellisci; Minifica rimuove gli spazi e ignora questa impostazione.

Perché minificando il mio JavaScript è comparso un errore?

Terser analizza il tuo JavaScript prima di minificarlo, quindi un errore di sintassi lo blocca e il messaggio viene mostrato sopra l'output. Correggi il punto segnalato - spesso una parentesi o una stringa non chiusa, o un token vagante - e il risultato viene ricostruito automaticamente.

L'output si aggiorna da solo?

Sì. Il risultato viene ricostruito ogni volta che cambi input, linguaggio, azione o rientro, così non devi mai premere un pulsante per formattare: basta copiare l'output quando va bene.