如何配置VS Code格式化器实现CSS、SCSS代码的大括号单独换行

VS Code 内置的CSS/SCSS格式化能力不支持自定义大括号换行位置，需借助第三方格式化扩展实现，以下是两种常用可行方案：

方案一：使用 Prettier 扩展（推荐，适配全前端语言格式化） #

• 第一步：在VS Code扩展商店搜索并安装 Prettier - Code formatter
• 第二步：打开VS Code配置文件settings.json（按下Ctrl+Shift+P/Command+Shift+P，输入「打开设置(JSON)」即可进入），添加以下配置：

// 给CSS、SCSS指定Prettier为默认格式化工具
"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 配置大括号单独占一行
"prettier.braceStyle": "allman"

• 若需要项目级生效，可在项目根目录新建.prettierrc文件，添加以下内容即可，项目级配置会优先于全局设置：

{
  "braceStyle": "allman"
}

方案二：使用 Beautify 扩展 #

• 第一步：在VS Code扩展商店搜索并安装 JS-CSS-HTML Formatter
• 第二步：在settings.json中添加以下配置：

// 给CSS、SCSS指定Beautify为默认格式化工具
"[css]": {
  "editor.defaultFormatter": "HookyQR.beautify"
},
"[scss]": {
  "editor.defaultFormatter": "HookyQR.beautify"
},
// 配置大括号单独占一行
"beautify.css": {
  "brace_style": "expand"
}

配置完成后，按下Shift+Alt+F（Windows）/Shift+Option+F（Mac）触发格式化即可得到你需要的代码样式。

内容的提问来源于stack exchange，提问作者Sujay U N