JS/HTML 格式化

JavaScript 与 HTML 格式化器会把压缩或凌乱的代码重新缩进，让它重新变得可读。粘贴一段压缩过的生产脚本、一行写成的 HTML 文档，或同事发来的没有任何换行的代码片段，选择缩进风格，美化器就会把它展开成缩进一致、结构清晰的样子。它适合开发者检查第三方打包产物、调试代码生成器的输出，或在把文件加入项目之前统一缩进。

使用方法

1. 选择模式——JavaScript 或 HTML——让格式化器应用正确的语法规则。
2. 粘贴代码到输入区。点击「格式化」或按 Ctrl+Enter 后输出更新。
3. 选择缩进风格： 两个空格、四个空格或制表符。
4. 复制或下载结果。面板还会显示原始与格式化后的字节大小，这能提醒你一个压缩文件里有多少内容其实只是空白。

美化会改变什么，又不会改变什么

格式化只触及空白，且仅触及空白。它会在语句之间加入换行、按嵌套层级缩进代码块、对齐续行。它不会重命名变量、重排语句、增删有意义的分号，也不会转换语法。正是这种克制让它安全：格式化后的文件与原始文件执行结果完全相同。

它的实际价值在于诊断。当十条语句和四层嵌套块挤在同一行时，一个不匹配的括号是看不见的；一旦每个块都落到各自缩进的行上，同一个括号会立刻显眼。阅读压缩过的第三方代码、寻找需要覆写的那段函数，是另一种常见用法——美化把一整面字符墙变成可导航的文件。

实操示例

一段压缩代码到手时是这样的：

function total(items){let sum=0;for(const it of items){if(it.active){sum+=it.price*it.qty;}}return sum;}

用两个空格缩进美化之后：

function total(items) {
  let sum = 0;
  for (const it of items) {
    if (it.active) {
      sum += it.price * it.qty;
    }
  }
  return sum;
}

计算逻辑没有任何改变。改变的是：if 现在明显位于循环之内，累加变量在它之前声明，return 在其外部——结构一眼可读，而不必在脑中重建。

HTML 的受益方式相同。框架输出的模板常常是一长行嵌套标签，重新缩进之后就能看清哪些元素包裹着哪些元素。审查页面无障碍性时这一点尤其有用：层级一旦可见，从 h2 直接跳到 h4 的标题、或列表项落到列表元素之外的写法，都会立刻暴露。格式化器并不校验标记合法性，但它把嵌套关系变得足以用肉眼复核。

如何选择缩进风格

• 两个空格——JavaScript 事实上的默认值，也是多数 linter 的假设。紧凑，且能避免深层嵌套的代码一路向右漂移。
• 四个空格——嵌套提示更明显，常见于受 Java 影响的代码库和部分 TypeScript 项目。
• 制表符——每层一个字符；每位读者自行设定显示宽度，因此一些团队偏爱它，尽管共享代码中混用制表符和空格存在风险。

无论选哪种，都要在开始编辑之前格式化，而不是之后。对已经改动过的文件重新格式化，会产生满是空白噪声的 diff，把真正的修改埋掉——这个习惯会让每次拉取请求都耗费审查者大量时间。

常见错误

• 期待它做压缩。 本工具只展开；需要相反效果时，请在构建流程中使用专门的压缩器。
• 把 HTML 粘进 JavaScript 模式。 标签不是 JavaScript 语句；请选择匹配的模式，否则输出会出错。
• 以为格式化能修复语法错误。 如果代码在美化前无法运行，美化后依然无法运行。格式化器重新组织合法词法单元，不修复非法代码。
• 在字符串字面量内部做格式化。 引号里的内容是数据而非代码。格式化器不会动它，但手工编辑嵌在字符串里的模板 HTML 或 SQL 时要小心。
• 丢失原始文件。 如果之后打算做 diff，请保留压缩版源码；美化后的版本是拿来读的，不是拿来发布的。

功能特性

• 对 JavaScript 和 HTML 进行结构化缩进美化
• 缩进风格：两个空格、四个空格或制表符
• 能感知作用域的格式化，正确处理代码块、循环与嵌套
• 显示原始与格式化后的文件大小
• 一键复制到剪贴板或下载为文件
• 100% 客户端运行——私有代码不会离开浏览器

使用场景

• 调试压缩代码： 展开生产打包产物，定位出错的位置。
• 审查第三方库： 重新缩进依赖项，理解它的作用。
• 代码清理： 合并来自不同来源的片段时统一缩进。
• 学习： 格式化生成的 HTML，看清文档真实的嵌套结构。
• 提交 bug 报告： 在粘贴到 issue 或审查之前，先把代码变得可读。

相关工具

• CSS 格式化/压缩
• JSON 格式化器
• HTML 编码器/解码器
• XML 格式化器