答案：确保VSCode正确识别SCSS文件并配置Prettier格式化工具。1. 将语言模式设为SCSS；2. 安装Prettier扩展并设为默认格式化工具；3. 可选创建.prettierrc配置文件；4. 启用保存时自动格式化；5. 避免多个格式化插件冲突，推荐仅使用Prettier处理SCSS。
VSCode 默认的格式化工具（如内置的 CSS 格式化器或 Prettier）对嵌套的 CSS 语法（例如 SCSS 或 Sass 嵌套规则）支持良好，但需要正确配置语言模式和扩展插件。如果你发现嵌套的 CSS 代码没有被正确格式化，可能是文件类型识别错误或缺少合适的格式化工具。
确保使用正确的语言模式
VSCode 需要识别你的文件是 SCSS 而不是普通的 CSS，才能正确处理嵌套结构：
- 打开你的样式文件
- 点击右下角的语言模式（通常显示为“CSS”）
- 选择“Configure Language Mode”
- 切换为 SCSS (Sass)
这样 VSCode 才会应用适用于嵌套语法的格式化规则。
安装并配置 Prettier 提升格式化效果
Prettier 是目前最流行的代码格式化工具，支持 SCSS 嵌套语法：
立即学习“前端免费学习笔记（深入）”；
- 在扩展商店搜索并安装 Prettier - Code formatter
- 安装完成后，在设置中将 Prettier 设为默认格式化工具
- 右键编辑器 → “Format Document With” → 选择 Prettier
你还可以创建 .prettierrc 配置文件来自定义格式化行为：
{
"semi": true,
"trailingComma": "es5",
"tabWidth": 2,
"printWidth": 80,
"bracketSpacing": true,
"arrowParens": "avoid",
"endOfLine": "auto"
}
启用保存时自动格式化
提升开发效率的小技巧：保存文件时自动格式化嵌套 CSS：
- 打开 VSCode 设置（Ctrl + ,）
- 搜索 format on save
- 勾选 “Editor: Format On Save”
这样每次保存 SCSS 文件时，嵌套的选择器和样式都会自动对齐缩进。
检查是否有冲突的格式化工具
有时多个格式化插件（如 Beautify 和 Prettier）会产生冲突：
- 建议只保留 Prettier 作为主要格式化工具
- 可通过设置排除特定语言的默认格式化器
- 确保 SCSS 文件的格式化器明确指定为 Prettier
基本上就这些。只要文件被识别为 SCSS，并搭配 Prettier 正确配置，VSCode 就能很好地格式化嵌套的 CSS 选择器与样式，保持代码整洁易读。
