Настройка Stylelint в VSCode и Gulp ( и других проектах npm ) для BEM, сортировки CSS и вложенности SCSS

Организация CSS-кода — ключ к чистому и поддерживаемому проекту. Особенно это важно, если вы используете BEM-методологию, SCSS-вложенности и хотите сортировать свойства CSS для единообразия. В этой статье мы разберём, как настроить Stylelint в VSCode, чтобы проверка и сортировка происходили автоматически, без участия сборщика Gulp.

Почему стоит использовать Stylelint

Stylelint — это мощный линтер для CSS/SCSS/LESS/PostCSS. Он позволяет:

• Проверять соблюдение BEM-правил
• Автоматически сортировать CSS-свойства
• Подсвечивать ошибки прямо в редакторе
• Поддерживать единый стиль кода в команде

Важно: линтер работает в VSCode независимо от Gulp или других сборщиков.

---

Установка зависимостей проекта

Для работы с BEM и сортировкой CSS установим минимальные пакеты:

npm i -D stylelint stylelint-config-standard-scss stylelint-config-prettier-scss stylelint-order stylelint-selector-bem-pattern

• stylelint — основной линтер
• stylelint-config-standard-scss — стандартные правила для SCSS
• stylelint-config-prettier-scss — совместимость с Prettier
• stylelint-order — сортировка CSS-свойств
• stylelint-selector-bem-pattern — проверка BEM-структуры

---

Создаём конфиг Stylelint

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

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-prettier-scss"
  ],
  "plugins": [
    "stylelint-order",
    "stylelint-selector-bem-pattern"
  ],
  "rules": {
    "plugin/selector-bem-pattern": {
      "componentName": "[a-z]+(?:-[a-z]+)*",
      "preset": "bem",
      "componentSelectors": {
        "initial": "^\\.{component}(?:__[a-z0-9-]+)?(?:_[a-z0-9-]+)?$"
      }
    },
    "order/properties-order": [
      [
        "position",
        "top",
        "right",
        "bottom",
        "left",
        "z-index",
        "display",
        "flex",
        "flex-direction",
        "justify-content",
        "align-items",
        "width",
        "height",
        "min-width",
        "max-width",
        "min-height",
        "max-height",
        "margin",
        "padding",
        "font",
        "font-family",
        "font-size",
        "font-weight",
        "line-height",
        "text-align",
        "color",
        "background",
        "border",
        "border-radius",
        "box-shadow",
        "transition",
        "transform",
        "animation"
      ],
      {
        "unspecified": "bottomAlphabetical"
      }
    ]
  }
}

Что делает этот конфиг:

• BEM-валидация
  Разрешены классы в формате:

  .block 
  .block_mod 
  .block__element 
  .block__element_mod

  Запрещены двойные элементы или неправильные модификаторы.

• Сортировка CSS-свойств
  Свойства упорядочены по логическим группам: layout → box model → typography → visual → animation.
  Неопределённые свойства идут в алфавитном порядке внизу.
• SCSS-вложенности
  Поддерживаются вложенные селекторы с &__element и &_mod.

---

Настройка VSCode

Чтобы Stylelint работал только в редакторе и исправлял ошибки при сохранении:

1. Откройте настройки рабочего пространства:
   File → Preferences → Settings → Workspace → {} (открыть JSON)
2. Добавьте:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": [
    "css",
    "scss"
  ]
}

Теперь при сохранении файлов .scss или .css:

• Stylelint автоматически сортирует свойства
• Проверяет BEM-структуру
• Подсвечивает ошибки

---

Пример правильного SCSS-кода

.block {
  display: flex;
  flex-direction: column;
  width: 100%;

  &__item {
    color: red;
    padding: 10px;

    &_big {
      font-weight: bold;
    }
  }

  &_active {
    background-color: yellow;
  }
}

Все свойства будут автоматически отсортированы, а структура классов соответствует BEM.

---

Преимущества такой настройки

• Полная изоляция от сборщика — Gulp не трогается
• Единый стиль кода для команды
• Автоисправление при сохранении
• Поддержка SCSS-вложенности и модификаторов _mod
• Совместимость с Prettier

---

Итог

Теперь ваш проект настроен для:

• Чистого и поддерживаемого BEM-кода
• Единообразной сортировки CSS-свойств
• Автоматической проверки и исправления прямо в VSCode

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

Вам может быть интересно

Сборка Gulp 5 которую не нужно переустанавливать для новых проектов и версток