Ve Visual studiu 2017 máme dvě možnosti zobrazení výsledků StyleLint. Popíši obě.
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).
- 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. TypickyC:\Program Files\nodejs
.- Pozor, záleží na pořadí cest.
- Nainstalujte doplněk NPM Task Runner
- Restartujte Visual Studio
- Otevřete okno
Views > Other windows > Task runner explorer
- Pokud máte v projektu nastaveny npm skripty uvidíte je v tomhle okně
- 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 nabízí opravdovou integraci stylelint a jiných *lint nástrojů do Visual Studia. Jen jeho konfigurace je mírně zákeřná.
- Vypněte Visual Studio css lint
Tools > Options > Texteditor > Css > CssLint > Enable css lint
nastavte nafalse
- Nainstalujte doplňek MultiLinter
- Restartujte Visual Studio
- Přidejte soubor
.multilinterrc.json
- Je možno jej přidat do rootu projektu, vedle
package.json
- Nebo do
%USERPROFILE%\.multilinterrc.json
- Je možno jej přidat do rootu projektu, vedle
- 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
- Pokud nemáte stylelint globálně, je potřeba nastavit parameter
- Další nastavení jsou ukrytá v
Tools > Options > MultiLinter > General
- Tady nás zajímá především linting mode
- Doporučuji
Real time
- Doporučuji
- Volba
Debug
ovlivňuje výpis do výstupu, pokud vše funguje, není potřeba
- Tady nás zajímá především linting mode
- Zapnout klidně můžete i několik linterů najednou