如何在 VSCode 中使用 Prettier 编辑 CSS/SCSS/LESS 的自动格式设置规则？

Question

背景：

我正在使用 VSCode 的 Prettier - Code formatter 扩展来在保存时自动格式化我的代码。

问题：

我习惯于在我的 sass 文件中编写单行块（其中只有一个属性），即

.some-class { background: #f00; }

问题是Prettier 扩展将其格式化为多行，即

.some-class {
    background: #f00;
}

似乎更漂亮地为 css/scss 文件使用 stylelint，我发现这些设置可以通过在设置中启用来覆盖：

"prettier.requireConfig": true 并使用 .prettierrc.js 文件，但无法关闭单行块的 linting。如果这里有人对此有任何修复，将不胜感激。

谢谢

更新：

设置不能被"prettier.requireConfig": true 覆盖。 VSCode 的 Prettier - Code formatter 扩展没有从 VSCode 设置编辑样式表 linting 的选项。

但是，有一个选项可以启用 stylelint 集成，但这需要 stylelint 和 stylelint-prettier npm 模块。

Prettier 默认使用standard stylelint configuration 进行样式表检查和格式化。

在下面发布解决方案。

Answer 1

我不知道 vscode 有这个功能。一种简单的解决方案可能是指定prettier-ignore?

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

参考：

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

Answer 2

解决方案：

为了在 VSCode 中使用 Prettier - Code formatter 扩展名允许单行块，请执行以下步骤：

1. 通过在 VSCode 设置 (JSON) 中添加以下内容来启用 stylelint 集成："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 规则，请参阅entire list of rules here。

我花了一些时间来了解如何配置这些选项，如果你刚开始使用 stylelint，我强烈推荐你 read its guidelines first。