本文详解如何使用命令行工具 tidy 精确控制 HTML 缩进格式，重点解决 <link>/<script> 等标签的多属性垂直对齐问题，通过 --indent-attributes yes 等关键参数实现专业级代码可读性。
本文详解如何使用命令行工具 `tidy` 精确控制 html 缩进格式，重点解决 ``/`<script>` 等标签的多属性垂直对齐问题，通过 `--indent-attributes yes` 等关键参数实现专业级代码可读性。</script>
HTML 代码的自动格式化不仅是美观需求，更是团队协作与长期维护的基础。尤其在现代前端开发中，大量使用 CDN 引入的 <link> 和 <script> 标签常携带 href、integrity、crossorigin、rel 等多个长属性，若仅靠基础缩进（如 -i），属性会挤在同一行或错位换行，严重损害可读性与 diff 可追踪性。
HTML Tidy 是 Linux/macOS 下成熟可靠的命令行 HTML 整理工具，但其默认行为（如 tidy -qni）仅缩进元素层级，不处理属性对齐。要实现类似目标效果中 <link> 属性垂直对齐（每属性独占一行、左对齐缩进），必须启用 --indent-attributes yes 这一关键选项：
tidy -qni -ashtml --indent-attributes yes --wrap 140 index.html -o out.html
✅ 关键参数说明：
- -q：静默模式，屏蔽冗余提示；
- -n：输出数字字符实体（如 " → "），避免编码歧义；
- -i：启用元素内容缩进；
- -ashtml：强制以 HTML5 模式解析并输出；
- --indent-attributes yes：核心！ 使每个属性独立成行，并按父元素缩进基准对齐；
- --wrap 140：设置行宽为 140 字符（避免过长 URL 被截断或破坏对齐），建议 ≥120；
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- --indent-attributes 在 Tidy 5.6.0+ 中稳定支持，旧版本需升级；
- 不要混用 -xml 或 -asxhtml，否则可能触发 XHTML 规则导致意外闭合；
- 若需保留原始 <script type="module"> 内联 JS 的缩进逻辑（如示例中 Vue setup 代码），Tidy 默认不会重排 <script> 内容——这正是优势：它只格式化 HTML 结构，不触碰内联脚本/样式块，确保逻辑安全；
- 邮箱混淆类 <a class="__cf_email__" ...> 标签会被原样保留，因 Tidy 将其视为合法自定义属性，无需额外配置。
? 进阶技巧：
将常用命令封装为 shell 别名，提升效率：
alias htmlfmt='tidy -qni -ashtml --indent-attributes yes --wrap 140' # 使用：htmlfmt index.html -o formatted.html
总结：精准控制 HTML 缩进 ≠ 单纯增加缩进层级，而在于结构化地分离关注点——元素嵌套由 -i 控制，属性布局由 --indent-attributes yes 主导，内容宽度由 --wrap 约束。三者协同，即可在无 GUI 工具、无网络依赖的纯终端环境中，生成符合工程规范、便于 Code Review 与 Git Diff 的高质量 HTML 代码。
