Si può quasi sempre scommettere che un buon pezzo di scrittura sia stato il benefattore di un buon editing. In questo senso, il codice non è diverso dalla prosa. Uno dei benefici di cui godiamo come sviluppatori e programmatori sono gli editor, o code linters, che possono essere incorporati nei nostri flussi di lavoro.

Linting è l’atto o il processo di controllare il vostro codice per errori di qualsiasi tipo. Ci sono molti pensieri su come ottimizzare l’efficacia di un dato pezzo di codice. Ma controllare per assicurarsi che sia privo di errori e che aderisca ad una particolare guida di stile è la linea di base. A volte è una questione di coerenza e leggibilità, a volte è una questione di far funzionare il codice in primo luogo.

Quando si tratta di linting di JavaScript, ci sono una manciata di strumenti che si distinguono. Diamo un’occhiata a quattro linters che possono aiutarvi a iniziare o perfezionare il vostro processo di linting: JSLint, standardJS, JSHint, e ESLint.

JSLint

JSLint è stato creato nel 2002 da Douglas Crockford, che ha anche scritto quello che è probabilmente uno dei migliori libri su JavaScript. JSLint porta semplicità e velocità al tavolo. Ma è anche molto critico, il che può essere una benedizione o una maledizione.

JSLint consiste in una singola pagina del sito che è dominata da un campo di testo dove puoi incollare il tuo codice. Fai clic sul pulsante ‘JSLint’ e qualsiasi errore, stilistico, sintattico o altro verrà visualizzato sotto il campo di testo. Sotto il campo di testo c’è un piccolo elenco di opzioni, configurabili tramite caselle di controllo. Le opzioni includono la tolleranza degli spazi bianchi extra, l’uso della parola chiave ‘this’ (che è scoraggiata da Crockford nei suoi discorsi), e l’inclusione di Node.js.

Se non siete vincolati a nessuna particolare guida di stile e volete una fonte affidabile per controllare il vostro codice, JSLint è una grande opzione. È particolarmente efficace per testare frammenti di codice o se stai cercando un modo per eseguire rapidamente il lint di piccoli progetti – forse un sito statico a pagina singola che contiene solo un file JavaScript.

standardJS

Basato solo sulle stelle di GitHub, standardJS è l’opzione più popolare, arrivando a quasi 19.000 stelle. È completamente opinionista, il che significa che non è affatto personalizzabile. Ma, se non siete legati a nessuna particolare guida di stile, questa può essere una benedizione. Si presenta sotto forma di un CLI di Node, e può essere installato globalmente o come dipendenza di sviluppo usando il vostro terminale o la vostra linea di comando di scelta:

$ npm install standard --global// or$ npm install standard --save-dev

Perché standardJS ha Node e npm come prerequisiti, e perché è eseguito dalla linea di comando o da uno script npm, il livello di JSLint è leggermente aumentato. Ma poiché non è configurabile, non avete molto altro di cui preoccuparvi. Potete eseguirlo dalla riga di comando come un comando di una sola parola e controllerà ogni file con estensione .js nella vostra directory di lavoro corrente.

Qualunque errore trovi verrà stampato sul vostro terminale o sulla vostra riga di comando. Potete aspettarvi di vedere un output simile a questo esempio dalla documentazione standard di JS:

$ standardError: Use JavaScript Standard Stylelib/torrent.js:950:11: Expected '===' and instead saw '=='.

Se avete bisogno di specificare un file o una directory, potete includere il percorso come argomento e usare i caratteri jolly. Accetta anche i caratteri jolly. In questo esempio, standardJS cercherà e riluciderà qualsiasi file JavaScript nella directory src e nelle sue sottodirectory:

$ standard "src/**/*.js" --fix

Il flag --fix dopo il percorso del file è l’opzione per correggere automaticamente gli errori quando vengono trovati. Questo può essere un grande risparmio di tempo, ma potrebbe anche essere un grande esercizio di apprendimento per correggere gli errori da soli.

Se volete esplorare le convenzioni e le regole che StandardJS usa prima di decidere se usarlo, una lista completa può essere trovata qui. StandardJS è una grande opzione per quelli di voi che cercano un modo veloce e affidabile per iniziare con un linter JavaScript.

JSHint

JSHint è iniziato come un fork di JSLint. L’obiettivo era quello di fare un linter più configurabile. Se avete usato standardJS, o un altro linter opinionato, e state cercando un modo per iniziare a personalizzare le vostre regole di linting, JSHint potrebbe fare al caso vostro. Presenta la maggior parte dei benefici dei linters sopra menzionati e anche di più.

Come JSLint, la homepage di JSHint presenta un campo di testo dove è possibile incollare il codice. Il campo Metricsa destra del campo di testo si aggiornerà in tempo reale mentre digitate, contando una lista corrente di statistiche sul vostro codice, come un conteggio di quante funzioni contiene. Naturalmente, mostra anche tutti gli errori di linting che trova.

Se non vi piace la metodologia del copia/incolla e volete inserirla nel vostro progetto, JSHint può essere installato globalmente o come dipendenza del progetto usando npm:

$ npm install jshint --global// or$ npm install jshint --save-dev

Una volta installato, userete la CLI per fare il lint del vostro codice. Qui ci sono due comandi di esempio che controllano rispettivamente un singolo file e una directory:

$ jshint index.js// or$ jshint src/

Nel primo esempio, JSHint farà il lint del file index.js e nel secondo cercherà ricorsivamente la directory ‘src/’ e farà il lint di qualsiasi file JavaScript che trova. JSHint stamperà ogni errore che trova nel vostro terminale.

