Text vyšel původně na autorově webu.

Stylelint je nástroj pro automatickou kontrolu CSS. Usnadní vám psaní jednotnějšího a kvalitnějšího kódu. Hlavně na větších projektech, nebo na takových, kde se styly snaží rozbít více lidí najednou. Prostě linter.

S čím pomůže?

• možné chyby v kódu (překlepy, zapomenuté prázdné deklarace aj.)
• omezení různých způsobů zápisu (zakázání pojmenovaných barev, omezení počtu desetinných míst aj.)
• stylistika (abyste jednou nepsali barvy v hexa kódu písmeny malými a podruhé velkými aj.)

To bylo krátké představení a nyní k přidání do editorů.

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-default a linter-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 Martina 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.