Come creare un programma con Prettier in Visual Studio Code


Come creare un programma seguendo uno stile coerente? Questo di per sé, è già una sfida. L’estensione Prettier per VSCode ti viene in aiuto.
di Antonio Lamorgese


Abbiamo già trattato l’argomento su “Come creare un programma professionale” sfruttando Visual Studio Code come strumento principale di editing del codice sorgente.

Scrivere codice in modo coerente, di per sé, è già una sfida per uno sviluppatore specialmente se si lavora in team. Questa tipologia di sviluppo pone lo sviluppatore a confrontarsi non solo sulle metodologie di progettazione del software, ma anche sullo stile utilizzato per creare software leggibile da tutto il team.

Pertanto, la formattazione del codice riveste un ruolo fondamentale nella progettazione di software in ogni ambito di sviluppo.


LEGGI ANCHE: Sviluppare web application con WordPress


Quindi, formattare il codice in modo coerente può essere una sfida. Fortunatamente, gli strumenti di sviluppo utilizzati oggi, sono notevolmente migliorati. In questa guida ti spiegherò passo-passo attraverso la configurazione di Prettier, come formattare automaticamente il tuo codice sorgente con Visual Studio Code.

1. Codice di sorgente di esempio da formattare con Prettier

A scopo puramente dimostrativo, ho scelto un tipico script di esempio che formatteremo sfruttando l’estensione Prettier di Visual Studio Code. Se non sei uno sviluppatore alle prime armi, dando una prima occhiata al codice potresti accorgerti immediatamente di alcuni errori di stile presenti nel codice, tra cui:

a) Un mix di virgolette singole e doppie

b) la prima proprietà dell’oggetto person dovrebbe essere posizionata sulla sua riga di pertinenza

c) l’istruzione console.log all’interno della function sayHelloLinting ha un’indentazione errata, cioè dovrebbe rientrare di qualche spazio

d) ti potrebbe fare più o meno piacere vedere la parentesi, facoltativa, che racchiude il parametro della funzione freccia

come creare un programma formattato con prettier

Ma proviamo a sistemare il codice. Prima di tutto dobbiamo installare l’estensione Prettier in Visual Studio Code.

2. Installazione dell’estensione Prettier per Visual Studio Code

Per lavorare con Prettier in Visual Studio Code, è necessario installare l’estensione dedicata al tool. Quindi, premi i pulsanti Ctrl + Maiuscolo + X e cerca Prettier-Code Formatter nell’area dedicata alle estensioni di Visual Studio Code. Puoi vedere l’estensione qui sotto. Se la stai installando per la prima volta, vedrai comparire il pulsante “installa” invece del pulsante “disinstalla”, come puoi vedere in figura.

come creare un programma formattato con l'estensione prettier in visual studio code

3. Il comando Format document

Terminata la procedura di installazione dell’estensione Prettier, puoi sfruttarla, da subito, per formattare il nostro codice di esempio. Per fare questo possiamo utilizzare varie strade, tanto per iniziare possiamo utilizzare il comando Format Document.

Per accedere alla console dei comandi, puoi usare la combinazione di tasti Command + Shift + P su Mac o Control + Shift + P su Windows. Una volta entrato nella console dei comandi, digita e cerca la parola formato, successivamente scegli Format document.

comando format document di prettier

Ti potrebbe essere richiesto di scegliere quale formato utilizzare. Per scegliere il formato, clicca sul pulsante Configure.

configura estensione prettier in visual studio code

A questo punto scegli Prettier-Code Formatter.

come creare un programma con prettier

Ecco il tuo codice perfettamente formattato è in linea con tutte le regole inerenti lo stile di programmazione che uno sviluppatore dovrebbe seguire. Puoi notare tutti i miglioramenti apportati al codice da Prettier:

a) spaziatura

b) modifica dei ritorni a capo

c) standardizzazione sull’uso delle virgolette

come creare un programma con prettier

Tutto questo, logicamente, può funzionare anche sui file CSS. Infatti, da questo codice:

come creare un programma con prettier

Prettier ti ritornerà modificato il file CSS formattato correttamente. (Vedi immagine)

codice CSS di esempio formattato con prettier

4. Formatta automaticamente in fase di salvataggio

Abbiamo visto, eseguendo un comando, come Prettier formatti perfettamente il nostro codice sorgente. Invece ora vediamo come è possibile, selezionando una particolare impostazione in Visual Studio Code, formattare automaticamente i tuoi file subito dopo l’operazione di salvataggio delle eventuali modifiche apportate. Questo logicamente presenta enormi vantaggi, tra cui: “Non dovrai più preoccuparti di formattare manualmente il tuo codice sorgente”.

