vscode 默认不自动格式化 css，需手动配置格式化工具并指定默认程序，否则 shift+alt+f 无效；根本原因是缺少可用的 css 格式化提供者，须安装 pretterr、设置 defaultformatter 并确保语言模式为 css。
VSCode 默认不自动格式化 CSS，必须手动配置格式化工具并指定默认程序，否则 Shift+Alt+F 会失效或只做基础缩进，无法统一属性顺序、空格和换行风格。
为什么快捷键 Shift+Alt+F 按了没反应？
常见错误现象是按下后无任何变化，或仅调整了缩进但属性仍挤在一行、冒号前后空格不一致。根本原因是 VSCode 缺少可用的 CSS 格式化提供者。
- 内置的 CSS 格式化器（
vscode.css-language-features）默认未设为“默认格式化程序”，需手动指定 - 未安装 Prettier 或 Stylelint 等扩展，导致没有可调用的格式化逻辑
- 文件语言模式被误设为
Plain Text或HTML，而非CSS（右下角状态栏检查，点击可切换）
如何让每个 CSS 属性独占一行且缩进统一？
Prettier 是最直接的选择，它默认启用 singleAttributePerLine 行为（对 CSS），但需确认配置未被覆盖。关键不是“开启某开关”，而是确保格式化链路完整。
- 安装
Prettier - Code formatter插件 - 在项目根目录添加
.prettierrc，至少包含：{ "tabWidth": 2, "printWidth": 80 } - 在
settings.json中显式设置："[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - 避免同时启用
css.format.enable（VSCode 内置格式化），否则可能冲突
想让 color:、margin: 这些冒号垂直对齐，能实现吗？
不能靠 Prettier 或 VSCode 内置功能实现——这是刻意设计的限制。Prettier 明确拒绝空格对齐，因为会导致 Git diff 失控（例如只改一个值，却因对齐触发整块重排）。
- 若真有视觉对齐需求，必须用插件辅助：安装
Align by Regex，选中规则块后执行命令，正则填:，对齐方式选Left - 该操作是手动、不可逆的，且保存时会被 Prettier 清除，所以仅限临时查看，不可纳入工作流
- 更可持续的做法是用
stylelint-config-rational-order配合 Stylelint 插件，按语义分组排序属性（如先display、再box、再typography），提升逻辑可读性
批量格式化整个项目里的 CSS 文件
VSCode 界面不支持“批量格式化多个文件”，必须借助命令行。编辑器内右键单文件格式化只是表象，底层依赖的是本地 CLI 工具。
- 全局安装：
npm install -g prettier - 项目内执行：
npx prettier --write "src/**/*.css"（注意引号防 shell 解析错误） - 加
--list-different可预览哪些文件会被修改，适合 CI 检查 - 若混用 SCSS/Less，需额外加
--parser=scss等参数，否则解析失败
真正容易被忽略的是：格式化行为由三处配置共同决定——全局 settings.json、工作区 .vscode/settings.json、项目级 .prettierrc。三者优先级递增，但若其中任一环节缺失（比如忘了在 [css] 下指定 defaultFormatter），整个链路就断了。别只盯着插件装没装，要逐层验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
