vs code中按shift+alt+f可一键格式化html，依赖prettier或内置格式化器，自动重排层级、补换行、拆解嵌套；需注意语言模式、配置项及pre/textarea等特殊标签保护。
直接用编辑器快捷键格式化，比手动调缩进快十倍，且能自动修复错位闭合和嵌套断裂。
VS Code 里按 Shift+Alt+F 就能一键对齐
这是最常用、最稳的路径，前提是已安装 Prettier 或启用内置 HTML 格式化器。它不只是加空格，还会重排标签层级、补全缺失的换行、把挤在一行的 <div>
<p><span> 拆成树状结构。</span></p>
<ul>
<li>如果按了没反应，检查是否禁用了“Format on Save”，或当前文件类型没识别为 <code>html（右下角看语言模式）
Prettier 默认强制空格，混用会导致格式化后缩进跳变.prettierrc，注意 "htmlWhitespaceSensitivity": "css" 这类配置会影响换行逻辑，别盲目复制网上配置在线工具救急时别忽略 <pre class="brush:php;toolbar:false;"></pre> 和 <textarea></textarea> 的破坏风险
像 beautifier.io 或 freeformatter.com 确实粘贴即用，但它们会把 <pre class="brush:php;toolbar:false;"></pre> 里的原始缩进、<textarea></textarea> 中的换行符一并“格式化”掉——结果是代码块塌成一行，用户输入内容错乱。
- 处理含
<pre class="brush:php;toolbar:false;"></pre>的页面前，先手动用注释包住：<!-- prettier-ignore-start -->...<!-- prettier-ignore-end --> - 在线工具设置里关掉 “Wrap attributes” 或 “Wrap text in tags”，避免把长文本硬折行
- 格式化完务必肉眼扫一遍
<script></script>和<style></style>块，有些工具会错误地给 JS 语句加缩进
Dreamweaver / Notepad++ 用户要先确认 Tidy 插件是否真在运行
Dreamweaver 的 Commands → Apply Source Formatting 和 Notepad++ 的 Tidy2.dll 都依赖底层 HTML Tidy 库，但默认配置常把警告当提示——比如 <img> 缺 alt 属性，它不会报错，只会静默跳过格式化。
- Dreamweaver 需在
Edit → Preferences → Code Format中勾选 “Clean up HTML on save” 才真正触发修复逻辑 - Notepad++ 安装
Tidy2.dll后，必须重启，并在Plugins → Tidy2 → Tidy Current Document手动点一次，不能只靠右键菜单 - 两者对自定义元素（如
<my-component></my-component>）支持极弱，格式化后可能把合法标签当非法标签删掉
格式化不是万能胶——它理得清缩进，但修不了语义错误。比如把 <div class="header"> 当成 <code><header></header> 用，格式再整齐，结构依然混乱。真正省时间的，是让格式化成为保存动作的一部分，而不是等代码堆成山才想起来整理。
