关于Visual Studio代码：如何使用VSCode中的Prettier编辑CSS / SCSS / LESS的自动格式设置规则？

How to Edit Auto-Formatting Rules for CSS/SCSS/LESS using Prettier in VSCode?

背景：

我使用的是Prettier-VSCode的代码格式化扩展程序，可以在保存时自动格式化我的代码。

问题：

我习惯在我的sass文件(只有一个属性)中编写单行块，即

.some-class { background: #f00; }

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

1
2
3

.some-class {
background: #f00;
}

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

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

谢谢

更新：

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

但是，有一个选项可以启用stylelint集成，但这需要stylelint和stylelint更漂亮的npm模块。

默认情况下，漂亮的样式将标准stylelint配置用于样式表的样式和格式设置。

在下面发布解决方案。

解：

为了允许使用Prettier-代码格式化程序扩展名的VSCode中的单行块，请执行以下步骤：

通过在VSCode设置(JSON)中添加以下代码来启用stylelint集成："prettier.stylelintIntegration": true

在项目目录中安装stylelint和stylelint-prettier npm模块。 npm install stylelint, stylelint-prettier --save-dev

使用以下代码在项目目录的根目录中添加.stylelintrc.json文件：

1
2
3
4
5
6
7
8
9
10
11
12
13

{
"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开始，我强烈建议您先阅读其指南。