纯前端可用beautify-html实现HTML格式化，需引入精简版库并正确配置indent_size、indent_inner_html等参数，同时对输入做Unicode清洗和空值校验，textarea输出防XSS；VS Code内置格式化更适日常开发。
直接用 beautify-html 在浏览器里跑格式化
不用后端、不发请求，纯前端就能做出可用的 HTML 格式化组件。核心是引入成熟的 beautify-html 库（注意不是 js-beautify 全量包，它体积大且含 JS/CSS 处理逻辑，容易拖慢页面）。推荐从 jsDelivr 加载精简版：
<script src="https://cdn.jsdelivr.net/npm/beautify-html@1.0.0/dist/beautify-html.min.js"></script>
引入后全局有 html_beautify 函数，传入原始 HTML 字符串和配置对象即可返回格式化结果。别漏掉配置——默认参数对嵌套标签或自定义元素（如 <my-component>）支持很弱。
html_beautify() 必须传的配置项
常见错误是只传字符串，结果缩进错乱、属性换行异常，甚至把 <template> 或 <slot> 当成非法标签报错。关键配置如下：
-
indent_size: 推荐设为2或4，别用\t—— 某些终端/编辑器渲染 tab 宽度不一致 -
indent_inner_html: 设为true，否则<body>内内容不会额外缩进一层，结构感差 -
preserve_newlines: 设为true，否则多行注释<!-- ... -->会被压成一行 -
max_preserve_newlines: 建议设5，防止用户粘贴带大量空行的代码时输出爆炸 -
wrap_line_length: 设120，避免长属性（如内联样式）挤在一行影响可读性
textarea 输入框怎么防崩溃和乱码
用户粘贴的 HTML 可能含零宽字符、BOM、混合编码（如 GBK 片段混在 UTF-8 中），直接传给 html_beautify 会静默失败或返回空字符串。必须提前清洗：
立即学习“前端免费学习笔记（深入）”；
- 用
sqlFormatter.format()那套思路：先input.value.trim().replace(/[\u200B-\u200F\uFEFF]/g, '')清不可见 Unicode - 检测是否为空或只有空白符：
if (!input.value?.trim()) return，避免调用库做无意义运算 - 输入框设
accept="text/html"无用，浏览器不校验；真正有效的是监听paste事件，对剪贴板内容做同步清洗再插入 - 输出框用
textarea而非pre+innerHTML—— 后者会执行脚本、加载外部资源，有 XSS 风险
VS Code 用户别重复造轮子
如果你的目标只是“在开发中快速格式化”，而不是做一个对外发布的工具页面，直接用编辑器原生能力更稳：
- VS Code 默认快捷键
Shift + Alt + F（Windows）已足够处理绝大多数 HTML - 想控制缩进风格？改项目级
.vscode/settings.json里的html.format.indentInnerHtml和html.format.wrapLineLength - 插件如
Prettier对 HTML 支持有限（尤其 Vue/Svelte 模板），Beautify更灵活但需手动配html-beautify的 JSON 参数映射 - 在线工具适合临时救急，但敏感业务代码（含内网路径、API key 注释）千万别粘过去
真正难的不是调用哪个函数，而是判断什么时候该用浏览器运行、什么时候该交给编辑器——前者适合嵌入管理后台的「代码预览」模块，后者才是日常开发的主流程。
