Stylelint

Линтер для CSS/SCSS/Less -- находит ошибки и обеспечивает единый стиль стилей.

Зачем нужно

  • Ловит ошибки в CSS (дубли свойств, невалидные значения)
  • Единый порядок свойств и нейминг
  • Поддержка SCSS, Less, CSS-in-JS

Где используется

  • Проекты с кастомным CSS/SCSS, CI/CD, pre-commit hooks

Установка

npm i -D stylelint stylelint-config-standard
# Для SCSS:
npm i -D stylelint-config-standard-scss

.stylelintrc.json():

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "color-hex-length": "short",
    "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$",
    "no-duplicate-selectors": true
  }
}

Команды

npx stylelint "src/**/*.css"          # проверить
npx stylelint "src/**/*.css" --fix    # автофикс
npx stylelint "src/**/*.scss"         # SCSS

Порядок свойств

npm i -D stylelint-order

{
  "plugins": ["stylelint-order"],
  "rules": {
    "order/properties-alphabetical-order": true
  }
}

VS Code интеграция

Установи расширение stylelint.vscode-stylelint и добавь в settings:

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

Связанные темы

Ресурсы