Přejít k navigační liště

Zdroják » Webdesign » Stylelint: Jak si jej nainstalovat v editorech kódu?

Stylelint: Jak si jej nainstalovat v editorech kódu?

Články Webdesign

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

Nálepky:

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?

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 linterlinter-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.

ebook-vdcss3-prebal-final

Kniha „Vzhůru do (responzivního) designu“

Kompletní průvodce návrhem a implementací responzivních uživatelských rozhraní v e-booku a knize. Více informací.

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.