Visual Studio Code: come utilizzare EsLint

di Pubblicato: 20 Agosto 2018 7 commenti

ESLint – Javascript con stile

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.

Libri che ti consiglio sull'argomento

Alcuni titoli che ho trovato utili come manuale tecnico per questo articolo

Ci sono 7 commenti, di la tua!

sezione commenti aperta al pubblico
  1. Paolo
    #1 Paolo 29 Gennaio, 2019, 19:58

    ciao, ho trovato la tua guida per caso. Non sono ancora riuscito tuttavia a risolvere il problema. Atom con eslint ti permette di linkare alla documentazione ufficiale (con le best practices), con visual studio code non sono riuscito ad impostare questa features. Che tu sappia è un errore o non è proprio possibile?

    Rispondi a questo commento
    • Walter Tosolini
      Walter Tosolini 29 Gennaio, 2019, 20:08

      Ciao, ma per documentazione ufficiale, intendi quella di Eslint o quella del linguaggio esaminato? Sono oramai due anni che non utilizzo Atom e non ricordo bene i particolari. Ad ogni modo in Vscode per il file eslint.json basta avvicinare il mouse e viene mostrato un misero snippet, non molto in effetti. Nel secondo caso dipende dal linguaggio, ma ad esempio javascript, node, es5 eccetera, basta avvicinare il mouse alla funzione e viene mostrata la definizione. Con ALT+F12 dovrebbe mostrarti la definizione estesa.

      Rispondi a questo commento
      • Paolo
        Paolo 29 Gennaio, 2019, 20:16

        no, sto usando visual studio code con eslint plugin per js (emac2018) e nei casi di errore mi riporta uno snippet di una riga, e mi chiedevo se fosse un mio problema, perché mi piacerebbe che mi linkasse alla documentazione (altrimenti mi serve a poco così). Uso osx, ALT+F12 credo vado con win

        Rispondi a questo commento
        • Walter Tosolini
          Walter Tosolini Autore 29 Gennaio, 2019, 20:26

          No funziona così, ti mostra lo snippet con l’esempio di come dovrebbe venire scritta la definizione o la tal funzione. Premendo alt/option + F12 mostra qualcosa in più. Forse trovi qualche estensione nel marketplace. Ma a spanne direi che in questo caso Atom fa meglio questo lavoro.

          Rispondi a questo commento
          • Paolo
            Paolo 29 Gennaio, 2019, 20:42

            mi riferisco alla parte di visual studio code, nel riquadro problemi, a me ritorno solo copia e copia messaggio, e mi aspettavo un qualcosa che mi portasse alla documentazione su https://eslint.org (se non ricordo male atom riportava anche un link per ogni problema di sintassi, che ti portava ad una pagina di esempi e spiegone)

            Rispondi a questo commento
            • Walter Tosolini
              Walter Tosolini Autore 29 Gennaio, 2019, 21:07

              ah ok, ora ho capito. Allora no non lo fa. Però puoi sempre rompere gli “zebedei” a Microsoft sul progetto github chiedendo di inserire la feature. Mi pare che Baeumer, il programmatore dietro al progetto, sia abbastanza attivo. Al massimo ti dice di no.

              Rispondi a questo commento
              • Paolo
                Paolo 29 Gennaio, 2019, 21:08

                ok, grazie del suggerimento 🙂

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.