Question

背景：

我对VSCode使用了Prettier - Code formatter扩展名，以便在保存时自动格式化我的代码。

问题：

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

.some-class { background: #f00; }

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

.some-class {
    background: #f00;
}

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

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

谢谢

更新：

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

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

Prettier默认使用standard stylelint configuration进行样式表的样式和格式设置。

在下面发布了解决方案。

Answer 1

解决方案：

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

通过在VSCode设置（JSON）中添加以下代码来启用stylelint集成："prettier.stylelintIntegration": true
安装 stylelint 和 stylelint-prettier npm模块。 npm install stylelint, stylelint-prettier --save-dev
使用以下代码在项目目录的根目录中添加一个 .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。

Answer 2

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

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

参考：

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

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

背景：

问题：

更新：

2 个答案:

解决方案：