Visual Studio Code: come utilizzare EsLint

Vediamo come utilizzare EsLint all’interno di Visual Studio Code. EsLint per chi non lo sapesse è un programma che viene in aiuto per poter scrivere in modo corretto JavaScript e JSX. Come forse si intuisce dal nome ES+Lint, quell’ES è appunto riferito alle varie versione ECMA di JavaScript, dalla 2015 fino alla contemporanea 2018.

Prerogativa dell’installazione è avere Node.js perché appunto l’applicativo lavora poi dietro le quinte ad analizzare il codice. Poi serve chiaramente Visual Studio Code e l’estensione Vs Code EsLint Extension scaricabile dal marketplace.

Una volta ottenuto il necessario nel nostro progetto servirà l’installazione del pacchetto NPM di EsLint. Spesso viene proposta l’installazione globale, come al solito io preferisco quella locale, anche perché parte di questi pacchetti, o la loro azione, poi finisce sempre per risultare da qualche parte. Specie se utilizzate GitHub e di riflesso è probabile che vogliate utilizzare dei servizi online di validazione del codice, rischiate di trovarvi con il badge che indica errori. Quindi l’installazione avviene come al solito con:

npm install --save-dev eslint

Chiaramente il pacchetto viene installato come dipendenza di sviluppo, visto che ci serve solitamente in quel frangente. Ora di fatto si dovrebbe attivare EsLint sul progetto che stiamo creando, poiché andrà a creare un file JSON sulla cartella di root che si chiamerà .eslintrc.json
Ma siccome dobbiamo andare a cercarci l’eseguibile, con il comando init, che sta sotto:

./node_modules/.bin/eslint --init

va da se che è una scocciatura, sebbene come sappiamo Visual Studio Code ci proponga il terminale all’interno dell’editor stesso. Molto più conveniente aprire la palette di comando;
SHIFT + Command + P in macOs
CTRL + SHIFT + P per Windows  
a cui impartire il comando Create.

A questo punto si apre comunque il terminale integrato al programma, con un sistema di wizard testuale. Queste sono le mie configurazioni consigliate:

• Answer questions about your style
• Are you using ECMAScript 6 features? -> Y
• Are you using ES6 modules? -> N
• Where will your code run? -> browser
• Do you use CommonJS? -> N
• Do you use JSX? -> N
• What style of indentation do you use? -> Tabs
• What quotes do you use for strings? -> Single
• What line endings do you use? -> A scelta in base al vostro OS
• Do you require semicolons? -> Y (a scelta)
• What format do you want your config file to be in? -> Json

Arrivati a questo punto abbiamo il file JSON che citavo prima, ovvero .eslintrc.json che contiene quanto abbiamo scelto dal wizard iniziale. Possiamo sempre andare a modificare le varie componenti, ed in particolare trovo un po’ seccante gli errori dovuti all’indentazione, perché mi è capitato più volte che non captasse la presenza corretta di un spazio tabulato. Quindi l’interno del file che io utilizzo appare così:

{
    "env": {
        "browser": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 2018
    },
    "rules": {
        "indent": [
            "off",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "no-unused-vars": [
            "off"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

Come potete vedere non ci sono riferimenti diretti ad un progetto in particolare, così una volta scelto quello che più ci aggrada nelle impostazioni si può agevolmente copiare all’interno di un nuovo progetto senza perdere ulteriore tempo. Pongo solo l’attenzione alla riga
“extends”: “eslint:recommended”
che di fatto fa riferimento ad una sorta di ruoli di utilizzo pressoché popolare, o di maggior uso. Infatti di base parte senza nessun ruolo, salvo quelli riguardanti lo spazio tabulato, o il punto e virgola. La lista di ruoli disponibili la potete visionare a questo link.

Una volta attivato, Visual Studio Code dovrebbe già utilizzre ESLINT e mostrarvi gli errori, molto probabilmente al salvataggio del file. Vengono mostrati sia gli errori tali per definizione, cioè codice errato, ma questo già Visual Studio Code intellisense lo dovrebbe segnalare in fase di scrittura, che gli errori di stile. Ovvero errori che Javascript ignorerebbe e che non bloccano l’esecuzione del codice, ma mantengono la scrittura pulita e coerente, cosa non da poco vista la complessità intrinseca del sistema. Siccome per molti di questi errori di stile è probabile che siano relativi all’utilizzo di doppi apici o singoli apici, a seconda di quale dovreste utilizzare per default, è possibile chiedere a ESLint di fixarli per noi.

Nella tab “Problemi” in basso al posto di Terminale, dovreste vedere la sezione con tutti i “problemi” rilevati. A questo punto se è una situazione tipica come questa qui sopra, basterà fare tasto destro sulla tipologia di errore e chiedere il fix di tutti i problemi identici per ruolo.

E’ anche possibile chiedere di fixare tutti i problemi in automatico, dalla palette dei comandi di VSC utilizzeremo il comando Fix all.
Può essere che questo sistema diventi in certi frangenti una rottura, lo possiamo disabilitare momentaneamente sempre dalla palette comandi con Disable ESLint for this Workspace. Processo inverso per riattivarlo. Da notare infine che sulla sinistra i file che hanno riportato errori vengono segnalati in rosso e vicino ad essi il numero di errori riscontrati.

Conclusioni

Non fatevi prendere dalle difficoltà iniziali, in effetti ho dovuto penare un attimo anche io per capire come doveva funzionare. Tuttavia arrivati a regime è molto utile per scrivere un codice pulito e fare bella figura a livello professionale. Purtroppo il vantaggio della ampia non rigidità di eseguire il codice da parte di Javascript per contro si traduce in codice “sporco” o difficilmente leggibile da un occhio umano. Eslint ci permette di non doverci preoccupare di questo.