Come impostare il linting JavaScript in Visual Studio Code

Ovviamente sono un grande fan dell’uso degli standard di codifica ogni volta che scrivi codice lato server (indipendentemente dal fatto che sia WordPress, PSR2 o qualsiasi altra cosa – finché stai usando qualcosa, penso che sia una buona cosa).

Ma quando si tratta di scrivere codice lato client, vale a dire JavaScript per questo post, non lo vediamo tanto discusso anche se penso che sia altrettanto importante. Lo stesso vale per CSS, Sass o LESS, ma questo è contenuto per un altro post.

Per i progetti recenti, abbiamo utilizzato la guida allo stile JavaScript di Airbnb per i nostri progetti. Sono un fan e penso che aiuti a scrivere JavaScript pulito e leggibile (sembra che sia stato scritto dalla stessa persona – l’obiettivo finale degli standard di codifica, giusto?).

In questo post, illustrerò il processo di installazione in Visual Studio Code.

Linting JavaScript nel codice di Visual Studio

Questo post presuppone che tu abbia familiarità con la configurazione di Node Package Manager sul tuo computer locale.

Se non lo sei, allora ho una guida su come farlo in questo post. La scorciatoia? È letteralmente così semplice ( una volta installato Homebrew):

Dopo averlo configurato (usando detto post o se è già impostato), sarai pronto per andare avanti con l’installazione effettiva degli strumenti necessari per configurare il linting JavaScript in Visual Studio Code.

1 Installazione di ESLint

Supponiamo, ad esempio, di eseguire un progetto da una directory denominata acme nella directory Progetti in Dropbox. In tal caso, vai alla directory dei plugin per detto progetto. Probabilmente assomiglierà a questo:

$ cd ~/Dropbox/Projects/acme/wp-content/plugins/acme-plugin

Per qui, dovrai installare ESLint e i file di configurazione di Airbnb. Fortunatamente, è davvero facile da fare. Dal terminale, inserisci semplicemente il seguente comando:

$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import

Presumo che nessuno dei pacchetti di cui sopra sia già installato. In tal caso, come eslint, puoi rimuovere quel particolare argomento dalla riga sopra.

Inoltre, è importante capire che il progetto eslint-plugin-import è importante per aggiungere il supporto per l’importazione e l’esportazione di moduli JavaScript.

2 La configurazione ESLint

È necessario un altro passaggio prima di ottenere l’impostazione della configurazione in Visual Studio Code. Vale a dire, si tratta di creare un file di configurazione ESLint. Dall’interno della directory acme-plugin come mostrato sopra, inserisci il seguente comando:

$ touch .eslintrc.js

Questo creerà un file vuoto (o un file punto vuoto come alcuni potrebbero riferirsi ad esso) ed è qui che la nostra configurazione farà riferimento alla guida di stile di Airbnb.

Nel file è sufficiente aggiungere le seguenti righe di codice di configurazione:

module.exports = {
  "extends": "airbnb-base"
};

Ora che hai installato ESLint, hai un riferimento a Airbnb Styleguide e hai un riferimento al supporto di una sintassi aggiuntiva, è il momento di configurare Visual Studio Code.

3 Impostazione del codice di Visual Studio

Secondo me, questa è la parte più facile. Apri il pannello delle estensioni usando il modo che preferisci (cliccando sull’icona o usando il collegamento) e quindi esegui una ricerca per ESLint. Potresti vedere diversi risultati, ma quello che vuoi è quello che assomiglia a questo:

Installalo e quindi ricarica il codice di Visual Studio. Dovrebbe essere impostato nelle Impostazioni predefinite che puoi confermare aprendo le impostazioni e cercando questo pezzo di codice:

// Controls whether eslint is enabled for JavaScript files or not.
"eslint.enable": true,

Se non è presente, puoi aggiungerlo alle Impostazioni utente (non sono un fan del mucking con le impostazioni predefinite nel caso in cui sia necessario ripristinare da una base pulita).

Una volta definito questo, sei a posto e dovresti avere il tuo JavaScript bloccato mentre lavori al tuo progetto.

Altri gestori di pacchetti?

Sopra, ho fornito un esempio di come farlo tramite Node; tuttavia, è anche possibile ottenere utilizzando Yarn. Questo è qualcosa di cui ho intenzione di seguire il rito in futuro, ma poiché ho trattato Node in un post precedente, sembrava logico e più semplice seguire quel post con questo contenuto come riferimento.

Quando verrà il momento per me di esaminare l’utilizzo di un gestore di pacchetti diverso, in particolare Yarn, tratterò anche quello.