Formattatore JavaScript online per codice più pulito

Introduzione

Il JavaScript minificato per la produzione, o semplicemente scritto di fretta senza badare alla forma, può essere davvero difficile da leggere: nessun rientro coerente, più istruzioni compresse sulla stessa riga, blocchi che a occhio non si distinguono l'uno dall'altro. La formattazione riscrive quel codice con rientri, interruzioni di riga fra le istruzioni e spaziatura uniforme, senza cambiare quello che il codice fa. Logica, nomi delle variabili e comportamento restano identici: cambia soltanto il modo in cui il codice appare sulla pagina. Per chi sta imparando a leggere il JavaScript e non solo a scriverlo, la differenza conta: lo stesso script può sembrare intimidatorio compresso in una riga densa e diventare del tutto affrontabile una volta aperto in istruzioni e blocchi ben rientrati.

Come questo strumento formatta il tuo codice

Lo strumento percorre il codice incollato pezzo per pezzo, riconoscendo stringhe, commenti, parentesi e operatori come entità distinte, invece di inserire interruzioni di riga riconoscendo schemi nel testo. È questo che gli permette di distinguere correttamente una / che apre un commento, una che fa parte di un'espressione regolare e una che indica una divisione: cosa che un formattatore puramente testuale sbaglierebbe. Ricostruisce i rientri in modo coerente, con tre spazi per ogni livello di annidamento, e decide dove andare a capo in base alla struttura del codice, dando una riga propria a ogni istruzione e a ogni blocco. I commenti vengono conservati e riformattati insieme al codice, non eliminati: un commento che spiega una funzione, o un'intestazione di licenza, rimane nel risultato.

I punti e virgola vengono riformattati dove sono, non aggiunti né tolti. In molti casi il JavaScript permette di chiudere un'istruzione senza punto e virgola — la specifica ufficiale del linguaggio colma da sola quella lacuna, con una regola chiamata inserimento automatico del punto e virgola — e alcuni sviluppatori scrivono di proposito in questo modo. Lo strumento non prende posizione su quella scelta di stile: se il tuo codice di partenza non ha punti e virgola, nemmeno il risultato formattato ne avrà; se li ha, restano esattamente dove erano, solo ridisposti intorno alla nuova indentazione e alle nuove interruzioni di riga. È una cosa da sapere se usi questo strumento per insegnare o imparare come si chiudono le istruzioni in JavaScript, perché lo strumento non «corregge» uno stile nell'altro.

Cosa sapere prima di usarlo

Due cose da tenere presenti prima di incollare qui del codice vero:

• Le righe vuote non vengono conservate. È il formattatore a decidere dove vanno le interruzioni di riga, in base alla struttura del codice e non a dove tu avevi messo le righe vuote nel testo incollato. Se le usavi per separare visivamente le parti di uno script, quella suddivisione può non sopravvivere alla formattazione: logica e istruzioni ci sono tutte, ma senza i raggruppamenti originali.
• I template literal, cioè le stringhe fra apici inversi, non vengono riconosciuti come stringhe. Il JavaScript moderno permette di costruire stringhe con gli apici inversi e con espressioni inserite dentro, come `Hello, ${name}`. Il formattatore di questo strumento non tratta il testo delimitato dagli apici inversi come una stringa, al contrario di quanto fa col testo fra apici normali, quindi il codice che si appoggia ai template literal può uscire riformattato in modo sbagliato intorno a quei punti. Se uno script li usa, dopo la formattazione controlla con attenzione quella parte del risultato, oppure formatta il resto dello script e lascia quelle righe come stavano.

Nessuno dei due casi cambia quello che fa il tuo codice originale: lavori sempre a partire da ciò che hai incollato tu, e nulla si modifica finché non ricopi il risultato formattato nel tuo progetto.

Quando è lo strumento giusto

• Leggere lo script minificato di qualcun altro. Guardando il JavaScript di un sito pubblico dagli strumenti per sviluppatori del browser si trova spesso un file denso e senza formattazione: incollarlo qui e formattarlo rende possibile studiare davvero come funziona, un uso di educazione digitale a pieno titolo e non una semplice pulizia del codice.
• Rivedere il codice consegnato da uno studente. Uno script che arriva senza una formattazione coerente è più lento da leggere e da valutare; formattarlo prima rende la correzione più rapida e il riscontro più facile da dare.
• Ripulire il proprio codice prima di consegnare un compito. Una formattazione coerente rende più semplice seguire la logica a un insegnante, o a te stesso fra qualche mese.
• Preparare un esempio di codice per una lezione. Una funzione scritta di fretta mentre si prepara la lezione finisce spesso densa e difficile da seguire su un proiettore; formattarla prima dà un codice pulito e ordinatamente rientrato, che la classe legge più facilmente dal fondo dell'aula.

Per il codice che si appoggia molto ai template literal, o per un progetto moderno di grandi dimensioni in cui ti serve un risultato garantito, il formattatore integrato in un editor di codice è una scelta più affidabile, per il limite descritto sopra. Questo strumento dà il meglio sugli script delle dimensioni tipiche di un lavoro scolastico.

Esempio

Uno studente trova su un sito di tutorial un breve script interattivo, minificato in una sola riga densa, e vuole capire come funziona prima di adattarlo al proprio progetto. Incollandolo in questo strumento lo vede distendersi in istruzioni e blocchi ben rientrati, e può finalmente leggere la logica — quale funzione parte su quale evento, dove un ciclo comincia e dove finisce — invece di scorrere un'unica riga di codice senza interruzioni.

Domande frequenti

La formattazione cambia il modo in cui il mio codice viene eseguito?

No. Cambia solo la forma, cioè rientri, interruzioni di riga e spaziatura: logica e comportamento restano gli stessi.

I miei commenti vengono conservati?

Sì. I commenti, comprese le intestazioni di licenza, vengono mantenuti e riformattati insieme al resto del codice.

Gestisce i template literal, cioè le stringhe fra apici inversi?

Non in modo affidabile. Il codice che usa `like this ${example}` può uscire riformattato in modo sbagliato intorno a quei punti: controlla quella parte del risultato, oppure lascia quelle righe senza formattarle.

Il mio codice viene salvato da qualche parte?

No. Il codice incollato viene elaborato per produrre il risultato formattato e non viene conservato dopo; dell'operazione resta registrato soltanto il fatto che lo strumento è stato usato, non il codice.

Aggiunge o toglie i punti e virgola?

No. I punti e virgola restano esattamente come li trova nel tuo codice di partenza, solo ridisposti intorno alla nuova indentazione e alle nuove interruzioni di riga: se il tuo codice non ne ha, nemmeno il risultato ne avrà.

Posso formattare più script in una volta?

Incolla e formatta uno script per volta. Se ti serve formattarli insieme, uniscili prima in un unico file, oppure ripeti l'operazione per ciascuno.

Quali strumenti collegati posso usare?

Usa CSS Beautifier o HTML Beauty per formattare altro codice, oppure CSS Minifier quando sei pronto a comprimere il CSS per la produzione.