SCSS Linting с помощью stylelint и gulp

Table of contents

• Introduction

• Установка пакетов

• Настройка babel

• Настройка stylelint

• Настройка gulp

• Настройка npm

• Запуск линтирования

• Настройка линтирования в PHPStorm

Introduction

Поддержание порядка и следование установленным соглашениям по оформлению позволяют избегать ошибок и ускоряют понимание кода при разработке. Порядок в файлах стилей scss важен и поэтому мы рассмотрим инструмент stylelint, который дает возможность производить тесты на следование установленным соглашениям.

Для демонстрации работы линтирования был создан тестовый проект: https://github.com/superrosko/example-scss-lint.

Установка пакетов

Т.к. stylelint - это npm-пакет, то мы должны инициализировать проект:

npm init

После того, как мы инициировали node-проект и заполнили информацию о нем, нам необходимо установить пакеты, которые мы будем использовать для линтирования.

npm install --save-dev gulp stylelint gulp-stylelint stylelint-config-recommended-scss stylelint-scss @babel/core @babel/cli @babel/node @babel/preset-env

gulp - инструментарий для автоматизации трудоемких задач в вашей разработке

stylelint - линтер стилей

gulp-stylelint - плагин для gulp, запускающий stylelint

stylelint-config-recommended-scss - рекомендуемый конфигурационный файл для работы stylelint

stylelint-scss - коллекция специфичных для SCSS правил линтинга для stylelint

@babel/core @babel/cli @babel/node @babel/preset-env - транспайлер, необходимый для работы gulp

Настройка babel

Для настройки правил транспиляции создадим в корне проекта файл .babelrc со следующим содержимым:

{
  "presets": [
    "@babel/preset-env"
  ]
}

Настройка stylelint

Для настройки правил проверки создадим файл .stylelintrc.json в корне проекта со следующим содержимым:

{
    "extends": "stylelint-config-recommended-scss"
}

Настройка gulp

Запуск линтирования мы будем производить с помощью задач gulp и для этого создадим файл конфигурации gulpfile.babel.js в корне проекта со следующим содержимым:

/**
 * Импортируем необходимые пакеты
 */
import gulp from 'gulp';
import stylelint from 'gulp-stylelint';

/**
 * Указываем пути к файлам для проверки
 * @type {{scss: string}}
 */
const paths = {
  scss: './src/**/*.scss',
};

/**
 * Test Scss lint
 * @return {*}
 */
function testScssLint() {
  return gulp.src(paths.scss).
    pipe(stylelint({
      reporters: [
        {
          failAfterError: true,
          formatter: 'string',
          console: true,
        },
      ],
    }));
}

/**
 * Экспортируем методы
 */
const tests = gulp.parallel(testScssLint);
exports.tests = tests;

export default tests;

Настройка npm

Задача тестирования уже создана, теперь добавим команду test в файл package.json:

 "scripts": {
    "test": "gulp tests"
  },

Запуск линтирования

Перед запуском линтирования создадим пустой файл ./src/style.scss, который и будем проверять линтером.

Линтирование можно запустить следующими командами:

gulp tests

или

npm run test

После запуска теста мы получим ошибку, т.к. правила проверки запрещают пустые файлы:

src/style.scss
 1:1  ×  Unexpected empty source   no-empty-source

Добавим в файл стилей какое-нибудь правило и запустим тест еще раз:

.center {
  text-align: center;
}

Теперь мы не получили ошибку, т.к. добавленное правило удовлетворяет настройкам стилей.

Таким образом мы научились настраивать линтирование файлов scss с помощью stylelint.

Настройка линтирования в PHPStorm

Об ошибках линтирования мы узнаем только во время запуска теста, но хорошо бы видеть их и во время написания кода. Для этого можно подключить конфигурацию из проекта в IDE. Откроем настройки линтирования по следующему пути:

File | Settings | Languages & Frameworks | Style Sheets | Stylelint

Активируем Stylelint и включим опцию Process JS files. Теперь и PHPStorm будет подсвечивать несоблюдение правил линтирования при редактировании.