Как настроить сортировку CSS и SCSS в Prettier

1. Установите форматтер

Выполните команду в каталоге проекта. Если Prettier уже установлен, сохраните совместимую с проектом версию. Примеры ниже проверены с Prettier 3.9.6 и плагином 0.2.2.

npm install --save-dev prettier prettier-grundy-scss-order

2. Подключите плагин

Создайте .prettierrc.json в корне проекта или добавьте эти параметры в существующую конфигурацию Prettier. Используйте один файл конфигурации. Явный порядок групп помещает обычные свойства в группу decl, где они сортируются по алфавиту, и показывает порядок конструкций SCSS.

{
  "plugins": [
    "prettier-grundy-scss-order"
  ],
  "grundyScssSorterGroupsOrder": [
    "@use",
    "@extend",
    "--variable",
    "$variable",
    "@if",
    "decl",
    "@include",
    "@mixin",
    "rule"
  ]
}

3. Начните с одного файла

Сохраните исходный пример ниже в styles/card.scss. Один файл проще проверить по diff. Первая команда записывает отформатированный результат, вторая проверяет его без изменений. Для CSS укажите путь к файлу с расширением .css и сохраните --parser scss: плагин выполняет сортировку через парсер SCSS.

npx prettier styles/card.scss --parser scss --write
npx prettier styles/card.scss --parser scss --check

4. Сравните результат

Форматтер переставляет display, gap и padding по алфавиту. Селектор и значения в этом примере остаются прежними. Для форматирования файла .scss компиляция Sass не требуется.

До: styles/card.scss

.card {
  color: #222;
  padding: 16px;
  display: grid;
  gap: 12px;
}

После форматирования

.card {
  color: #222;
  display: grid;
  gap: 12px;
  padding: 16px;
}

5. Проверьте страницу перед массовым запуском

Перестановка объявлений может повлиять на каскад: внимательно проверяйте сокращенные и отдельные свойства, повторяющиеся объявления и подключения SCSS-миксинов. Например, margin и margin-top могут переопределять друг друга в зависимости от порядка. Просмотрите diff, запустите сборку стилей и сравните затронутые страницы, прежде чем форматировать весь проект.

npx prettier "src/**/*.{css,scss}" --parser scss --check

Если сортировка не работает

Проверьте, что запускается локальный Prettier проекта, в plugins указано имя пакета, а файл не исключен через .prettierignore. Если команда работает, а редактор — нет, проверьте выбранный в редакторе форматтер и конфигурацию. Если CLI сообщает о недопустимом значении grundyScssSorterGroupsOrder, оставьте явный массив порядка групп из примера.