Come formattare il codice con Prettier in Visual Studio Code

Introduzione

Formattare il codice in modo coerente è una sfida, ma gli strumenti moderni per sviluppatori rendono possibile mantenere la coerenza nel codice della tua squadra in modo automatico.

In questo articolo, configurerai Prettier per formattare automaticamente il tuo codice in Visual Studio Code, noto anche come VS Code.

A scopo dimostrativo, ecco il codice di esempio che formateremo:

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

Se sei a conoscenza della formattazione del codice, potresti notare alcune imprecisioni:

• A mix of single and double quotes.
• La prima proprietà dell’oggetto person dovrebbe essere su una propria riga.
• L’istruzione console all’interno della funzione dovrebbe essere indentata.
• Potresti apprezzare o meno le parentesi facoltative che circondano il parametro della funzione a freccia.

Indice

• Utilizzo del comando “formatta documento”
• Formattare il codice al salvataggio
• Modifica delle impostazioni di configurazione di Prettier
• Creare un file di configurazione per Prettier

Prerequisiti

Per seguire questo tutorial, è necessario:

• Scaricare e installare Visual Studio Code.
• Per lavorare con Prettier in Visual Studio Code, è necessario installare l’estensione. Per farlo, cerca Prettier - Code Formatter nel riquadro delle estensioni di VS Code. Se lo stai installando per la prima volta, vedrai un pulsante installa invece del pulsante disinstalla mostrato qui:

Passo 1 – Utilizzare il comando Formatta Documento

Con l’estensione Prettier installata, ora puoi avvalerti di essa per formattare il tuo codice. Per iniziare, esploriamo l’utilizzo del comando Formatta Documento. Questo comando renderà il tuo codice più coerente con spaziature formattate, avvolgimento di righe e virgolette.

Per aprire la palette di comando, puoi usare COMMAND + SHIFT + P su macOS o CTRL + SHIFT + P su Windows.

Nella palette di comando, cerca format e quindi scegli Format Document.

Potresti essere quindi invitato a scegliere quale formato utilizzare. Per fare ciò, fai clic sul pulsante Configure:

Quindi scegli Prettier – Code Formatter.

Il tuo codice è ora formattato con spaziatura, avvolgimento di righe e virgolette coerenti:

const name = "James";

const person = { first: name };

console.log(person);

const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};

sayHelloLinting("James");

Questo funziona anche sui file CSS. Puoi trasformare qualcosa con indentazione inconsistente, parentesi, nuove righe e punti e virgola in codice ben formattato. Ad esempio:

body {color: red;
}
h1 {
  color: purple;
font-size: 24px
}

Sarà formattato come:

body {
  color: red;
}
h1 {
  color: purple;
  font-size: 24px;
}

Ora che abbiamo esplorato questo comando, diamo un’occhiata a come questo può essere implementato per funzionare automaticamente.

Passo 2 – Formattazione del codice al salvataggio

Finora, è stato necessario eseguire un comando per formattare il codice manualmente. Per automatizzare questo processo, è possibile scegliere una configurazione in VS Code per formattare automaticamente i file quando si salva. Ciò garantisce anche che il codice non venga inserito nel controllo della versione senza essere formattato.

Per modificare questa impostazione, premere COMMAND + , su macOS o CTRL + , su Windows per aprire il menu Impostazioni. Una volta aperto il menu, cercare Editor: Format On Save e assicurarsi che quell’opzione sia selezionata:

Una volta impostato, è possibile scrivere il codice come al solito e verrà formattato automaticamente al salvataggio del file.

Passo 3 – Modifica delle impostazioni di configurazione di Prettier

Prettier fa molte cose per te per impostazione predefinita, ma puoi anche personalizzare le impostazioni.

Apri il menu Impostazioni. Quindi, cerca Prettier. Questo mostrerà tutte le impostazioni che puoi cambiare:

Ecco alcune delle impostazioni più comuni:

• Apostrofo singolo – Scegli tra virgolette singole e doppie.
• Punteggiatura – Scegli se includere o meno i punti e virgola alla fine delle righe.
• Larghezza tab – Specifica quante spazi vuoi che inserisca una tabulazione.

Il difetto dell’utilizzo del menu delle impostazioni predefinito in VS Code è che non garantisce la coerenza tra i membri del team di sviluppo.

Passo 4 – Creazione di un file di configurazione Prettier

Se modifichi le impostazioni nel tuo VS Code, qualcun altro potrebbe avere una configurazione completamente diversa sul suo computer. Puoi stabilire una formattazione coerente in tutto il tuo team creando un file di configurazione per il tuo progetto.

Crea un nuovo file chiamato .prettierrc.estensione con una delle seguenti estensioni:

• yml
• yaml
• json
• js
• toml

Ecco un esempio di un semplice file di configurazione utilizzando JSON:

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

Per ulteriori dettagli sulle configurazioni dei file, consulta le Documentazioni di Prettier. Dopo aver creato uno di questi e averlo controllato nel tuo progetto, puoi assicurarti che ogni membro del team segua le stesse regole di formattazione.

Conclusione

Avere un codice coerente è una buona pratica. È particolarmente vantaggioso quando si lavora su un progetto con più collaboratori. Conciliarsi su un insieme di configurazioni aiuta la leggibilità e la comprensione del codice. Più tempo può essere dedicato alla risoluzione di problemi tecnici impegnativi anziché lottare su problemi risolti come l’indentazione del codice.

Prettier garantisce coerenza nella formattazione del codice e rende il processo automatico.