ESlint Config Webtek #

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

$3

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

$3

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).

$3

Per l'utilizzo con Visual Studio Code, è neccessario installare la seguente estensione: E' inoltre fortemente consigliato installare anche la seguente: [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">vscode-eslint
(autoformattatore del codice che può essere impostato al salvataggio del file, va a correggere in automatico tanti errori che sarebbero comunque segnalati da eslint).

$3

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)