Martin Michálek Martin Michálek  – 31. 7. 2018

Pojďme si rozjet Stylelint přímo v editoru. Je to totiž to první místo, kde bychom jej měli používat.

Sublime Text

  • Přes Package Control si nainstalujte SublimeLinter:
    Ctrl/Cmd + Shift + p → „Package Control: Install Package“ → „SublimeLinter“
  • V příkazové řádce si globálně nainstalujte balíček stylelint_d:
    npm install stylelint_d -g
  • Přes Package Control si nainstalujte SublimeLinter-contrib-stylelint_d:
    Ctrl/Cmd + Shift + p → „Package Control: Install Package“ → „SublimeLinter-stylelint_d“

To, že vám Stylelint funguje, poznáte tak, že před problematickými řádky řádcích kódu se začne zobrazovat tečka s chybovou hláškou.

Předpokládám, že používáte Sublime ve verzi 3. Dále, že už máte nainstalovaný zvýrazňovač syntaxe pro CSS a preprocesory. Bez toho to nebude fungovat.

Já se ještě trochu utavil na tom, že pro správu verzí NPM používám NVM. Nakonec pomohlo nastavení jedné z distribucí jako výchozí $ nvm alias default v8.1.2.

Atom

V „Settings“ / Install“ najděte balíčky linter, linter-ui-defaultlinter-stylelint a nainstalujte je se všemi závislostmi, které bude Atom hlásit.

Úspěšná instalace vypadá i tady tak, že se postižené řádky začnou zvýrazňovat tečkou a chyby vypisovat ve spodním panelu „Linter“.

VS Code

Tady to je jednoduché: Ve „View“ / „Extensions“ hledejte nejnovější verzi balíčku stylelint.

Po instalaci se vám začnou zvýrazňovat prohřešky přímo v kódu. Detaily uvidíte v panelu „Problems“.

Visual Studio 2017

Ve „velkém“ Visual Studiu máte dvě možnosti prostřednictvím doplňků:

  • NPM Task Runner - v okně Task Runner Explorer ukazuje výstupy, ale o opravdová integrace Stylelint to není.
  • MultiLinter - wrapper pro další lintery, který umí i Stylelint. Ukazuje výstupy v okně Output a přímo u kódu, což chcete. Náročnější je trochu jeho nastavení.

Detailní návod pro obě možnosti hledejte v textu od Martin Dybala, kterému tímto děkuji.

Další

Pluginy pro Emacs a Vim jsou k nalezení v seznamu nástrojů na oficiálním webu Stylelintu.

Pokud se vám povedla instalace v jiném editoru, budu moc vděčný za její popis v komentářích.