Code Formatter (Prettier) — Formattatore di codice

Cosa fa questo formattatore di codice

Questo strumento esegue Prettier, il formattatore di codice “opinionated” adottato da gran parte dell'ecosistema JavaScript, direttamente nel tuo browser. Prettier non si limita a reindentare le righe: analizza il sorgente trasformandolo in un albero sintattico e lo ristampa da zero secondo un piccolo insieme di regole. Per questo il risultato è coerente per quanto disordinato fosse l'input: le lunghe liste di argomenti vengono mandate a capo, gli oggetti vengono spezzati su più righe solo quando superano la larghezza di stampa, virgolette e punti e virgola seguono un'unica convenzione e gli spazi finali spariscono.

Puoi formattare JavaScript, JSX, TypeScript e TSX, i tre principali dialetti per fogli di stile (CSS, SCSS e Less), HTML con stili e script incorporati, JSON, schemi e query GraphQL, documenti Markdown e file di configurazione YAML. Ogni linguaggio usa il proprio plugin Prettier e viene caricato solo quello che ti serve, così la pagina resta leggera finché non formatti effettivamente qualcosa.

Le opzioni spiegate

Print width (larghezza di stampa) è la lunghezza di riga entro cui Prettier cerca di restare; il valore predefinito è 80, mentre 100 o 120 sono comuni nei team con monitor larghi. Tab width stabilisce quanti spazi occupa un livello di indentazione e Indent with permette di scegliere tra spazi e veri caratteri di tabulazione. Semicolons controlla se le istruzioni JavaScript e TypeScript terminano con un punto e virgola; se è disattivato, Prettier lo aggiunge solo dove serve per evitare ambiguità. Single quotes preferisce ' a " per le stringhe, quando ciò non richiede caratteri di escape. Queste opzioni corrispondono una a una alle impostazioni di un file .prettierrc, così puoi replicare la configurazione del tuo progetto.

Privato e pratico

Tutto avviene in locale: il formattatore non carica il tuo codice, non lo memorizza e non lo invia ad alcuna API. È quindi sicuro per sorgenti proprietari, file di configurazione con hostname interni o snippet copiati durante un incidente in produzione. Quando il parser trova un errore di sintassi, il messaggio mostra riga e colonna e il cursore salta a quel punto dell'input: un modo rapido per scovare una parentesi mancante in un grosso file JSON o YAML. Nel lavoro quotidiano tieni Prettier nel tuo editor e nella CI; usa questa pagina quando sei su una macchina senza i tuoi strumenti, quando rivedi uno snippet arrivato in chat o quando vuoi ripulire del codice prima di incollarlo nella documentazione.