Налаштування Stylelint для лінтингу CSS

Налаштування Stylelint для лінтингу CSS

Stylelint аналізує CSS, SCSS, Less, CSS-in-JS та виявляє реальні проблеми: неіснуючі властивості, неправильні одиниці виміру, дублікати селекторів, порушення порядку властивостей. На відміну від Prettier, який тільки форматує, Stylelint знаходить логічні помилки.

Встановлення

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

Для SCSS:

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

Для CSS Modules (запобігає неіснуючій композиції):

npm install --save-dev stylelint-config-css-modules

.stylelintrc.json

Базова конфігурація для CSS/SCSS проекту:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-standard-scss"
  ],
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "color-named": "never",
    "color-no-invalid-hex": true,
    "unit-no-unknown": true,
    "property-no-unknown": true,
    "declaration-block-no-duplicate-properties": true,
    "no-duplicate-selectors": true,
    "selector-class-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
    "order/properties-order": [
      "content",
      "position", "top", "right", "bottom", "left", "z-index",
      "display", "flex", "flex-direction", "flex-wrap", "align-items", "justify-content",
      "grid", "grid-template",
      "width", "min-width", "max-width",
      "height", "min-height", "max-height",
      "margin", "margin-top", "margin-right", "margin-bottom", "margin-left",
      "padding", "padding-top", "padding-right", "padding-bottom", "padding-left",
      "border", "border-radius",
      "background", "background-color",
      "color",
      "font", "font-size", "font-weight", "line-height",
      "transition", "animation",
      "cursor", "pointer-events", "opacity", "overflow", "visibility"
    ]
  }
}

Порядок властивостей — stylelint-order — спірна тема. Можна спростити до групування без суворого порядку в межах групи.

Для Tailwind CSS

При використанні директив Tailwind @apply, @tailwind викликають помилки за замовчуванням:

npm install --save-dev stylelint-config-tailwindcss

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-tailwindcss"
  ]
}

Або вручну:

{
  "rules": {
    "at-rule-no-unknown": [true, {
      "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen", "layer"]
    }]
  }
}

CSS-in-JS (styled-components, emotion)

npm install --save-dev @stylelint/postcss-css-in-js postcss-syntax

{
  "overrides": [
    {
      "files": ["**/*.{js,jsx,ts,tsx}"],
      "customSyntax": "@stylelint/postcss-css-in-js",
      "rules": {
        "color-named": "never",
        "property-no-unknown": true
      }
    }
  ]
}

scripts у package.json

{
  "scripts": {
    "lint:css": "stylelint \"src/**/*.{css,scss}\"",
    "lint:css:fix": "stylelint \"src/**/*.{css,scss}\" --fix"
  }
}

Ігнорування файлів

.stylelintignore:

node_modules/
dist/
build/
*.min.css
vendor/

Або через конфіг:

{
  "ignoreFiles": ["dist/**", "node_modules/**", "**/*.min.css"]
}

Інтеграція з VS Code

Розширення stylelint.vscode-stylelint. У .vscode/settings.json:

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

"css.validate": false вимикає вбудований лінтер CSS VS Code — інакше будуть дублікати помилок.

Часові рамки

Налаштування Stylelint для CSS/SCSS проекту: 1–2 години. Додавання впорядкування властивостей та налагодження правил для конкретного стайлгайду: ще 1–2 години.