react

in react, Typescript

Creazione di un app React con CRA, EsLint e Prettier

Reading Time: 4 minutes

All’interno di questo post descriverò le configurazioni ed i plugin che ho installato all’interno di Visual Studio Code per lo sviluppo di applicazioni React.

I prerequisiti per la creazione dell’applicazione sono Visual Studio Code , node.js ed ovviamente npm. Personalmente preferisco utilizzare Visual Studio Code per lo sviluppo di applicazioni React perchè rispetto a Visual Studio è piu performante nello sviluppo di applicazioni web e soprattutto ha una serie di estensioni che possono semplificare l’attività di sviluppo.

Per prima cosa, è necessario partire da un applicazione React, che può essere creata utilizzando il comando npx:

npx create-react-app NOMEAPP --template typescript 

Npx è un tool che fa parte di npm e che installa il pacchetto npm create-react-app per la creazione di un applicazione react. Il comando precedente crea l’applicazione all’interno di una cartella NOMEAPP. Da notare l’opzione –template typescript che aggiunge typescript durante la creazione dell’applicazione.

Una volta creata l’applicazione è possibile eseguirla con il comando :

npm start 

A questo punto, procediamo con l’installazione e la configurazione delle estensioni per Visual Studio Code.

La prima estensione consentirà di fare il “lint” del codice. Il linting è composto da una serie di processi e checks che vengono eseguiti sul codice per identificare potenziali problemi. Il linter è il tool che esegue le operazioni del linting, e può essere agganciato eventualmente anche all’interno di una pipeline CI/CD.

Per molto tempo ho utilizzato TSLint, che consente di verificare il codice scritto in typescript. Con il passare del tempo però è stato deprecato e quindi superato. L’alternativa che ho scelto è ESLint, che è stato adottato dalla community di React e soprattutto è già incluso all’interno di un applicazione creata tramite npx.

In particolare, analizzando la struttura dell’applicazione React, ESLint non è presente all’interno del package.json dell’applicazione, ma all’interno del package.json presente all’interno della cartella node_modules\react_scripts.

A questo punto è necessario installare l’estensione di ESLint all’interno di Visual Studio Code. Utilizzando CTRL + Shift + X e cercando la eslint all’interno della box di ricerca estensioni, l’estensione da installare è :

Configuriamo quindi Visual Studio Code per poter utilizzare l’estensione. Utilizzando lo shortcut Ctrl + , si accedede alla configurazione delle preferenze. Digitando all’interno della search box eslint , nella sezione ESLint: Probe verificare se sono attive le voci typescript e typescriptreact. Nel caso in cui non siano presenti sarà necessario aggiungerle utilizzando il pulsante “Aggiungi Elemento”.

A questo punto Visual Studio Code è configurato per effettuare il lint del codice. All’interno del file .eslintrc.json nella root dell’applicazione (se non è presente, è necessario crearlo), aggiungere il codice:

{
    "extends": "react-app"   
}

In questo modo stiamo dicendo al nostro lint di eseguire tutte le regole che sono state configurate con CRA.

Dopo aver imposto le regole di consistenza del codice, abbiamo sicuramente migliorato la sua leggibilità, ma allo stesso modo abbiamo introdotto una serie di problemi legati alla sua scrittura: eslint è piuttosto pedante. Gli sviluppatori sono pigri: sarebbe interessante, ad esempio, avere un tools che consenta di aggiungere il ; quando ci siamo dimenticati di inserirli e che svolga una serie di operazioni al posto nostro. Questa funzionalità è facilmente integrabile utilizzando un tool per il code formatting. Nel mio caso l’estensione per Visual Studio Code che ho installato è Prettier.

L’installazione di Prettier passa dalla linea di comando, tramite npm:

npm  install prettier --save-dev

seguita dall’installazione delle regole per eslint:

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

in particolare eslint-config-prettier disabilita le regole di prettier che sono in conflitto con eslint e eslint-plugin-prettier installa le regole specifiche per eslint.

Si passa quindi dalla modifica del file di configurazione .eslintrc.json nel seguente modo:

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  }
}

abilitando l’utilizzo di Prettier. E’ il momento di creare il file di configurazione per Prettier, il file .prettierrc:

{
    "printWidth": 80,
    "singleQuote": true,
    "semi": true, 
    "tabWidth": 2, 
    "trailingComma": "all", 
    "endOfLine": "auto"
}

all’interno del quale sono definite le regole che dovranno essere utilizzate.

Nell’esempio:

  • le righe che contengono piu di 80 caratteri vengono suddivise
  • le ” vengono sostituite da ‘
  • i ; sono inseriti automaticamente al termine di ciascuna riga
  • il tab viene impostato a 2 spazi

Per la guida completa delle regole che possono essere utilizzate all’interno del file .prettierrc è possibile visitare la pagina della documentazione.

A questo punto non rimane che installare il plugin di Prettier in Visual Studio Code. Con il solito shortcut di Visual Studio Code CTRL + Shift + X, digitare prettier all’interno della search box.

Una volta installato, trovo particolarmente comoda la funzionalità di far eseguire le regole di Prettier al salvataggio. Torniamo all’interno della configurazione di Visual Studio Code, con lo shortcut Ctrl +, e questa volta cerchiamo la parola format:

verificando che Default Formatter sia impostato su Prettier e che la formattazione avvenga in fase di salvataggio.

Siamo quindi pronti per sviluppare!