Подключение StyleLint в Gulp

Подключение StyleLint к сборке Gulp (актуально 2019).

Чтобы подключить линтер StyleLint в сборку Gulp нужно сделать несколько важных шагов действий.

Существует немало статей с описанием того как подключить линтер StyleLint в Gulp — некоторые содержат ошибки, некоторые устарели.

Вот список этих шагов:

  • Установка и Подключение самого плагина stylelint
  • Установка и Подключение postcss
  • Установка и Подключение browser-reporter — для вывода ошибок в браузер
  • Настройка конфига StyleLint
  • Добавление в таск gulp

1. Подключение плагина StyleLint

Необходимо установить пакет npm ‘stylelint’.

Подключим его в gulpfile.js:

Будьте внимательны нужен именно оригинальный ‘stylelint’, а не плагин для Gulp ‘gulp-stylelint’.

2. Установка и Подключение postcss.

Прекрасная технология postcss позволяет нам работать с CSS-кодом ‘после’.
Установим пакет postcss и расширение для синтаксиса SCSS :

Подключим оба в gulpfile.js:

Здесь gulp плагин ‘gulp-postcss’, а ‘postcss-scss’ без префикса gulp-.

3. Установка и Подключение browser-reporter — для вывода ошибок в браузер

Сам линтер умеет выводить ошибки в консоль, но еще удобней выводить их прямо в браузер.
Для этого возьмем плагин postcss-browser-reporter, и установить его как пакет для нода:

а затем подключим:

4. Настройка конфига StyleLint

StyleLint откажется работать если не увидит конфига, вот дока по нему. Как мы видим возможные форматы файла .stylelintrc.json, .stylelintrc.yaml, .stylelintrc.yml, .stylelintrc.js.

Рассмотрим на примере .stylelintrc.js . В файле находится список правил, которые мы можем добавить самостоятельно на свой вкус  или воспользоваться готовым набором правил, например StyleLint Config Standart .
Основа файла:

Не будем в этой статье заострять внимание на кодстайле, предпочтениях и конвеншенах, главное что теперь мы готовы сделать свой код стандартизированным. Для этого остался один шаг — добавить линтинг в таск.

5. Добавление в таск gulp

Добавим pipe в задачу компиляции SCSS-а,

например:

Обратите внимание: линтинг добавляется перед компиляцией (строка **).

И опции для линтера:

Т.е. Мы добавили postcss и линтинг stylelint() и вывод messages() передали ему в параметры.

Финальный код gulpfile.js

Яндекс.Метрика