Плагин Prettier не сортирует CSS: как найти причину

1. CSS форматируется, но свойства остаются на месте

В плагине 0.2.2 сортировка подключена к парсеру SCSS. Для файла .css Prettier по умолчанию выбирает парсер CSS: обычное форматирование работает, а сортировка — нет. В проверенном примере padding, display, color сохранили порядок с парсером CSS и стали color, display, padding с SCSS. Сохраните расширение .css и явно выберите парсер.

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

2. SCSS тоже не сортируется

Установка пакета не подключает его в конфигурации. Без plugins Prettier форматирует пример, но оставляет порядок свойств прежним. Добавьте пакет в массив plugins той конфигурации, которую использует файл. Сначала найдите эту конфигурацию и убедитесь, что оба пакета установлены в проекте. Запускайте команды из каталога проекта; если пакетов нет, установите их перед использованием npx.

npx prettier --find-config-path styles/card.scss
npm ls prettier prettier-grundy-scss-order

3. Запустите явную проверку подключения

Когда оба пакета установлены, эта команда явно подключает плагин и использует .prettierrc.json из руководства по установке. Сначала создайте эту конфигурацию с явным порядком групп. Проверьте ее на небольшом примере, затем перенесите параметры в конфигурацию проекта по руководству по установке. Если здесь сортировка работает, а в обычной команде — нет, сравните конфигурацию, парсер и рабочий каталог.

npx prettier styles/card.scss --config .prettierrc.json --parser scss --plugin prettier-grundy-scss-order --write

4. Файл исключен из форматирования

Команда file-info показывает, считает ли Prettier файл исключенным. В воспроизведенном случае запись styles/card.scss в .prettierignore дала ignored: true, а --write оставил содержимое без изменений. Найдите подходящее правило исключения и меняйте его, только если файл нужно форматировать. Сгенерированные файлы часто исключены намеренно. Успешный --check сам по себе не доказывает обработку исключенного файла.

npx prettier --file-info styles/card.scss
npx prettier styles/card.scss --parser scss --check

5. Ошибка Invalid grundyScssSorterGroups value

Вложенный объект вызывает ошибку о том, что ожидалась строка. Строка с некорректным JSON вызывает ошибку при разборе JSON. В .prettierrc.json передавайте определения групп как JSON-строку с экранированными внутренними кавычками, как в примере. Поставьте typography перед decl, чтобы пользовательская группа получила приоритет перед общей группой свойств.

{
  "plugins": [
    "prettier-grundy-scss-order"
  ],
  "grundyScssSorterGroups": "{\"typography\":{\"type\":\"decl\",\"startsWith\":\"font\",\"order\":\"alphabetical\"}}",
  "grundyScssSorterGroupsOrder": [
    "@use",
    "@extend",
    "--variable",
    "$variable",
    "@if",
    "typography",
    "decl",
    "@include",
    "@mixin",
    "rule"
  ]
}

6. В CLI работает, в редакторе — нет

Используйте рабочий запуск CLI как образец. Проверьте выбранный в редакторе форматтер, использование локального Prettier проекта и загруженную конфигурацию. Эти проверки зависят от редактора и не являются еще одной воспроизведенной ошибкой плагина. Для файлов .css задайте явное переопределение парсера на SCSS, если нужна сортировка этого плагина. После исправления просмотрите diff и страницу: успешное форматирование не гарантирует сохранение каскада при перестановке объявлений.