ESlint Config Webtek

Setup e utilizzo di eslint per gli editor di testo PhpStorm e VSCode.

ESlint

Assicurarsi di avere installato sulla macchina NodeJS e NPM. Dopodiche sarà sufficiente eseguire da terminale il comando: npm install -g eslint.

PhpStorm

PHPStorm esce con supporto nativo a ESlint.

In PHPStorm aprire la finestra Settings, andare alla voce Languages and Frameworks | Javascript | Code Quality Tools | ESlint, flaggare la casella Manual ESlint configuration e inserire nelle apposite caselle i percosi degli eseguibili di node e eslint installati sulla propria macchina, ovvero:

• "Node interpreter" -> la casella dovrebbe essere già precompilata con il percorso corretto, se così non fosse, su sistema operativo linux è solitamente "/usr/local/bin/node" altrimenti da terminale digitare il comando which node e copiare il percorso mostrato.
• "ESlint package" -> a seguito dell'installazione globale di eslint tramite node, il percorso dovrebbe essere correttamente impostato su "/usr/local/lib/node_modules/eslint" (sempre su SO linux)

Ulteriori dettagli si possono trovare qui.

E' inoltre fortemente consigliato installare anche la seguente estensione: Prettier
(autoformattatore del codice che può essere impostato al salvataggio del file, va a correggere in automatico tanti errori che sarebbero comunque segnalati da eslint).

VSCode

Per l'utilizzo con Visual Studio Code, è neccessario installare la seguente estensione: [vscode-eslint](https://github.com/microsoft/vscode-eslint.

E' inoltre fortemente consigliato installare anche la seguente: Prettier
(autoformattatore del codice che può essere impostato al salvataggio del file, va a correggere in automatico tanti errori che sarebbero comunque segnalati da eslint).

Setup

In entrambi i casi, per funzionare, eslint necessita di un file di configurazione che viene chiamato .eslintrc. Si tratta di un semplice file che può essere in formato JSON o YAML per esempio, contenente un set di regole secondo le quali vogliamo validare i nostri file JS.

All'interno della directory dove è presente anche un file package.json e la cartella node_modules (la directory in cui faremo lo sviluppo frontend, dove sono situati file e subdirectory relativi a JS) lanciamo il seguente comando da terminale:

npm i @webtekteam/eslint-config-webtek o yarn add @webtekteam/eslint-config-webtek.

Ultimo step è quello di creare, sempre nella medesima directory il file .eslintrc.js con il seguente contenuto:

module.exports = {
  "extends": "@webtekteam/eslint-config-webtek",
  "rules": {},
};

Avremo così la possibilità di avere già importato e configurato un preset di regole con cui il nostro linter potrà lavorare. Ma non siamo limitati solo a questo; all'occorrenza potremmo andare a definire nuove regole o sovrascrivere altre regole già presenti nel preset.

Se questo file fosse già presente, è sufficiente assicurarsi di andare a modificare in esso la voce "extends" avendo cura di sostituirla con "@webtekteam/eslint-config-webtek"

A questo punto il gioco è fatto, se è stato impostato tutto correttamente, aprendo un qualsiasi file JS all'interno del nostro progetto dovremmo vedere eslint in azione e tramite error highlighting: notare in che porzione del codice è stata commessa la violazione e avere info più dettagliate sulla violazione (facendo hover con il mouse sul segnetto rosso)