Stylelint

Мощный линтер для CSS, помогающий придерживаться правил написания кода и избегать ошибок.

Stylelint Logo

Что это такое?

Stylelint — современный инструмент для статического анализа CSS и его диалектов (SCSS, Less, PostCSS и др.), который помогает поддерживать единообразие кода, ловить ошибки и автоматизировать приведение CSS-файлов к единому стилю.

Stylelint используется в таких крупных компаниях, как Google и Github.

Преимущества использования

Использовать Stylelint стоит по нескольким причинам:

  • Поиск ошибок: обнаруживает синтаксические ошибки и потенциальные баги (неправильные значения, дублирование свойств).
  • Единый стиль: гарантирует согласованный стиль кода в команде (отступы, кавычки, порядок свойств).
  • Автоматизация: интегрируется с редакторами и CI, может автоматически исправлять многие простые нарушения.
  • Расширяемость: множество готовых правил и плагинов (например, для BEM, по использованию кастомных свойств, по порядку CSS-свойств).

Быстрый старт

Установка

Автоматическая настройка через create

Stylelint совместим с такими менеджерами пакетов, как npm, bun, pnpm, yarn. Ниже команды для быстрой настройки и установки stylelint в проект: 

				npm create stylelint@latest

Ручная установка

  1. Создайте конфиг stylelint.config.js в корне проекта со следующим содержимым: 

    /** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard"]
};

  2. Используйте npm (или другой удобный для вас пакетный менеджер) чтобы скачать необходимые зависимости: 

    npm add -D stylelint stylelint-config-standard

Использование

Ручной вызов stylelint через терминал (CLI):

npx stylelint "**/*.css"

Stylelint совместим со многими редакторами кода, т.е. его можно настроить для IDE таким образом, чтобы проверки были автоматическими.

WebStorm: Stylelint интегрирован внутрь IDE. Для VSCode существует расширение. Для других редакторов кода настройку предлагаю найти самостоятельно по запросу в интернет.

Далее разберем настройку под редактор кода Visual Studio Code.

Настройка под VSCode

  1. Откройте вкладку расширений:

    Открытие вкладки расширений в VSCode

  2. Установите расширение stylelint:

    Поиск и установка расширения Stylelint в VSCode

  3. Установите stylelint в проект (смотрите шаги выше)

Конфигурация

Stylelint требует, чтобы в вашем проекте был конфиг файл.

Stylelint, начиная с текущей рабочей директории, начинает искать файл stylelint.config.js. Рекомендуется хранить конфигурацию в корне проекта.

Пример базовой конфигурации:

/** @type {import('stylelint').Config} */
export default {
  rules: {
    "block-no-empty": true
  }
};

Ознакомиться с полным списком возможных настроек можно на официальном сайте - Официальное руководство по конфигурации (stylelint.io)

Заключение

Stylelint — мощный инструмент, повышающий качество CSS-кода и упрощающий командную работу. Грамотная интеграция с форматтерами, редакторами и CI позволяет автоматизировать большую часть рутинных проверок и сосредоточиться на дизайне и логике, а не на стиле файла.