SCSS Linting с помощью stylelint и gulp
Table of contents
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
будет подсвечивать несоблюдение правил линтирования при редактировании.
Дата редактирования : 2020-11-12 00:33:15
Автор : Rosko