Устанавливаем Stylelint во Vue-проект

Когда я решил махом прикрутить stylelint в пару к eslint в своей кастомной конфигурации Vue 3/Sass/Webpack 5, то обнаружил, что сделать это не так просто. Сначала stylelint вообще не понимал, как работать с однофайловыми компонентами Vue. Затем перестал парсить простые .scss-файлы.

У хваленой документации stylelint готового рецепта не оказалось, а гугл засыпает разрозненными Q&A-страницами, где в лучшем случае находилось решение только какой-то конкретной задачи. Это побудило меня написать свой рецепт.

Возможно, тебе будет проще и быстрее посмотреть готовый код обсуждаемой здесь конфигурации.

Ставим пакеты

Сначала поставим в проект все нужные пакеты:

npm install –save-dev stylelint stylelint-config-standard-scss stylelint-webpack-plugin @mapbox/stylelint-processor-arbitrary-tags

По порядку:

stylelint — сам линтер стилей. Он работает через cli, поэтому можешь проверить все файлы с помощью команды: npx stylelint “**/*.scss”;

stylelint-config-standard-scss — конфигурация с правилами для препроцессора sass (с scss-синтаксимом). Если используешь другой препроцессор или чистый css — гляди нужную конфигурацию для установки тут;

stylelint-webpack-plugin — нужен для линтинга стилей при сборке проекта вебпаком. Webpack выведет ошибки в консоль и в браузер, если запустить сборку на dev-server’е;

@mapbox/stylelint-processor-arbitrary-tags — позволяет stylelint’у читать однофайловые компоненты, находя в них предварительно теги <style></style>, где и должны находиться стили.

Конфигурируем stylelint

В корне проекта создай файл: “.stylelintrc.json” и скопируй в него конфигурацию:

module.exports = {
	processors: [
		[
    	'@mapbox/stylelint-processor-arbitrary-tags',
			{
				fileFilterRegex: [/\.vue$/],
			},
		],
	],
	extends: 'stylelint-config-standard-scss',
	rules: {
		'no-empty-first-line': null,
		'no-empty-source': null,
	},
};

В массиве “processors” мы передаём установленный ранее процессор, который ищет в файлах теги <style></style> (но можно поменять регулярное выражение для поиска, читай тут). Через “fileFilterRegex” передаём процессору регулярное выражение с перечнем расширений файлов, для которых нужно применять данный процессор (в нашем случае это .vue-файлы). Если не указать эту опцию, процессор будет парсить и стандартные .css/.scss файлы. Он не найдет там искомые теги<style></style> и выдаст ошибку “no-empty-source”.

В свойство “extends” передаём конфигурацию с правилами для scss. А в “rules” отдаём объект с настройкой правил (полный их список тут). В нашем случае нужно отключить правило “no-empty-first-line” (процессор строчку с тегом <style> считает за первую, не видит в ней определения стилей и выдаёт ошибку) и уже знакомое правило “no-empty-source” (т.к. некоторые .vue-файлы могут не содержать стилей в принципе).

Конфигурируем Webpack

Вверху “webpack.config.js” импортируй установленный ранее плагин:

const StyleLintPlugin = require('stylelint-webpack-plugin');

Затем, в массиве “plugins” определи сам плагин и укажи формат файлов, которые stylelint’у нужно читать при сборке (в нашем случае это файлы с расширением .vue и .scss):

plugins: [
	//...
  new StyleLintPlugin({
  	files: [path.resolve(__dirname, 'src/**/*.{vue,scss}')]
  }),
  //...
]

Теперь лови ошибки stylelint’а при сборке в консоли и в окне браузера при сборке проекта в режиме dev-server’а.

Устанавливаем и конфигурируем плагин stylelint в VSCode

Если ты пользуешься другим редактором, ищи инструкцию по установке тут.

Установи сам плагин из маркетплейса редактора по этой ссылке.

Затем — в самом редакторе — перейди в параметры (Файл -> Настройки -> Параметры), набери в поиске: “stylelint” и в блоке “stylelint: config” кликни “изменить в settings.json”. В файле перед закрывающий фигурной скобкой вставь следующие строки:

{
	//...
  "css.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["scss", "vue"]
}

Мы просим VSCode отключить встроенные в редактор линтеры для CSS и препроцессора SCSS и делегируем проверку vue- и scss-файлов stylelint’у.