如何在VSCode与Prettier中保留CSS/SCSS多选择器的单行格式？

全局配置方案（推荐） #

通过调整Prettier针对CSS/SCSS的换行宽度阈值，阻止单行选择器被强制拆分为多行。在VSCode的settings.json中补充以下配置：

"editor.formatOnSave": true,
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.cssPrintWidth": 1000
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.cssPrintWidth": 1000
}

配置说明 #

• prettier.cssPrintWidth是Prettier专为CSS/SCSS文件设置的换行宽度阈值，设置足够大的数值（如1000）后，团队常用的单行选择器总长度不会超过阈值，Prettier就会保留原有单行格式。
• 该配置仅作用于CSS/SCSS文件，不会影响HTML、JavaScript等其他语言的格式化规则。

局部忽略方案（针对个别代码块） #

如果仅需保留特定选择器块的格式，可在代码块上方添加// prettier-ignore注释，让Prettier跳过对该块的格式化：

// prettier-ignore
.dropdown-item:active, .nav-item a.nav-link, h1, h2, h3, h4, h5, .pagination a {
  text-decoration: none;
}

适用场景 #

适合临时保留特定代码格式的情况，无需修改全局配置，但需逐个添加注释，维护成本较高。

内容的提问来源于stack exchange，提问作者echayotte