@ssheverev/stylelint-config

Базовая конфигурация Stylelint с поддержкой SCSS и автоматической сортировкой свойств.

Установка

npm install --save-dev @ssheverev/stylelint-config stylelint@^16.0.0

Требования

• Node.js ^18.18.0 || ^20.9.0 || >=21.1.0
• Stylelint >= 16.0.0

Возможности

• Интеграция с Prettier
• Автоматическая сортировка свойств
• Проверка специфичности селекторов
• Соблюдение стандартных правил CSS
• Поддержка SCSS (требуется дополнительная настройка)

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

В вашем .stylelintrc.js:

/** @type {import('stylelint').Config} */
export default {
  extends: ['@ssheverev/stylelint-config'],
  ignoreFiles: ['dist/**/*', 'node_modules/**/*'],
};

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

1. Установите дополнительную зависимость:

npm install --save-dev postcss-scss

2. Обновите конфигурацию в .stylelintrc.js:

/** @type {import('stylelint').Config} */
export default {
  extends: ['@ssheverev/stylelint-config'],
  ignoreFiles: ['dist/**/*', 'node_modules/**/*'],
  overrides: [
    {
      files: ['**/*.scss'],
      customSyntax: 'postcss-scss'
    }
  ]
};

Включенные плагины

• stylelint-order - сортировка свойств
• stylelint-prettier - интеграция с Prettier

Правила сортировки

Свойства автоматически сортируются в следующем порядке:

1. Пользовательские свойства (custom-properties)
2. SCSS переменные (dollar-variables)
3. Директивы @extend
4. Директивы @include
5. Объявления свойств
6. Вложенные правила
7. Директивы @keyframes
8. Медиа-запросы

Скрипты для запуска

 scripts: {
   ...
   "stylelint": "stylelint \"src/**/*.{css,scss}\" --max-warnings 0",
   "stylelint:fix": "npm run stylelint -- --fix"
 }