Formattatore di codice

Cosa fa

Il formattatore di codice prende codice compresso, minificato o indentato in modo incoerente e lo riscrive con uno stile pulito e uniforme. Supporta i linguaggi che incontri più spesso nello sviluppo web: HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML e GraphQL.

Dietro le quinte usa Prettier, il formattatore adottato da milioni di progetti, quindi il risultato è identico al codice formattato in VS Code o da un hook di pre-commit. Il parser di ciascun linguaggio viene caricato solo quando lo selezioni, così la pagina resta veloce.

Come si usa

1. Scegli il Linguaggio del tuo codice.
2. Incolla il codice oppure apri un file.
3. Scegli uno stile di Indentazione (2 spazi, 4 spazi o tab) e una Larghezza riga. Le righe più lunghe vengono spezzate dove il linguaggio lo consente.
4. Per JavaScript e TypeScript, scegli se terminare le istruzioni con il punto e virgola. Per script e fogli di stile, scegli gli apici singoli se il tuo progetto li preferisce.
5. Copia il risultato o scaricalo.

Esempio

L’esempio è una pagina HTML su una sola riga con CSS e JavaScript inline. Dopo la formattazione ogni elemento sta su una riga propria, le regole CSS sono espanse con una dichiarazione per riga e l’arrow function nello script riceve le parentesi e il punto e virgola:

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

Suggerimenti

• La formattazione è anche un rapido controllo della sintassi. Se Prettier non riesce ad analizzare l’input, il messaggio di errore mostra riga e colonna, così puoi saltare direttamente all’errore.
• L’XML viene formattato considerando gli spazi bianchi non significativi, così i tag annidati vengono indentati. Se il tuo documento dipende da spazi esatti all’interno degli elementi, controlla il risultato prima di usarlo.
• Ti serve l’operazione opposta? Usa il minificatore JavaScript e CSS per ridurre il codice per la produzione, oppure il formattatore JSON per validare e minificare JSON.