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

Question

背景：

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

问题：

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

.some-class { background: #f00; }

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

.some-class {
    background: #f00;
}

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

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

谢谢

更新：

设置不能被"prettier.requireConfig": true覆盖。 Prettier - VSCode 的代码格式化程序扩展没有从 VSCode 设置编辑样式表 linting 的选项。

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

Prettier默认使用标准 stylelint 配置进行样式表 linting 和格式化。

在下面发布解决方案。

Answer 1

解决方案：

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

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 规则，请在此处查看完整的规则列表。

我花了一些时间来了解如何配置这些选项，如果你是从 stylelint 开始的，我强烈建议你先阅读它的指南。

Answer 2

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

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

参考：

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

Answer 3

这是我找到的最好的解决方案之一。 它拥有您无需担心格式化代码的所有内容。