Come formattare il codice con Prettier in Visual Studio Code

Quando si scrive codice, è spesso difficile concentrarsi sul mantenerlo ordinato e leggibile. L’indentazione, le virgolette singole o doppie e i punti e virgola possono sembrare dettagli irrilevanti quando si pensa alla logica complessa delle moderne applicazioni web.

È qui che entra in gioco Prettier Code Formatter. Prettier è un formattatore di codice personalizzabile che supporta diversi linguaggi e si integra con la maggior parte degli editor di codice. In questo articolo vedremo come usare Prettier in Visual Studio Code.

Configurare l’ambiente di lavoro

Si presuppone che tu abbia già installato Visual Studio Code e che tu disponga di un file di codice da formattare. Ecco un esempio:

const name = "Hostman";
const service ={first: name
}
console.log(service);
const printName = (fName) => {
console.log(`This is ${fName}`)
}
printName ('Hostman');

Questo codice presenta alcuni problemi comuni:

1. Uso incoerente delle virgolette.
2. Mancanza di indentazione.
3. Righe spezzate in modo errato.

Se lo esegui, funzionerà comunque, poiché JavaScript non dipende da questi dettagli. Tuttavia, per un essere umano, il codice risulta difficile da leggere.

Per risolvere il problema, installiamo un’estensione che aggiunge automaticamente indentazioni, punti e virgola e altri elementi che rendono il codice più leggibile.

1. Apri la scheda Estensioni nel menu di VS Code (oppure premi Ctrl + Shift + X su Windows).

    

2. Cerca Prettier — questa estensione ha più di 20 milioni di installazioni.

    

3. Clicca su Installa per aggiungerla all’editor.

In alternativa, puoi premere Ctrl + P per aprire il pannello di avvio rapido ed eseguire il comando seguente:

ext install esbenp.prettier-vscode

Questo comando installerà direttamente l’estensione Prettier.

Ora puoi usare lo strumento per formattare rapidamente il codice in VS Code.

Formattazione automatica

Immagina che il project manager ti scriva su Slack: la pagina aggiornata di Hostman Cloud Server deve andare subito online. Tutto è pronto e funziona, ma la formattazione del codice non è all’altezza. Per fortuna, ora hai l’estensione Prettier, che può risolvere rapidamente il problema.

1. Premi Ctrl + Shift + P per aprire la Command Palette.

    

2. Cerca e avvia il comando Format Document With.

3. Seleziona Prettier dall’elenco a discesa.

Il tuo codice verrà automaticamente formattato con gli spazi, le indentazioni, le interruzioni di riga e le virgolette coerenti. Ecco un esempio del risultato finale:

const name = "Hostman";
const person = { first: name };
console.log(person);
const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};
sayHelloLinting("Hostman");

Questo strumento è estremamente utile e supporta un’impostazione rapida per diversi linguaggi. Ad esempio, se esegui la formattazione automatica su un file Python, ti verrà suggerito di installare autopep8. Questo programma formatta automaticamente il codice Python in base alla guida di stile ufficiale PEP 8, utilizzando pycodestyle per individuare le aree che necessitano di correzione. Autopep8 può risolvere la maggior parte dei problemi segnalati da pycodestyle.

Per evitare di formattare manualmente ogni volta, puoi abilitare la formattazione automatica al salvataggio:

1. Apri le Impostazioni (Ctrl + , su Windows).
2. Cerca Editor: Format On Save.
3. Seleziona la casella per attivare la formattazione automatica al salvataggio.

Fatto! Ora il tuo codice verrà formattato automaticamente ogni volta che salvi il file.

Definire regole di formattazione personalizzate

Gli sviluppatori possono personalizzare le regole di formattazione in due modi:

1. Modificando le impostazioni direttamente nella configurazione dell’estensione.
2. Creando un file di configurazione separato.

Nelle impostazioni dell’estensione puoi modificare parametri comuni, come:
il numero di spazi per l’indentazione, o se aggiungere un punto e virgola alla fine di ogni riga. Questo approccio è veloce, ma la configurazione si applicherà solo alla tua installazione locale. Per condividere le stesse regole con l’intero team, è meglio creare un file di configurazione condiviso, così Visual Studio Code applicherà le stesse regole a tutti

Un file .prettierrc può avere varie estensioni: .yml, .yaml, .json, .js o .toml. Ecco un semplice esempio in formato JSON:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false
}

Conclusione

Prettier è uno strumento che accelera notevolmente lo sviluppo, applicando automaticamente le regole di formattazione, sia quelle predefinite che quelle personalizzate.

Dopo aver creato un file di configurazione, il tuo team lavorerà con un set unificato di regole di stile. In questo modo tutti potranno concentrarsi sullo sviluppo, senza preoccuparsi dello stile del codice. Grazie a Prettier, virgolette, spazi e virgole possono essere sistemati in pochi clic durante il refactoring, permettendoti di concentrarti su ciò che conta davvero: scrivere ottimo codice.