Se non vi interessa la personalizzazione, JSHint può essere usato come descritto negli esempi precedenti e funzionerà benissimo. Ma, da qui la complessità può salire significativamente perché JSHint è completamente configurabile ed espone anche un’API, il che significa che può essere usato come un modulo JavaScript nei vostri file JavaScript.

Una configurazione personalizzata, che dovrebbe essere memorizzata in un file chiamato .jshintrc, potrebbe assomigliare a questa:

{"esversion": 5,"eqeqeq": true,"strict": true}

Questo esempio, dall’alto in basso, imposta la versione ECMAScript a 5, richiede l’uso di tre segni uguali ( === o !==) invece di due (== o !=) quando si confrontano i valori, e impone la modalità strict. Puoi includere le tue configurazioni personalizzate specificando il percorso del tuo file .jshintrc dietro un flag -- config alla linea di comando o dichiarandole come attributo ‘jshintConfig’ nel file package.json del tuo progetto. JSHint userà le sue opzioni di default per tutte le regole che non personalizzi.

L’opzione della linea di comando potrebbe essere come questa:

// looks for '.jshintrc' in the current directory$ jshint --config './.jshintrc'

Mentre l’opzione package.json potrebbe essere come questa:

{ "jshintConfig": { "esversion": 5, "eqeqeq": true, "strict": true }}

Puoi usare queste basi per iniziare a personalizzare le tue regole di linting con JSHint. Se stai cercando di più, la documentazione ufficiale contiene una descrizione esaustiva di come usare l’API di JSHint e tutti i modi in cui può essere personalizzata per soddisfare le tue esigenze.

ESLint

Stelle di GitHub a parte, quando si tratta di linting di JavaScript ESLint è probabilmente il linter più visto in natura e sarà il go-to per un sacco di gente. Nella sua stessa documentazione si paragona a JSLint e JSHint per quanto riguarda i metodi che usa per analizzare JavaScript. E, in modo simile a JSHint, si facilita usando le impostazioni predefinite e si aggiungono personalizzazioni quando cambiano le preferenze o le necessità.

Per iniziare con ESLint, installatelo globalmente o come dipendenza di sviluppo:

$ npm install eslint --save-dev// or$ npm install eslint --global

Se installate ESLint globalmente, le sue configurazioni si applicheranno a tutti i file di progetto con cui lo eseguite. Ma se volete configurazioni diverse per progetti diversi, potete installarlo come dipendenza di sviluppo e creare un file di configurazione diverso per ogni progetto. Siate consapevoli che se ESLint è installato come dipendenza del progetto, invece che globalmente, avete bisogno di eseguire l’eseguibile dalla vostra cartella node_modules in questo modo:

$ ./node_modules/.bin/eslint --init

Quando eseguite il comando sopra, sarete guidati nella configurazione di ESLint da una serie di domande. (Nota: Indipendentemente da quanto pensiate di personalizzare le vostre regole di linting, dovete iniziare con questo passo perché ESLint ha bisogno del file .eslintrc che sarà generato da questo processo prima di poter fare il lint del vostro codice)

La prima domanda che vi viene posta è come configurare ESLint. Avete tre opzioni: usare una guida di stile popolare, rispondere alle domande sul vostro stile, o lasciare che ESLint si configuri per voi ispezionando i vostri file per decidere come impostare le regole. Se la prospettiva di configurarlo da soli sembra intimidatoria, potete ripiegare sull’uso di una guida di stile popolare sviluppata da una delle poche organizzazioni conosciute.

A prescindere dalla strada che scegliete, ESLint userà le vostre risposte per generare un file chiamato .eslintrc nella directory di lavoro corrente. Questo è il file che modificherai se vorrai apportare modifiche alle regole di linting in seguito.

Ecco un file .eslintrc di esempio in formato JSON che usa le regole predefinite della guida di stile JavaScript di Airbnb e include due regole personalizzate per disattivare la modalità strict e permettere le dichiarazioni console.log():

{ "extends": "airbnb-base", "rules": { "strict": "off", "no-console": "off" }}

Se scegliete di rispondere a domande sul vostro stile, vi chiederà cose come quale versione di ECMAScript state usando, se preferite tabulazioni o spazi, punto e virgola o meno, e se usate JSX e/o React. Il supporto out-of-the-box di ESLint per React e i plugin supplementari lo renderanno probabilmente la scelta migliore per gli sviluppatori React. Almeno per quelli che hanno appena iniziato con il linting.

Dopo che ESLint è stato installato e un file .eslintrc è stato generato, è possibile utilizzare la CLI per iniziare il linting del codice. ESLint cerca il tuo file .eslintrc per impostazione predefinita, quindi non hai bisogno di specificare alcuna configurazione sulla linea di comando. Ma puoi usare vari flag per alterare il comportamento di ESLint. Nell’esempio qui sotto, il flag -- quiet dice a ESLint di mostrare solo gli errori invece che sia gli avvisi che gli errori. Il flag --fix gli dice di tentare di correggere automaticamente ogni errore che trova.

// run eslint against file1.js$ ./node_modules/.bin/eslint file1.js// run eslint against file1.js and file2.js with flags to modify behavior$ ./node_modules/.bin/eslint file1.js file2.js --quiet --fix

Come per le altre CLI che abbiamo discusso, potete usare caratteri jolly e percorsi di file invece di nomi di file specifici, se necessario. Anche se ESLint è altamente configurabile, facilita la curva di apprendimento utilizzando una guida di installazione accessibile per il suo metodo di configurazione predefinito. Se stai cercando di approfondire le personalizzazioni, la documentazione ufficiale contiene grandi spiegazioni di tutto ciò che puoi fare con ESLint.