Cheerio 是 Node.js 环境下最可控、可复用的批量 HTML 格式化方案，解析准确、自动修复语法问题且不破坏 script/style 内容，需设 xmlMode: false 并慎用于含服务端模板的文件。

用 Cheerio 脚本批量处理 HTML 文件

Node.js 环境下最可控、可复用的批量格式化方式，适合工程化场景。它不依赖浏览器，解析准确，能自动修复引号缺失、标签大小写、自闭合斜杠等问题，且不会破坏 <script></script> 或 <style></style> 内容。

• 确保项目已初始化：npm init -y && npm install cheerio
• 创建 format-html.js，核心逻辑为：const $ = cheerio.load(fs.readFileSync(file, 'utf8'), { xmlMode: false }); const html = $.root().html();
• 注意：xmlMode: false 是关键——设为 true 会强制 XHTML 解析，导致 <div> 被转成 <code><div></div> 这类错误
• 对含服务端模板语法（如 ）的文件慎用，Cheerio 会尝试解析它们并可能报错或丢内容

Prettier 命令行批量格式化 HTML

适合已有 Prettier 配置的团队项目，但必须满足硬性前提，否则命令静默失败或输出不变。

• 文件必须以 .html 或 .htm 结尾，且开头含 <!DOCTYPE html> ——片段代码（如只有一段 <div><p>xxx</p></div>）会被跳过
• 命令中必须显式指定 parser：prettier --parser html --write "src/**/*.html"
• 若 HTML 中混有 Vue/JSX 模板或长内联 JS，需额外加 --html-whitespace-sensitivity ignore，否则缩进会错乱
• VS Code 中右键“Format Document With”选 Prettier，而非默认 HTML 格式器，后者完全无视 .prettierrc

用 DOMParser + 递归实现轻量级自定义格式化

浏览器环境或简单 Node.js 脚本中想完全掌控缩进逻辑时可用，比正则安全，比 Cheerio 更轻，但需手动处理边界情况。


HTML汇报生成器
🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。
下载
• 必须用 'text/html' 作为 MIME 类型调用 DOMParser，传 'application/xml' 或空字符串会导致自定义标签被删、属性丢失
• 只处理 document.body 内容，避免 中的 <meta> 或 <link> 被意外重排
• <pre>、<script>、<style> 的 innerHTML 必须原样返回，不能递归缩进，否则 JS 代码换行即报错
• 块级元素（div、p、section）子节点前加缩进；内联元素（span、a）连写不换行，否则插入空白会破坏布局

在线工具和编辑器插件的适用边界

快捷但不可控，仅适合单次、非敏感、小体积 HTML 的快速整理。

立即学习“前端免费学习笔记（深入）”；

• 在线工具（如 htmlformatter.com）无法处理本地路径引用、相对 URL 重写，且上传代码存在隐私风险
• Notepad++ 的 HTMLTidy 插件依赖系统编码，若文件是 GBK 但编辑器设为 UTF-8，格式化后中文会变乱码
• PyCharm / WebStorm 内置 HTML 格式化器不支持 tabWidth 或引号类型配置，改了设置也无效，本质是语法树渲染而非真实格式化
• VS Code 启用 “Format on Save” 后，务必确认默认格式化器是 Prettier，否则保存时仍走编辑器自带的简易规则
真正麻烦的不是选哪个工具，而是原始 HTML 是否经得起解析：未闭合的 <div>、属性值缺引号、混着 PHP 模板或 Liquid 语法，都会让格式化器要么跳过、要么输出不可预测的结果。先做一次 W3C 验证，比直接格式化更重要。