Come funziona l'abbellimento JavaScript
L'abbellitore legge il tuo codice carattere per carattere, tiene traccia del livello di annidamento di ogni istruzione e lo riemette con spaziatura coerente. Non cambia mai cosa fa il codice — solo come appare.
- Tokenizzare. La libreria analizza il tuo input in un flusso di token: parole chiave, identificatori, stringhe, operatori e punteggiatura. Le stringhe, i literal di template e i literal di espressione regolare vengono riconosciuti come unità singole, così una parentesi graffa all'interno di una stringa non viene mai scambiata per un delimitatore di blocco.
- Tracciare l'annidamento. Mentre percorre il flusso di token, l'abbellitore mantiene un livello di rientro corrente. Ogni parentesi graffa, parentesi quadra o tonda di apertura approfondisce il livello; ogni chiusura lo risale. Tale profondità decide quante unità di rientro precedono ogni riga restituita.
- Applicare le tue opzioni. La tua scelta di rientro (2 spazi, 4 spazi o una tabulazione) imposta la larghezza di un livello. L'impostazione dello stile delle parentesi graffe decide se una parentesi graffa di apertura rimane sulla stessa riga dell'istruzione che la precede o scende sulla propria riga. Il limite delle righe vuote riduce le lunghe sequenze di righe vuote al massimo scelto.
- Riemettere. Infine, il formattatore stampa i token con il rientro e le interruzioni di riga calcolati, aggiungendo facoltativamente i punti e virgola che l'inserimento automatico avrebbe fornito in fase di esecuzione. Il risultato è lo stesso programma, disposto in modo che un essere umano possa leggerlo.
Perché abbellire JavaScript
- Leggere codice minificato. I bundle di produzione vengono spediti su una riga con nomi di variabili di una singola lettera. Abbellire ripristina le interruzioni di riga e il rientro così da poter risalire a un bug fino all'istruzione che lo ha causato, anche senza una source map.
- Sistemare file incoerenti. Il codice che più persone hanno toccato deriva verso rientri e stili di parentesi graffe mescolati. Un passaggio nell'abbellitore normalizza l'intero file a un unico layout, così il prossimo diff mostra vere modifiche logiche piuttosto che rumore di spazi.
- Questo strumento non appesantisce la tua pagina. La maggior parte dei formattatori online carica l'intera libreria nel momento in cui apri la pagina. Questo carica js-beautify in modo lazy solo quando fai clic su Abbellisci o attivi la Modalità live, quindi aprire la pagina costa pochi kilobyte invece di qualche centinaio, e il rendering iniziale rimane veloce.
- Nulla lascia il tuo browser. L'abbellitore gira interamente sul tuo dispositivo. Il tuo codice non viene mai caricato su un server, il che conta quando lo script che stai ispezionando appartiene a un cliente, contiene percorsi API interni o è soggetto a un accordo di riservatezza.
Applicazioni comuni
Abbellire JavaScript si rende necessario ogni volta che qualcuno deve leggere codice che non è stato scritto per essere letto.
- Debug in produzione: incolla un bundle minificato estratto dal pannello Rete per trovare la funzione dietro uno stack di errori che altrimenti non riesci a decifrare.
- Preparazione della revisione del codice: riformatta il file con rientro incoerente di un collaboratore prima di aprire la pull request così i revisori vedono la logica, non il disordine di layout.
- Audit di sicurezza e conformità: espandi uno snippet di analisi o pubblicità di terze parti per confermare esattamente cosa fa prima che venga messo in produzione.
Un esempio pratico
Prendi un one-liner minificato: function f(a){if(a){return a*2}else{return 0}}. Incollalo sopra con rientro di 2 spazi e stile parentesi graffe Collapse, poi fai clic su Abbellisci. Ottieni un blocco leggibile: function f(a) {, poi un if (a) { con rientro, l'istruzione return a * 2; annidata un livello più in profondità e le parentesi graffe corrispondenti allineate sotto. Cambia lo stile a Expand e ogni parentesi graffa di apertura scende sulla propria riga. Cambia il rientro a Tabulazioni e ogni livello si sposta da due spazi a un carattere di tabulazione. La struttura è identica; cambia solo il layout.
FAQ
Questo gira nel mio browser?
Sì. La libreria js-beautify viene caricata in modo lazy la prima volta che fai clic su Abbellisci o attivi la Modalità live, poi viene messa in cache. Il tuo codice non lascia mai la pagina — nessun round-trip al server, nessun upload.
Abbellire è uguale a deminificare?
Ripristina la formattazione leggibile — rientro, interruzioni di riga e spaziatura — ma non può recuperare i nomi di variabili originali né i commenti che la minificazione ha rimosso. Se esiste una source map, le DevTools del tuo browser possono recuperare i nomi originali; un abbellitore da solo lavora solo con ciò che è nel file.
L'abbellimento cambierà il comportamento del mio codice?
No. L'abbellimento aggiunge e rimuove solo spazi e interruzioni di riga; il programma si esegue in modo identico. L'unica opzione che tocca i token è "Aggiungi punto e virgola mancanti", che inserisce i terminatori di istruzione che l'inserimento automatico avrebbe aggiunto in fase di esecuzione comunque, rendendo il codice sicuro da minificare in seguito.
Cosa significano le opzioni dello stile delle parentesi graffe?
Collapse mantiene una parentesi graffa di apertura sulla stessa riga dell'istruzione (if (x) {), che è la convenzione JavaScript comune. Expand porta ogni parentesi graffa di apertura sulla propria riga (lo stile Allman). End-expand mantiene la parentesi graffa di apertura attaccata ma mette else e catch su una nuova riga dopo la parentesi graffa di chiusura.
L'abbellimento JavaScript lato browser ti dà codice leggibile senza un passaggio di compilazione né un upload. Incolla uno script minificato o disordinato, scegli il rientro e lo stile delle parentesi graffe, poi copia o scarica il risultato. Nulla lascia il tuo dispositivo, non ci sono account e la libreria si carica solo quando la richiedi — aprire questa pagina ti costa pochi kilobyte, non un megabyte.