Formattatore JavaScript

Cosa fa il formattatore JavaScript

Il codice scritto da più persone, copiato da un forum o estratto da un bundle minificato è difficile da leggere. La spaziatura cambia da una riga all’altra, le catene lunghe escono dallo schermo e le callback annidate perdono forma. Un formattatore JavaScript riscrive l’impaginazione del codice secondo un unico insieme di regole, così puoi concentrarti su quello che fa.

Questa pagina esegue Prettier 3, un formattatore di codice open source molto diffuso, direttamente nel tuo browser. Il parser JavaScript viene scaricato solo la prima volta che formatti qualcosa, e il tuo codice non lascia mai la pagina.

Come si usa

1. Incolla JavaScript o JSX nel riquadro a sinistra. Viene formattato subito dopo averlo incollato.
2. In alternativa premi Apri file per caricare un file .js, oppure Esempio per vedere un esempio.
3. Scegli le opzioni:
   • Rientro: 2 spazi, 4 spazi o tabulazioni.
   • Larghezza riga: 80, 100, 120 o 160 caratteri prima che una riga vada a capo.
   • Virgole finali: Tutte, ES5 o Nessuna.
   • Virgolette singole: usa 'text' invece di "text".
   • Punti e virgola: se attivo li aggiunge alla fine delle istruzioni, se disattivo li toglie dove è sicuro farlo.
4. Premi Formatta o Ctrl+Invio.
5. Premi Copia, oppure Scarica per salvare un file .js.

Dopo la prima esecuzione, il risultato segue quello che scrivi, e cambiare un’opzione riformatta subito il codice.

Prima e dopo

Input minificato:

const total=items=>items.filter(i=>i.qty>0).reduce((sum,{price,qty})=>sum+price*qty,0);async function load(url){const res=await fetch(url);if(!res.ok){throw new Error('Request failed: '+res.status)}return res.json()}

Dopo Formatta con le opzioni predefinite:

const total = (items) =>
  items
    .filter((i) => i.qty > 0)
    .reduce((sum, { price, qty }) => sum + price * qty, 0);
async function load(url) {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error("Request failed: " + res.status);
  }
  return res.json();
}

Il parametro della arrow function riceve le parentesi, la catena di metodi viene divisa con una chiamata per riga perché non sta in 80 caratteri, e le virgolette singole diventano doppie. Con la Larghezza riga a 100, la stessa catena sta su una sola riga:

const total = (items) =>
  items.filter((i) => i.qty > 0).reduce((sum, { price, qty }) => sum + price * qty, 0);

Virgolette, punti e virgola e virgole finali

Queste tre opzioni coprono gran parte delle discussioni di stile in un team.

Con Virgolette singole attivo e Punti e virgola disattivo:

const name = 'Ada'
let list = [1, 2, 3]

Virgole finali decide se l’ultimo elemento di un elenco o di un oggetto su più righe riceve una virgola. Tutte, il valore predefinito di Prettier, dà:

const user = {
  firstName: "Ada",
  lastName: "Lovelace",
  email: "[email protected]",
  role: "admin",
};

Nessuna toglie l’ultima virgola dopo "admin". Le virgole finali rendono i diff più puliti, perché aggiungere un elemento cambia una sola riga. ES5 le aggiunge in array e oggetti ma non nei parametri delle funzioni, per ambienti molto vecchi.

JSX

Anche i componenti React vengono formattati:

const App = () => (
  <div className="app">
    <h1>Hello</h1>
    <p>{name}</p>
  </div>
);

Errori di sintassi

Se il codice non si può analizzare, il formattatore si ferma e ti dice dove. Per un oggetto a cui manca una virgola:

const a = {
  b: 1
  c: 2
};

il messaggio è Riga 3, colonna 3: Unexpected token, expected "," (token inatteso, era attesa una virgola). Premi Mostra nell’input per andare in quel punto. Una funzione senza la graffa di chiusura dà Riga 3, colonna 1: Unexpected token, che indica la fine dell’input, dove il parser si aspettava }.

Il formattatore non esegue il codice e non fa linting. Variabili inutilizzate, nomi di funzione sbagliati ed errori di logica non vengono segnalati.

Consigli

• Mettetevi d’accordo una volta sulle opzioni e scrivetele in un file .prettierrc nel progetto, così gli editor e questa pagina danno lo stesso risultato.
• Usa il formattatore prima di leggere codice che non conosci. Un’impaginazione che segue la struttura rende evidenti gli errori di annidamento.
• Per il codice con annotazioni di tipo usa il formattatore TypeScript. Il parser JavaScript si ferma al primo : string.
• Per i dati invece del codice, il formattatore JSON è più rigoroso e fa anche la convalida.

Altri modi per formattare JavaScript

• VS Code: Format Document (Maiusc+Alt+F su Windows, Maiusc+Opzione+F su macOS). Installa l’estensione Prettier e impostala come formattatore predefinito per ottenere lo stesso risultato di questa pagina.
• Riga di comando: npx prettier --write src/app.js, oppure npx prettier --check . nella CI per far fallire la build quando i file non sono formattati.
• Strumenti per sviluppatori del browser: il pulsante di pretty print nel pannello Sources rende leggibili gli script minificati durante il debug.

Gli script dentro una pagina HTML si possono formattare insieme al markup nel formattatore HTML.