Impostazione di Visual Studio Code

Ognuno ha il suo editor preferito, il nostro è Visual Studio Code che è anche uno dei più utilizzati sul pianeta. In questa parte ti suggeriremo l’impostazione ottimale di VS Code per sviluppare applicazioni React.

ESLint

ESLint è un’estensione di VS Code che sottolinea errori nel codice che non ne compromettono il funzionamento, ma lo rendono meno leggibile e meno standard.

È utilizzato negli ambienti in cui si lavora in gruppo ed è molto utile per ridurre il debito tecnico, che è l’insieme delle cose fatte in fretta, che non andrebbero bene ma si fanno per mancanza di tempo, che con il tempo si accumulano inesorabilmente fino a diventare un problema.

L’estensione ESLint di VS Code dovrebbe essere installata di default, ma alcune persone la disabilitano. Create React App fa girare ESLint sul codice a ogni salvataggio e mostra sul terminale eventuali errori o avvertimenti.

Prettier

Prettier è un pacchetto che tiene il codice formattato in conformità allo standard internazionale. Con “formattato” intendiamo cose come l’utilizzo degli apici (‘) o dei doppi apici (“) per le stringhe, oppure se mettere o no spazi prima o dopo le parentesi o le virgole.
È utilizzato negli ambienti in cui si lavora in gruppo per dare una forma comune al codice scritto da tutti, evitando che ogni persona porti le sue preferenze e gusti personali al modo in cui viene scritto il codice. Anche l’estensione di Prettier per VS Code dovrebbe essere installata di default.

Configurazione dell’ambiente di lavoro

Visual Studio Code ha tre livelli di configurazione: 

• quella di default 
• quella dell’utente  
• quella dell’area di lavoro. 

La configurazione dell’area di lavoro vince su quella dell’utente e quella dell’utente vince su quella di default. Con “vince” intendiamo che se due configurazioni dicono due cose che si contraddicono, quella che vince prevarrà, appunto, sull’altra.

Dato che la configurazione dell’area di lavoro vince su tutte, possiamo impostare l’area di lavoro per rendere obbligatorie alcune funzionalità così che, se qualcuno si trovasse a lavorare con noi, si troverebbe ad ereditare queste funzionalità.

Ci sono vari modi per impostare la configurazione dell’area di lavoro, tra cui quella di creare una cartella .vscode nella radice del progetto (allo stesso livello di src per intenderci) e inserire due file.

Il primo file – che si chiamerà settings.json – contiene le impostazioni che vogliamo impostare. Ad esempio:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true
}

Vediamole una per una:

• “editor.defaultFormatter”: “esbenp.prettier-vscode” imposta Prettier come incaricato ufficiale di formattare tutti i file.
• “editor.formatOnSave”: true istruisce VS Code a far partire Prettier sui file ogni volta che vengono salvati. Se non sei abituato a questa cosa, all’inizio sarà un po’ strano vedere i file cambiare quando lo salverai, ma ti garantiamo che ci si abitua in fretta.
• “editor.tabSize”: 2  :imposta VS Code per usare due spazi per ogni tab. Questa preferenza è del tutto soggettiva, l’importante è che ciò che imposti sia uguale per tutte le persone che lavorano insieme allo stesso progetto.
• “files.eol”: “\n” :imposta il carattere del “ritorno a capo”. Questa impostazione elimina una serie di grattacapi quando persone con sistemi operativi diversi (per esempio Windows e MacOS) lavorano sullo stesso codice.
• “files.insertFinalNewline”: true :istruisce VS Code ad aggiungere una riga vuota alla fine di ogni file. Questa è una buona pratica perché alcuni strumenti più antiquati funzionano male se i file non finiscono con una riga vuota.
• “files.trimTrailingWhitespace”: true chiede a VS Code di eliminare eventuali spazi alla fine delle righe. Un classico problema fastidioso con i file che contengono codice è quello degli spazi extra all’interno delle righe vuote e alla fine delle righe di codice, che con questa impostazione vengono rimossi in automatico.

Per completezza, ecco un esempio di caso tipico in cui vengono dimenticati spazi in punti del codice:

function getSomething(input) {
  const someComputedValue = someCondition;
  // <- qui
  return {
    someKey: someValue, // <- qui
    someComputedValue, // <- qui
  };
}

Il secondo file –  che si chiamerà extensions.json – contiene le estensioni raccomandate:

{
  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"],
  "unwantedRecommendations": []
}

In questo caso stiamo semplicemente chiedendo a VS Code di chiedere al suo utente di installare e/o attivare le estensioni di Prettier e ESLint, quando entra in contatto con il nostro progetto per la prima volta.

TODO e FIXME

Per molti sviluppatori seguire un flusso coerente nella scrittura del codice può rivelarsi meno semplice di quanto si immagini: hai presente quando stai facendo qualcosa, ma ti rendi conto che c’è qualcos’altro che vorresti fare e, allora. cominci a farlo e ti dimentichi di cosa dovevi fare in principio?

Questa cosa ad alcuni accade spesso, ma la buona notizia è che, almeno per gli sviluppatori, c’è una soluzione!

La nostra soluzione è quella di adottare un’estensione per VS Code che tenga traccia, tramite dei commenti, delle cose da fare (// TODO:) e di quelle da sistemare (// FIXME:).

Se cerchi “todo” tra le estensioni di VS Code, troverai una serie di estensioni che fanno questa cosa.

A questo punto, prima di lasciare una cosa a metà e passare alla prossima, puoi piazzare un bel commento che ti ricorda cosa stavi facendo, da rintracciare prontamente alla fine della catena di distrazioni, per non lasciare indietro nulla.