Passa tra formatta e minimizza in qualsiasi momento; il risultato si aggiorna mentre scrivi. Sistema HTML, CSS e JavaScript disordinati, o riducili per un sito più veloce. Funziona nel tuo browser ed è gratis e privato.
Come formattare o minimizzare il codice
- Scegli Formatta o Minimizza.
- Scegli il linguaggio: HTML, CSS o JavaScript.
- Per la formattazione, scegli il rientro: 2 spazi, 4 spazi o Tab.
- Incolla il codice nella casella di input, oppure premi Esempio per vedere come funziona.
- Leggi il risultato sotto Formattato, poi premi Copia.
- Cancella svuota l'input.
Cosa fa la formattazione
La formattazione cambia solo gli spazi bianchi. Il CSS ottiene una dichiarazione per riga, regole separate da una riga vuota e media query e regole annidate rientrate. Il JavaScript viene re-indentato in base alle graffe con un'istruzione per riga, mentre stringhe, template literal, espressioni regolari e intestazioni for (;;) restano esattamente come scritte. L'HTML viene indentato in base all'annidamento, con gli elementi in linea sulla stessa riga del loro testo così la pagina appare uguale, e i blocchi <script> e <style> in linea vengono formattati con i formattatori JavaScript e CSS.
Cosa fa la minimizzazione
La minimizzazione rimuove i commenti e ogni spazio che il browser non richiede. I commenti che iniziano con /*! vengono mantenuti, perché di solito contengono una licenza. Il JavaScript mantiene un a capo dove l'inserimento automatico del punto e virgola ne dipende, quindi il codice scritto senza punti e virgola funziona ancora. I nomi non vengono accorciati e nessun codice viene riscritto, quindi il risultato si comporta esattamente come l'originale. Nell'HTML, il contenuto di pre e textarea non viene mai toccato, e lo spazio tra elementi in linea viene mantenuto come un solo spazio così le parole non si attaccano.
Limiti da conoscere
Il formattatore legge il codice con un vero tokenizer anziché con cerca e sostituisci, ma non lo analizza del tutto, quindi non coglie ogni errore di sintassi. Quando trova un problema, come una stringa, un commento o una parentesi non chiusi, ti dice la riga. TypeScript, JSX e i linguaggi di template non sono supportati. La minimizzazione dell'HTML rimuove gli spazi tra gli elementi di blocco come le voci di elenco; se un layout dipende da quello spazio tra elementi inline-block, controllalo dopo la minimizzazione.
Consigli
- Conserva il tuo file originale. Il codice minimizzato è difficile da leggere e modificare, quindi minimizza una copia per la pubblicazione.
- Prova la tua pagina dopo la minimizzazione, soprattutto se il layout dipende dagli spazi tra gli elementi.
- Usa la formattazione per leggere codice che non hai scritto, come uno snippet copiato o un file compresso.
- Scegli lo stesso rientro che usa il tuo team così le modifiche restano piccole.
- Confronta prima e dopo con il confronto delle differenze.
Chi lo usa
Studenti che imparano a leggere il codice, freelance che sistemano il sito di un cliente e piccole aziende che riducono il peso delle pagine per la velocità. Per i file JSON usa gli strumenti JSON.
Privato per progettazione
Il tuo codice viene formattato su questa pagina nel tuo browser. Niente viene caricato, quindi è sicuro per lavori privati o non rilasciati.
Domande
La minimizzazione romperà il mio codice?
Rimuove solo i commenti e gli spazi inutili e non riscrive il tuo codice, quindi il comportamento resta lo stesso. Prova sempre il risultato.
Supporta TypeScript o JSX?
No. Sono supportati HTML, CSS e JavaScript.
Perché un commento è stato mantenuto?
I commenti che iniziano con /*! vengono mantenuti perché di solito contengono una licenza.