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

Question

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

用逗号分隔的多个选择器应该不换行
在新行中强制 CSS 的花括号

比如我要转这个：

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

进入这个：

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

Answer 1

您需要在 VS Code 上安装格式化程序扩展（推荐：Prettier）
您的项目中需要 stylelint 和 stylelint-prettier npm 模块。（作为开发依赖项）
在你更漂亮的配置中启用 stylelint 自动格式化："prettier.stylelintIntegration": true
添加 .stylelintrc.json 文件来配置您的 stylelint 规则。

添加这 3 条规则似乎可以满足您的愿望，但我强烈建议您探索 more than 170 available rules 格式化 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

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

我猜你正在使用“JS-CSS-HTML格式化程序”。

如果是这样，请按 F1 并键入“格式化程序”，然后select“格式化程序配置”。

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

"selector_separator_newline": false

Answer 3

从 v1.66 开始，

css 格式化程序正在 built-in 到 vscode。因此，使用这些设置：

Editor: Default Formatter 设置为 CSS Language Features（新的 built-in css 格式化程序）

并启用：

CSS > Format: Enable enable/disable 默认 css 格式化程序

并禁用：

CSS > Format: Newline Between Selectors（默认启用）。

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

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

stop forcing newline for comma separated selectors in CSS and put curly brace on new line

css

vscode-settings