• @relotus/stylelint-config
  • Описание
  • Подключение в проект
  • Пример использования
  • Расширение
  • VSCode
  • WebStorm

@relotus/stylelint-config

Описание

@relotus/stylelint-config - npm-пакет с общим конфигом Stylelint для React проектов. У пакета в peerDependencies указаны точные версии пакетов stylelint, stylelint-config-css-modules, stylelint-config-recommended-scss, stylelint-z-index-value-constraint, поэтому нет необходимости добавлять их в devDependencies проекта

Подключение в проект

Установка:

npm install --save-dev @relotus/stylelint-config

В корне проекта создаём файл .stylelintrc.json:

{
  "extends": ["@relotus/stylelint-config"]
}

В package.json пишем команду для проверки стилей:

"lint:styles": "stylelint \"src/**/*.{css,scss}\""

Пример использования

npm run lint:styles

Расширение

При действительной необходимости (например, время до рефакторинга проекта) можно расширить правила (изменить, добавить свои):

{
  "extends": ["@relotus/stylelint-config"],
  "rules": {
    "max-nesting-depth": 2,
    "plugin/z-index-value-constraint": { "max": 100 }
  }
}

VSCode

Для автоматической правки стилей в VSCode устанавливаем плагин Stylelint: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint#editor.codeactionsonsave, далее в настройках пишем:

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

Исправление стилей согласно правилам будет происходить при каждом сохранении файла с одним из перечисленных расширений

WebStorm

Возможна автоматическая подсветка неправильного синтаксиса. В меню выбираем Preferences -> Languages&Frameworks -> Style sheets -> Stylelint. Плагин stylelint должен подтянуться автоматически. В секции Run for files пишем нужный паттерн. Выставляем чекбокс Enable.