答案：通过安装Prettier扩展并设置为默认格式化工具，启用保存时自动格式化，可有效美化html中style标签和内联css；需配置htmlWhitespaceSensitivity并避免多工具冲突。
vscode 中格式化内联 CSS 和 style 标签内容，主要依赖于代码格式化工具和正确的配置。默认情况下，VSCode 对 HTML 文件中的内联样式或 style 标签支持有限，但通过合适的扩展和设置可以实现自动美化。
启用并配置 Prettier 格式化工具
Prettier 是目前最常用的代码格式化工具，支持 HTML、CSS、javaScript 等多种语言，能有效处理内联样式和 style 标签内容。
- 安装 Prettier 扩展：在 VSCode 扩展市场搜索 “Prettier – Code formatter” 并安装。
- 设置为默认格式化工具：打开设置（Ctrl + ,），搜索 “default Formatter”，选择 esbenp.prettier-vscode。
- 确保启用了保存时自动格式化：在设置中开启 Format On Save，也可右键编辑器选择“格式化文档”。
格式化内联 style 属性
HTML 元素的内联 style 属性通常写成一行，如：style=”color: red; margin: 10px;”。Prettier 默认不会将其拆分，但可通过配置改善可读性。
- Prettier 不会自动换行内联 style 内容，建议手动保持简洁，或改用外部样式表。
- 若希望更清晰，可在 .prettierrc 配置文件中调整 htmlWhitespaceSensitivity，设为 css 可更好处理标签间距。
格式化 style 标签内的 CSS 代码
对于 HTML 文件中的 <style> 标签，Prettier 能自动识别并格式化内部的 CSS。
立即学习“前端免费学习笔记（深入）”；
- 确保 style 标签未被其他语法插件干扰。例如某些框架语法可能影响解析。
- Prettier 会自动缩进和排版 CSS 规则，如：
<style> .box { color: blue; margin: 20px; } </style> - 若未生效，检查文件语言模式是否为 HTML，可通过右下角状态栏确认。
补充建议与常见问题
- 如果使用 vue 或 react 等框架，需确保 Prettier 支持对应语法（如安装 Vetur 或 ESLint 配合）。
- 避免多个格式化工具冲突，如 Beautify 与 Prettier 同时启用可能导致异常。
- 可创建 .prettierrc 文件自定义格式规则，例如设置缩进、引号等。
基本上就这些。正确配置 Prettier 后，无论是 style 标签还是内联样式，都能获得一致且整洁的代码风格。不复杂但容易忽略的是扩展启用和默认格式化程序的设置。