答案：通过安装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 文件中的 标签，Prettier 能自动识别并格式化内部的 CSS。
启科网络PHP商城系统
下载
启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。
立即学习“前端免费学习笔记（深入）”；
- 确保 style 标签未被其他语法插件干扰。例如某些框架语法可能影响解析。
- Prettier 会自动缩进和排版 CSS 规则，如：
- 若未生效，检查文件语言模式是否为 HTML，可通过右下角状态栏确认。
补充建议与常见问题
- 如果使用 Vue 或 React 等框架，需确保 Prettier 支持对应语法（如安装 Vetur 或 ESLint 配合）。
- 避免多个格式化工具冲突，如 Beautify 与 Prettier 同时启用可能导致异常。
- 可创建 .prettierrc 文件自定义格式规则，例如设置缩进、引号等。
基本上就这些。正确配置 Prettier 后，无论是 style 标签还是内联样式，都能获得一致且整洁的代码风格。不复杂但容易忽略的是扩展启用和默认格式化程序的设置。
