停止在CSS中为逗号分隔的选择器强制换行，并在换行处放置大括号

Question

我一辈子都找不到控制这些设置的地方。

• 用逗号分隔的多个选择器应该而不是转到新行
• 在新行中强制使用CSS的大括号

例如，我想打开这个：

html,
body,
.container {
height: 100%;
margin: 0;
}

进入：

html, body, .container
{
height: 100%;
margin: 0;
}

Answer 1

1. 您需要在VS代码上安装一个格式化程序扩展(推荐使用：Prettier(
2. 您的项目中需要stylelint和stylelint更漂亮npm模块。(作为开发依赖项(
3. 在更漂亮的配置中启用stylelint自动格式化："prettier.stylelintIntegration": true
4. 添加一个.stylelintrc.json文件来配置您的stylelint规则

添加这3条规则似乎可以满足您的愿望，但我强烈建议您探索170多条可用于格式化CSS的规则，以找到最佳设置。

{
"plugins": ["stylelint-prettier"],
"rules": {
"selector-list-comma-newline-after": "never-multi-line",
"selector-list-comma-newline-before": "never-multi-line",
"block-closing-brace-newline-before": "always"
}
}

Answer 2

自v1.66起，vscode中内置了一个css格式化程序。因此，使用这些设置：

Editor: Default Formatter设置为CSS Language Features(新的内置css格式化程序(

并启用：

CSS > Format: Enable启用/禁用默认css格式化程序

和禁用：

CSS > Format: Newline Between Selectors(默认为已启用(。

然后，我相信这个设置的目的是覆盖任何其他扩展的css格式化程序，这些格式化程序可能会试图在选择器之间添加换行符，并且上面的首选代码版本不会更改。

Answer 3

我找到了一个更好的解决方案。

我猜你在用"；JS-CSS-HTML格式化程序"；。

如果是这种情况，按F1并键入"；格式化器"；，并选择"；格式化程序配置"；。

然后将以下值更改为false，如图所示：

"selector_separator_newline": false