批量进行HTML代码格式化的实用方法-html教程-PHP中文网

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

批量进行html代码格式化的实用方法

用 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 结尾，且开头含 ——片段代码（如只有一段 <code><div><p>xxx</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器"><img src="https://img.php.cn/upload/skill/000/000/081/179220974213190.jpg" alt="HTML汇报生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="overflowclass">HTML汇报生成器</a> <p class="overflowclass">🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。</p> </div> <a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></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 更轻，但需手动处理边界情况。

必须用 'text/html' 作为 MIME 类型调用 DOMParser，传 'application/xml' 或空字符串会导致自定义标签被删、属性丢失
只处理 document.body 内容，避免中的 <meta> 或 <link> 被意外重排
<pre class="brush:php;toolbar:false;"></pre>、<script></script>、<style></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，否则保存时仍走编辑器自带的简易规则

<div>、属性值缺引号、混着 PHP 模板或 Liquid 语法，都会让格式化器要么跳过、要么输出不可预测的结果。先做一次 W3C 验证，比直接格式化更重要。</div>