Costruisco strumenti per vivere, e la singola cosa più comune che faccio prima di leggere chiunque's front end è far passare il loro HTML attraverso un formattatore Modelli server sputano markup su una riga I bundler lo collassano Arriva uno snippet qualcuno incolla in Slack con tre livelli di nesting appiattiti in un muro di parentesi angolari Non posso debuggare ciò che non riesco a leggere, quindi la prima mossa è sempre la stessa: incollalo, colpisci abbellisci e lascia che la struttura si riveli Questa guida è quella che vorrei avessi consegnato il mio io più giovane, che era solito reindentare markup a mano e ha sbagliato metà del tempo.
tl; dr: Un formattatore HTML re-indenta il markup in modo da poter leggere la sua struttura, e lo minimizza di nuovo in modo che venga spedito in piccolo Usa abbellisci mentre stai costruendo e debuggando, minifica per la produzione Il Formatter HTML su Toolz.dev fa entrambe le cose nel tuo browser, mantiene lo script, lo stile e il contenuto pre byte per byte e non carica mai nulla.
Che cosa è un formattatore HTML?
Un formattatore HTML è uno strumento che analizza il tuo markup nel suo albero dei tag e lo stampa indietro con un rientro coerente, un livello per profondità di annidamento Questa è la direzione di abbellimento Il contrario, minify, spoglia gli spazi bianchi insignificanti tra i tag in modo che il file sia il più piccolo possibile senza modificare il modo in cui un browser lo esegue La maggior parte dei buoni formattatori, incluso quello su Toolz.dev, fanno entrambi dallo stesso input.
La parola & quot;insignificant" sta facendo un vero lavoro in quella frase In HTML, alcuni spazi bianchi contano e altri no. La nuova riga e due spazi che metti tra una chiusura </li> e il prossimo <li> non modificare nulla sulla pagina renderizzata, quindi un formattatore è libero di aggiungerli, rimuoverli o normalizzarli Ma gli spazi all'interno di un <pre> blocco, ovvero il singolo spazio tra due in linea <a> elementi, fanno parte di ciò che vede l'utente Un formattatore che non capisce che la differenza rompe felicemente il tuo layout Questa è la linea tra un formattatore che aiuta e uno di cui impari a diffidare.
Se avete usato Più carino nel tuo editor, conosci già la sensazione: smetti di preoccuparti del rientro perché uno strumento lo garantisce Un formattatore basato su browser ti dà la stessa garanzia per snippet una tantum, output generato e markup che non controlli, senza impostare un progetto.
Perché l'HTML finisce in disordine in primo luogo?
Aiuta a sapere da dove viene il pasticcio, perché ti dice cosa deve sopravvivere un formattatore.
La prima fonte è il rendering del server Un modello PHP, una vista Rails o un file Blade emette HTML con qualunque spazio bianco il motore del template si sentisse di produrre, e dopo l'esecuzione del middleware di minificazione, spesso è lungo una singola riga di migliaia di caratteri Quando qualcosa sembra sbagliato nel browser e si colpisce & quot; Visualizza sorgente, & quot; questo è ciò che si ottiene.
La seconda fonte è copia e incolla Prendi un componente da un sistema di progettazione, un frammento da un CMS o un modello di posta elettronica che qualcuno ti ha inviato e trasporta qualunque spaziatura abbia utilizzato la fonte: schede e spazi misti, nesting incoerente, spazi bianchi finali Trascorro gran parte della mia settimana all'interno di WordPress e output CMS headless, e il markup generato da CMS è tra i peggiori, perché è assemblato da frammenti che sono stati formattati ciascuno in modo diverso.
La terza fonte è il markup generato Strumenti di costruzione, editor WYSIWYG e funzioni di esportazione producono HTML che non è mai stato pensato per essere letto da un essere umano È corretto, ma è opaco Un formattatore lo trasforma di nuovo in qualcosa che puoi controllare.
Il filo conduttore è che a nessuna di queste fonti interessa se puoi leggere il risultato Questo è il tuo lavoro e un formattatore è il modo più veloce per farlo.
Come faccio a formattare HTML online?
Il flusso di lavoro su Toolz.dev richiede circa dieci secondi:
- Apri il Formatter HTML e incolla il tuo markup nel pannello di input Non importa se viene minificato su una riga, rientrato in modo incoerente o su un frammento nudo.
- Scegli Abbellisci per espanderlo o Minifica per comprimerlo.
- Per abbellire, scegli il tuo rientro: 2 spazi, 4 spazi o schede Due spazi è il valore predefinito comune del Web.
- Opzionalmente spunta & quot; Rimuovi commenti& quot; per eliminare i commenti HTML dall'output.
- Copia il risultato o scaricalo come an
.htmlfile.
Tutto gira lato client Il parser è JavaScript nel tuo browser, quindi il markup non tocca mai un server Questo conta più di quanto la gente supponga, su cui tornerò.
Qual è la differenza tra abbellire e minimizzare?
Queste sono operazioni opposte che condividono un parser e sapere quando raggiungerle è la maggior parte dell'abilità.
La bellezza è per gli esseri umani Aggiunge interruzioni di riga e rientro in modo che il nesting sia visibile, che è ciò che si desidera durante la modifica, il debug, la diffusione di due versioni o la revisione di una richiesta pull Quando sto dando la caccia a un bug di layout, abbellisco prima in modo da poter vedere quale elemento è non chiuso o annidato di un livello troppo profondo.
La minimizzazione è per le macchine Rimuove gli spazi bianchi che un browser ignora quindi il file è più piccolo e veloce da trasferire Minifichi HTML per lo stesso motivo per cui minifichi CSS o JavaScript: byte nel tempo di costo del filo, e su una grande pagina gli spazi bianchi si sommano Se ti appoggi già al Minifier HTML per la compressione della produzione, il formattatore è lo strumento che si utilizza per leggere nuovamente quell'output quando qualcosa si rompe.
Ecco come si confrontano le due direzioni sulle decisioni che effettivamente differiscono:
| Aspetto | abbellire | minimizzare |
|---|---|---|
| traguardo | leggibilità | File più piccolo |
| Spazio bianco tra i tag | Aggiunto e normalizzato | tolto |
| Dimensione dell'uscita | Più grande | Più piccolo |
| Quando utilizzare | Modifica, debug, revisione | Produzione, trasferimento |
| Rientranza | 2 spazi, 4 spazi o schede | nessuno |
| Risultato reso | identico | identico |
L'ultima riga è quella importante Nessuna delle due operazioni cambia l'aspetto della pagina Solo gli spazi bianchi che un browser considera modifiche insignificanti Se un formattatore altera mai il tuo output renderizzato, si tratta di un bug nel formattatore, non di una proprietà di formattazione.
La formattazione interromperà il mio JavaScript, CSS o testo preformattato?
Questa è la domanda che separa un giocattolo da uno strumento, ed è la ragione per cui sono esigente su quale formattatore utilizzo.
Alcuni elementi contengono contenuti in cui spazi bianchi e caratteri sono significativi e non devono essere toccati. IL Standard HTML WHATWG in modo non ingenuo script e style come elementi di testo grezzo e textarea e title come elementi di testo grezzo escapabili All'interno di essi, un formattatore deve trattare il contenuto come opaco Se tenta di trattenere JavaScript in un script tag, può spostare il contenuto di un modello letterale, modificare un'espressione regolare o spostare una riga all'interno di una stringa multi-riga e ora il codice si comporta in modo diverso Non si tratta di una modifica di formattazione, ovvero un bug introdotto dal formattatore.
la pre element è un caso correlato Il suo scopo è quello di preservare gli spazi bianchi, quindi il suo contenuto di testo viene visualizzato esattamente come scritto Un formattatore che rientra all'interno <pre> cambia visibilmente la pagina.
Il formattatore Toolz.dev gestisce tutti questi trattando script, style, pre, textarea, e title come contenuto grezzo: re-indenta l'HTML intorno a loro ma copia testualmente il loro testo interno Il tuo codice e il testo preformattato escono byte per byte identici Quando ho testato questo mentre lo costruivo, la barra di accettazione era semplice: a <script> contenente if(a<b){x=1} deve sopravvivere intatto, e lo fa Se stai lavorando con markup che contiene script o stili in linea, questa è la proprietà da controllare prima di fidarti di qualsiasi formattatore.
Un formattatore può gestire HTML rotto o incompleto?
Il vero HTML è raramente ben formato come lo è l'XML, e un formattatore che richiede la perfezione è inutile I browser sono notoriamente tolleranti: il Algoritmo di analisi HTML definisce esattamente come gestire i tag finali omessi e gli elementi non nidificati, motivo per cui una pagina con un mancante </li> rende ancora bene Un buon formattatore prende in prestito la stessa tolleranza.
Il caso più comune sono i tag finali opzionali L'HTML ti consente di omettere il tag di chiusura su elementi come li, p, td, tr, e option, perché la specifica dice un aperto li è implicitamente chiuso quando il successivo li inizia. COSÌ <ul><li>a<li>b</ul> è valido e il formattatore Toolz.dev applica queste regole di chiusura implicita per produrre <li>a</li> e <li>b</li> sulle loro linee, esattamente come un browser costruirebbe l'albero. UN <p> viene chiuso automaticamente quando un elemento di blocco si apre al suo interno, perché un paragrafo non può contenere contenuto di blocco.
Il secondo caso è il markup veramente rotto: un tag aperto e mai chiuso, o un tag di chiusura vagante senza apertura corrispondente Il formattatore chiude qualsiasi cosa rimasta penzolante alla fine del documento e lo segnala come un avviso, in modo da sapere che l'input era incompleto piuttosto che indovinare silenziosamente Quei avvisi sono spesso il modo più veloce per trovare il bug esatto che sei venuto a risolvere.
Confrontare quel comportamento con un formattatore rigoroso e con il farlo manualmente:
| avvicinare | Tag finali omessi | Tag non chiusi | affretta |
|---|---|---|---|
| Formattatore tollerante (Toolz.dev) | Applica regole implicite-chiuse | Chiude e avvisa automaticamente | istante |
| Formatatore rigoroso in stile XML | Spesso errori fuori | Errori fuori | Istantaneo quando funziona |
| Reindentazione manuale | Lo rintracci tu stesso | Facile da perdere | Lento e soggetto a errori |
Ero in quella fila inferiore, trattenevo a mano e mi mancava un non chiuso div tre volte su dieci Lo strumento tollerante vince perché il vero markup è disordinato e vuoi che il casino sia emerso, non rifiutato.
Quando dovrei usare un formattatore rispetto al mio editor?
Se possiedi il file ed è nel tuo progetto, il tuo editor più Prettier o un equivalente è la casa giusta per la formattazione, perché funziona in salvataggio e rimane coerente in tutto il team. Non ti sto suggerendo di sostituirlo.
Un formattatore basato su browser guadagna il suo posto nelle lacune che lascia il flusso di lavoro Si incolla un frammento da una segnalazione di bug e è necessario leggerlo in questo momento Si è su una macchina che non è la tua casella di sviluppo Si sta guardando l'output CMS, un modello di posta elettronica o il markup generato che non è mai vissuto in un repo Si desidera minificare un singolo frammento senza cablare un passaggio di compilazione In tutti questi casi, l'apertura di una scheda è più veloce rispetto alla configurazione di un progetto, e il risultato è lo stesso.
C'è anche l'angolo della privacy, che non è una piccola cosa Perché il parser Toolz.dev viene eseguito interamente nel browser, markup che contiene URL interni, copia inedita, risposte API incorporate in un modello, o un cliente' s dati non lascia mai il dispositivo Un sacco di formattatori online PUBBLICARE il tuo input a un server per fare il lavoro Per qualsiasi cosa da una base di codice di lavoro, che è un'esposizione di dati che non è necessario prendere Mi interessa abbastanza che è una regola di progettazione per ogni strumento sul sito, che ho scritto di più nel Toolkit per sviluppatori web e la guida alla Privacy dei dati negli strumenti online.
Un workflow pratico che mi ha fatto risparmiare ore
Ecco il ciclo che eseguo effettivamente quando un layout si comporta male Abbellisci il markup in modo che il nesting sia visibile Scansiona il rientro per il livello che sembra sbagliato, perché un rientro extra vagante significa quasi sempre un tag che non si è mai chiuso Leggi gli avvisi del formattatore, che spesso nominano l'esatto elemento non chiuso Fissalo nella fonte Se il frammento è destinato alla produzione, minimizzalo sulla via del ritorno L'intero ciclo è un minuto, e la maggior parte di quel minuto sono io che leggo, non combatto con lo strumento.
Lo stesso ciclo funziona per gli audit dei contenuti Quando controllo il markup per l'accessibilità o la SEO, abbellisco prima in modo da poter vedere la struttura dell'intestazione e gli elementi di riferimento a colpo d'occhio, quindi estraggo pezzi specifici in altri strumenti: convertendo un pezzo in Markdown per la documentazione con il HTML a Markdown convertitore, o generando una tabella di confronto con il Generatore di tabelle di Markdown. La formattazione è il passaggio che rende la struttura abbastanza leggibile da poter lavorare. Se vuoi che la routine più ampia in cui si inseriscono questi strumenti, il Strumenti di produttività per sviluppatori guida lo espone.
Domande frequenti
Come faccio a formattare HTML online?
Incolla il tuo HTML nel pannello di input, scegli Abbellisci, scegli una larghezza di rientro e fai clic su Formato Lo strumento analizza l'albero dei tag e lo ri-indenta, quindi ti consente di copiare o scaricare il risultato Tutta l'elaborazione avviene nel tuo browser, quindi non viene caricato nulla.
Qual è la differenza tra abbellire e minimizzare l'HTML?
La riduzione aggiunge interruzioni di riga e rientro in modo che il nesting sia facile da leggere, il che è ideale per la modifica e il debug. La riduzione al minimo rimuove gli spazi bianchi insignificanti tra i tag per produrre un file più piccolo per la produzione Entrambi mantengono lo stesso risultato renderizzato; cambia solo lo spazio bianco.
La formattazione cambierà l'aspetto della mia pagina?
No. Il formattatore cambia solo gli spazi bianchi tra i tag, non gli elementi, gli attributi o il testo Il contenuto in cui gli spazi bianchi sono significativi, come pre, textarea e testo in linea, viene conservato, quindi una pagina esegue il rendering dello stesso prima e dopo la formattazione.
Il formattatore riformatta il mio JavaScript e CSS?
No. Il contenuto all'interno dei tag di script e stile viene trattato come testo grezzo e copiato alla lettera Lo strumento reincide l'HTML attorno ad essi ma non tocca mai il codice stesso, quindi i valori letterali del modello, le espressioni regolari e i valori CSS rimangono identici byte per byte.
Può gestire HTML rotto o incompleto?
Sì, entro limiti ragionevoli Il parser è tollerante: applica le stesse regole di chiusura implicita che i browser utilizzano per tag come li, p e td e chiude automaticamente i tag lasciati aperti alla fine del documento Quando lo fa, mostra un avviso in modo da sapere che il markup era incompleto.
È sicuro formattare HTML che contiene dati sensibili?
Sì. Il parser viene eseguito interamente in JavaScript nel browser Nessuna richiesta di rete porta il markup, nulla viene memorizzato e lo strumento funziona offline una volta caricato HTML con collegamenti interni, risposte API o copia inedita non lascia mai la macchina.
Quali opzioni di indentazione sono disponibili?
Abbellisci l'output supporta 2 spazi, 4 spazi o schede Due spazi è l'impostazione predefinita comune per i progetti Web, quattro spazi si adattano ai team che preferiscono un rientro più ampio e le schede consentono a ciascuno sviluppatore di impostare la propria larghezza di visualizzazione nell'editor.
In che modo un formattatore HTML è diverso da un minifier HTML?
Un formattatore ha entrambe le direzioni in un unico strumento: abbellire per espandere il markup per la lettura e minimizzare per comprimerlo per la spedizione Un minifier dedicato si comprime solo Se hai principalmente bisogno di compressione di produzione, il minifier HTML si concentra su quello; se passi dalla lettura alla spedizione, il formattatore copre entrambi.
Formatta il tuo markup con il free Formatter HTML. Funziona interamente nel tuo browser, mantiene intatti gli script e i contenuti preformattati e non carica mai un byte.
