Stylelint Config Webtek

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

Stylelint

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

PhpStorm

In PHPStorm aprire la finestra Settings, andare alla voce Languages and Frameworks | Style Sheets | Stylelint, flaggare la casella Enable e inserire nelle apposite caselle i percosi degli eseguibili di node e stylelint 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.
• "Stylelint package" -> a seguito dell'installazione globale di styelint tramite node, il percorso dovrebbe essere correttamente impostato su "/usr/local/lib/node_modules/stylelint" (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 stylelint).

VSCode

Per l'utilizzo con Visual Studio Code, è neccessario installare la seguente estensione: vscode-stylelint.

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

Setup

In entrambi i casi, per funzionare, stylelint necessita di un file di configurazione che viene chiamato .stylelintrc. 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 CSS/SCSS.

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 CSS/SCSS) lanciamo il seguente comando da terminale:

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

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

module.exports = {
  "extends": "@webtekteam/stylelint-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/stylelint-config-webtek"

A questo punto il gioco è fatto, se è stato impostato tutto correttamente, aprendo un qualsiasi foglio di stile all'interno del nostro progetto dovremmo vedere stylint 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)