Как отредактировать правила автоформатирования для CSS / SCSS / LESS, используя Prettier в VSCode?

Question

Фон:

Я использую Prettier - Расширение форматирования кода расширение для VSCode для автоматического форматирования моего кода при сохранении.

Проблема:

Я привык писать однострочные блоки в моих файлах sass (где есть только одно свойство), например:

.some-class { background: #f00; }

Проблема в расширении Prettier форматирует его в несколько строк, например,

.some-class {
    background: #f00;
}

Кажется, красивее использовать stylelint для файлов css / scss, и я обнаружил, что эти настройки можно перезаписать, включив это в настройках:

"prettier.requireConfig": true и с использованием файла .prettierrc.js , но не удалось отключить подкладку для однострочных блоков.Буду признателен, если у кого-нибудь есть какие-либо исправления для этого.

Спасибо

Обновление:

Настройки не могут быть перезаписаны "prettier.requireConfig": true.Расширение Prettier - Форматировщик кода для VSCode не имеет возможности редактировать таблицы стилей, накладываемые из настроек VSCode.

Однако есть возможность включить интеграцию stylelint но для этого требуются модули stylelint и stylelint-prettier npm .

Prettier по умолчанию использует стандартную конфигурацию stylelint для стилирования и форматирования таблицы стилей.

Разместил решение ниже.

Answer 1

Решение:

Чтобы разрешить однострочные блоки в VSCode с использованием Prettier - расширение форматирования кода , выполните следующие действия:

1. ВключитьИнтеграция stylelint, добавив это в VSCode Settings (JSON): "prettier.stylelintIntegration": true
2. Установить stylelint и stylelint-prettier npm модулей в каталоге вашего проекта.npm install stylelint, stylelint-prettier --save-dev
3. Добавьте файл .stylelintrc.json в корень каталога вашего проекта со следующим кодом:

    {
        "plugins": ["stylelint-prettier"],
        "rules": {
            "block-closing-brace-newline-after": "always-multi-line",
            "block-closing-brace-empty-line-before": "never",
            "block-closing-brace-space-before": "always",
            "block-opening-brace-space-after": "always",
            "block-opening-brace-space-before": "always",
            "block-closing-brace-newline-before": "always-multi-line",
            "block-opening-brace-newline-after": "always-multi-line",
            "indentation": 4
        }
    }

Вы можете добавить /настроить больше правил stylelint, см. полный список правил здесь .

Мне потребовалось некоторое время, чтобы понять, как настроить эти параметры. Если вы начинаете с stylelint, я настоятельно рекомендую вам сначала прочитать его рекомендации .

Answer 2

Здесь - одно из лучших решений, которые я нашел.В нем есть все, что вам нужно, чтобы не беспокоиться о форматировании кода.

Answer 3

Я не знал, что vscode имеет эту функцию.Одно простое решение, вероятно, указав prettier-ignore?

/* prettier-ignore */
.some-class { background: #f00; }

Ссылка:

• https://prettier.io/docs/en/ignore.html#css