Инструменты проверки качества CSS: linting, Stylelint, Prettier

Зачем нужны инструменты проверки CSS? 🧐

CSS — мощный язык, но без правил он превращается в «дикий запад»:
- Опечатки в свойствах (dispaly: flex вместо display: flex)
- Несовместимые значения (width: 110%)
- Хаотичные отступы и форматирование

Linting — это автоматическая проверка кода на ошибки и стилистические недочёты. Как грамматика для программиста!

💡 Интересный факт: термин «lint» появился в 1978 году — так называли мелкие ошибки в коде, похожие на ворсинки (lint) на одежде.

Stylelint: ваш линтер для CSS 🛠️

Stylelint — самый популярный инструмент для проверки CSS, Sass, Less и даже CSS-in-JS. Умеет:
1. Находить синтаксические ошибки.
2. Проверять соглашения по стилю (например, порядок свойств).
3. Автоматически исправлять некоторые проблемы.

Установка и настройка

npm install --save-dev stylelint stylelint-config-standard

Создайте файл .stylelintrc.json:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "color-hex-case": "lower",
    "selector-class-pattern": null
  }
}

Пример ошибки, которую поймает Stylelint:

/* Плохо: верхний регистр в HEX-цвете и лишний пробел */
.button {
  color: #FF0000 ;
  margin: 10px 0px; /* 'px' после нуля избыточно */
}

🔥 Совет: добавьте stylelint-order для проверки порядка свойств (сначала position, потом top и т.д.).

Prettier: единый стиль без споров 💅

Prettier — это не линтер, а форматтер. Он не ищет ошибки, но гарантирует:
- Одинаковые отступы и переносы строк.
- Единые кавычки и точки с запятой.
- Читаемое выравнивание.

Установка:

npm install --save-dev prettier

Пример .prettierrc:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true
}

До и после работы Prettier:

/* До: хаотичные отступы */
body{color:red;
font-size:16px;}

/* После: аккуратный код */
body {
  color: red;
  font-size: 16px;
}

⚡ Важно: Prettier и Stylelint могут конфликтовать. Используйте eslint-config-prettier для отключения правил, которые дублирует Prettier.

Интеграция в проект: VSCode + Git Hooks 🚀

1. Автоматическая проверка в редакторе

Установите плагины:
- Stylelint (плагин для VSCode)
- Prettier — Code formatter

Добавьте в settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "stylelint.validate": ["css", "scss"]
}

2. Проверка перед коммитом (Git Hooks)

Используйте Husky + lint-staged:

npm install --save-dev husky lint-staged

В package.json:

"lint-staged": {
  "*.{css,scss}": ["stylelint --fix", "prettier --write"]
}

Теперь при git commit код будет автоматически проверяться и форматироваться!

Чего избегать: типичные ошибки новичков

1. Игнорирование конфигов команды — если в проекте уже есть .stylelintrc, не переопределяйте правила без обсуждения.
2. Избыточная строгость — не включайте все правила Stylelint сразу. Начните с базовых (stylelint-config-standard).
3. Форматирование вручную — Prettier сделает это быстрее и без ошибок.

Пример плохой конфигурации:

{
  "rules": {
    "color-no-invalid-hex": true,
    "font-family-no-missing-generic-family-keyword": true,
    "block-no-empty": true
    /* ... +50 других правил без понимания их необходимости */
  }
}

Итог: идеальный workflow для CSS

1. Пишите код, не думая о форматировании.
2. Stylelint подсвечивает ошибки прямо в редакторе.
3. Prettier форматирует код при сохранении.
4. Git Hooks проверяют код перед отправкой на сервер.

Результат: чистый, стабильный и единообразный CSS без лишних усилий!

🎯 Для углублённого изучения темы посмотрите разборы Данилы Бежина на YouTube: https://www.youtube.com/@DanilaBezhin — там есть отличные примеры интеграции в большие проекты.