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.