Per modificare questa impostazione, usa Command +, su Mac o Control +, su Windows per aprire il menu delle impostazioni di Visual Studio Code. Quindi, digita e cerca la parola Editor: Format on Save e assicurati, una volta trovata, che la voce sia selezionata.

imposta prettier per formattare automaticamente il codice in fase di salvataggio

Adesso, con questa impostazione, puoi continuare a scrivere codice formattato secondo quelle che sono le tue esigenze anche in modo approssimativo, sapendo che Prettier formatterà adeguatamente il codice dopo il salvataggio delle modifiche.

5. Personalizza le impostazioni predefinite di Prettier

Prettier, per impostazione predefinita, svolge egregiamente il suo lavoro, ma puoi anche personalizzare le impostazioni di default di Prettier secondo le tue esigenze. Ecco alcune delle personalizzazioni più comuni effettuate dagli sviluppatori professionisti.

a) scegli tra virgolette singole e doppie

b) scegli se includere o meno il punto e virgola alla fine delle righe

c) scegli da quanti spazi vuoi che sia composta la dimensione della tabulazione

Quindi, per apportare queste modifiche, devi aprire il menu delle impostazioni, esattamente come spiegato al paragrafo precedente. A questo punto, digita e cerca la parola Prettier. Visual Studio Code ti visualizzerà tutte le impostazioni che puoi modificare.

impostazione predefinita prettier

Ad esempio, prova a vedere cosa succede se cambi la dimensione della tabulazione a 10.

come creare un programma con prettier

Una volta apportata questa modifica, salva il file.

riformattazione codice in seguito a modifica valore tab width

Prettier ha riformattato il codice sorgente, automaticamente dopo il salvataggio, apportando le modifiche da te richieste. Questa probabilmente non è la dimensione da te preferita per la tabulazione, ma l’impostazione effettuata è stata giusto una prova per capire come si comporta Prettier.

6. Creare un file di configurazione per tutto il team

Quando si lavora in un team di sviluppo, gli sviluppatori interessati al progetto possono essere numerosi. Lo svantaggio, in tal caso, è che utilizzando delle impostazioni personalizzate non ci sarà più coerenza nella scrittura del codice tra gli sviluppatori di tutto il team. Creando non pochi problemi in fase di modifica del codice scritto da altri sviluppatori appartenenti allo stesso team. Pertanto, se modifichi le impostazioni nel tuo Visual Studio Code, qualcun altro potrebbe avere un set di impostazioni completamente diverso dal suo.

In tal caso come è meglio comportarsi? Beh Prettier risolve anche questa fastidiosissima problematica, permettendoti di creare un file di configurazione univoco per tutto il team di sviluppo.

6.1 Stabilisci una formattazione comune a tutto il team creando un file di configurazione

Come accennato precedentemente, per risolvere questo problema, puoi creare un file di configurazione univoco per tutti. In tal caso, il file, deve essere intitolato prettierrc.(ext) e deve avere obbligatoriamente una delle seguenti estensioni: yml, yaml, js o json

In genere è preferibile avere file di configurazione in formato JSON in cui puoi definire coppie chiave>valore per tutte le tue impostazioni. Visual Studio Code ti fornirà degli ausili nella configurazione e gestione di questo file.

Ad ogni modo, ecco un tipico esempio di ausilio di Visual Studio Code alla creazione di un file prettierrc.json elencando tutte le possibili impostazioni chiave per l’estensione:

come creare un programma

Ecco un esempio di un semplice file prettierrc.json dopo la configurazione.

come creare un programma

Logicamente, dopo aver creato un file di configurazione prettierrc.json e averlo inserito nel progetto, devi necessariamente assicurarti che ogni membro del team segua le stesse regole di formattazione.

7. Conclusione

Tutto ciò che può essere di aiuto nella scrittura e progettazione del codice è sempre ben accolto dagli sviluppatori, specialmente se questi si occupano di sviluppo collaborativo in team.

Formattare il codice manualmente richiede tempo che può essere speso meglio scrivendo codice più performante. Pertanto il consiglio è: “Approfitta sempre degli incredibili strumenti messi a disposizione dagli sviluppatori di tutto il mondo per configurare al meglio la tua piattaforma di sviluppo”.

Come installare Prettier in VSCode
Antonio Lamorgese


Desideri acquisire nuove competenze?

corsi.it

Seguire questo corso online ti offrirà
l'opportunità di acquisire nuove competenze e di
migliorare il tuo curriculum professionale.
Clicca qui per seguire le prime lezioni gratuite online

Corsi.it - Il portale Nr.1 al mondo di corsi online


Amministratore di rete e sviluppatore. Dopo anni di esperienza nel settore, ho ideato un sistema di gestione dati MYSQL in PHP senza scrivere una sola riga di codice. Scopri di più....