问题现象与复现
现象描述
在 VS Code 中，Prettier 无法格式化 HTML，保存后依然保持原样，或快捷键触发后没有产生预期的缩进和换行变化。这种现象直接影响开发效率，特别是在处理大量 HTML 结构时。
另外一种常见表现是开发者看到格式化输出仅对部分标签生效，其他区域仍然混乱，导致可读性下降。
快速复现条件
打开任意一个 HTML 文件，执行格式化命令或保存触发格式化，若结果与预期不符，则进入更深入的排查过程。
在 VS Code 的“输出”面板中选择 Prettier 相关日志，可以看到可能的报错信息或被覆盖的格式化流程。
常见原因分析
插件与内部实现冲突
VS Code 可能同时启用多种 HTML 格式化工具，如内置格式化、Prettier、Beautify 等，它们之间会争夺“默认格式化程序”的角色，导致 Prettier 未被正确调用。
为避免冲突，需要明确将 Prettier 设为默认格式化程序，并禁用其他会覆盖格式化的扩展。
配置错配与覆盖
工作区（.vscode/settings.json）和全局设置之间的 Prettier 配置冲突，会导致某些规则不生效，表现为 HTML 的格式化不一致。
此外，.prettierrc、prettier.config.js 等配置文件若存在语法错误，也会导致 Prettier 在格式化时报错或停止工作。
环境与版本校验
版本与兼容性检查
确保 VS Code、Prettier 插件和 Node.js 的版本彼此兼容，避免已知的兼容性问题影响格式化流程。
较新的 HTML 特性或模板语法可能需要更新的 Prettier 版本才能正确解析，版本滞后也可能导致格式化失败。
本地与全局安装对比
如果工作区中安装了本地 Prettier，而全局未安装，或两者版本差异较大，HTML 的格式化行为可能不一致。
通过命令行确认 Prettier 的来源与版本有助于定位问题。
配置与扩展冲突排查
工作区与全局设置对比
检查 settings.json 中的编辑器默认格式化程序设置是否指向 esbenp.prettier-vscode，并确保 editor.formatOnSave 已开启。
{"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true
}若出现冲突，尝试将本地工作区的设置与全局设置统一，避免覆盖导致的格式化异常。
配置文件的正确性与优先级
.prettierrc、prettier.config.js 的配置应当是有效的 JSON 或 JS 对象，若存在语法错误可能直接阻塞格式化流程。
{"htmlWhitespaceSensitivity": "ignore","printWidth": 120,"tabWidth": 2,"useTabs": false
}如果在项目中使用了自定义 HTML 规则，请确保 Prettier 的 HTML 插件能正确解析相关语法。
扩展冲突排除
禁用非必要的 HTML/格式化相关扩展，如 Beautify、其他语言工具插件，以排除彼此之间的干扰。
// 仅示例，实际禁用方式请在 VS Code 扩展视图中进行设置
// 不需要代码块也可在扩展界面执行禁用
快速修复步骤与验证
步骤化排查清单
步骤1：确认 Prettier 是默认格式化程序，且启用了 editor.formatOnSave。
步骤2：在一个简单的 HTML 文件中测试格式化，排除模板或混合语言影响。
命令行快速验证
使用 Prettier 的命令行对特定 HTML 文件进行格式化检查，确认是否由 Prettier 本身引发的问题或是 VS Code 设置问题。
npx prettier --write "src/**/*.html" --loglevel silent
npx prettier --check "src/**/*.html"若命令行能正常格式化但 VS Code 不能，说明是 VS Code 设定或扩展冲突导致的问题。
缓存与重载处理
重载 VS Code 或清理工作区缓存，通常能解决偶发的格式化状态不同步问题。
// 通过命令面板执行
// 1) Reload Window
// 2) 关闭后重新打开 VS Code
代码配置示例与最佳实践
示例 1：.prettierrc.json
通过明确的配置信息来稳定 HTML 的格式化输出，尤其是 HTML 的空白敏感度和换行策略。
{"htmlWhitespaceSensitivity": "ignore","printWidth": 120,"tabWidth": 2,"useTabs": false
}要点：设定合理的换行宽度与空格敏感度，避免 HTML 结构因为格式化而产生不必要的换行或缩进变化。
示例 2：VS Code 设置
在 settings.json 中统一配置，确保 Prettier 作为唯一的格式化实现。
{"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true,"prettier.requireConfig": true
}要点：开启 requireConfig 可确保只有存在 Prettier 配置文件时才应用格式化，减少无配置时的格式化差异。
示例 3：工作流与脚本整合
在构建或提交阶段加入格式化检查，确保团队对 HTML 的格式化规则一致。
# 在 CI 或本地钩子中执行
npx prettier --check "src/**/*.html"
要点：通过持续集成或本地钩子强制执行统一的格式化标准，降低个人环境差异带来的问题。
与 HTML 相关的特殊情景处理
包含模板语法时的格式化
在包含模板语法（如 EJS、Handlebars、Vue 模板内的 HTML）时，部分 HTML 结构可能被 Prettier 误处理，导致格式化失败。
解决办法：将模板片段单独处理，或在需要时临时禁用 Prettier 的 HTML 部分格式化，确保其他区域仍然保持格式化。
内联样式与脚本的处理
HTML 中包含 内联样式、内联脚本 时，可能出现格式化规则覆盖问题，导致样式或脚本区域混乱。
可以考虑让 Prettier 仅处理 HTML 结构，保留内联内容的原样输出，或将内联内容提取到外部文件再由 Prettier 格式化。
