Návod pro rozchození StyleLint ve Visual Studio

multilinter-error-order.jpg

multilinter-error.jpg

multilinter-output.jpg

task-runner-explorer-stylelint.jpg

task-runner-explorer.jpg

vs-stylelint.md

Návod pro rozchození StyleLint ve Visual Studio

Ve Visual studiu 2017 máme dvě možnosti zobrazení výsledků StyleLint. Popíši obě.

NPM Task Runner

Tento doplněk nám umožní spouštět npm skripty v okně Task Runner Explorer. Doplněk taky umožňuje spouštět skripty po nějaké události (Project open, before build, after build, Clean).

NPM Task Runner instalace

1. Pro správnou funkčnost si ověřte verzi npm, kterou Visual Studio používá. Součástí instalace Visual Studia totiž může být i npm. Proto si přidejte do nastavení Tools > Options > Web external tools složku, kde je nainstalován node js. Typicky C:\Program Files\nodejs.
   • Pozor, záleží na pořadí cest.
2. Nainstalujte doplněk NPM Task Runner
3. Restartujte Visual Studio
4. Otevřete okno Views > Other windows > Task runner explorer
5. Pokud máte v projektu nastaveny npm skripty uvidíte je v tomhle okně
6. Pokud chcete spouštět skript automaticky, stačí si nad ním vyvolat kontextové menu a zvolit v sekci bindings

NPM Task Runner nám usnadňuje práci s frontend pipeline, ale o opravdová integrace Stylelint to není.

MultiLinter

MultiLinter nabízí opravdovou integraci stylelint a jiných *lint nástrojů do Visual Studia. Jen jeho konfigurace je mírně zákeřná.

MultiLinter instalace

1. Vypněte Visual Studio css lint Tools > Options > Texteditor > Css > CssLint > Enable css lint nastavte na false
2. Nainstalujte doplňek MultiLinter
3. Restartujte Visual Studio
4. Přidejte soubor .multilinterrc.json
   • Je možno jej přidat do rootu projektu, vedle package.json
   • Nebo do %USERPROFILE%\.multilinterrc.json
5. Nyní je potřeba nakonfigurovat stylelint. Uvádím nejjednodušší konfiguraci, ta počítá s nainstalovaným stylintem globálně, pomocí npm install -g stylelint
   • Pokud nemáte stylelint globálně, je potřeba nastavit parameter executable

   {
       "stylelint": {
       "enabled": true,
       "fileExtensions": "scss"
       }
   }

   • Konfigurace je bohatá, lze odvodit z config.json
   • K ladění Vám pomůže output window
     • Najdete zde vhodné informace, pokud se stylelint nepovede spustit
6. Další nastavení jsou ukrytá v Tools > Options > MultiLinter > General
   • Tady nás zajímá především linting mode
     • Doporučuji Real time
   • Volba Debug ovlivňuje výpis do výstupu, pokud vše funguje, není potřeba
7. Zapnout klidně můžete i několik linterů najednou

No a takhle vypadá výsledek našeho nastavování