JavaScript 格式化与压缩

什么是 JavaScript 格式化？#

JavaScript 格式化器解决的是“代码看不懂”这件事。打包工具吐出来的压缩单行、从聊天里粘出来时丢了缩进的片段、或者一个被五个人用五种缩进习惯改过的文件——这些代码运行起来没问题，但人根本读不下去。格式化器把它重新排版，让嵌套关系一眼可见，运算符间距一致，语句停在该停的位置。反过来，它也能把一份代码压到最小，方便你往请求体或文档里塞。

本页两件事都做，而且讲清楚各自的底细。Format（格式化）走的是 Prettier 的 standalone 版本，配合 Babel 解析器——也就是很多团队在编辑器里设置“保存时格式化”所用的同一个引擎，所以这里的输出和你的项目跑出来的结果一致。Minify（压缩）则是有意做得保守：只剥掉注释、折叠空白，但保留每一个换行，这样自动分号插入（ASI）永远不会被破坏。它不是 esbuild/terser 那种 token 级压缩器——不会重命名变量、不会删死代码、不会改属性名。这意味着压缩结果可以直接喂回 JS 引擎运行，但它不适合用来压线上生产包。搞清这条边界，是用好它的关键。

怎么用#

1. 把 JavaScript 代码粘进左侧的 JavaScript 输入框，或点 Sample 加载一段示例。
2. 在工具栏选 Indent（缩进）：2、4 或 tab。现代项目最通行的是 2 空格；只有当你马上要把代码粘进一个用 tab 的编辑器时，才选 tab。
3. 点一个操作按钮：
   • Format —— 用你选的缩进重新打印代码，默认会补上分号（与 Prettier 标准行为一致）。
   • Minify —— 删掉 // 行注释和 /* */ 块注释，折叠连续空格和制表符，去掉每行末尾的空白。换行会原样保留。
4. 在右侧 Output 框查看结果，点输出栏的 Copy 复制。Clear 清空两边。

如果 Format 解析失败（多了个括号、模板字符串没闭合），状态栏会直接显示 Prettier 报的错误，而不是输出一坨错误格式——让你去修真正的问题，而不是被误导的排版带偏。

主要特性#

• 用的是真正的 Prettier。 Format 跑的是 standalone 版 Prettier + Babel/estree 插件，不是手写的美化器。这里的输出，就是命令行 prettier --write 的输出。
• 压缩不破坏 ASI。 压缩时保留换行，依赖自动分号插入的语句依然能正常工作。无脑删换行，正是那些草率“压缩器”埋 bug 的姿势。
• 能认出字符串、正则、模板串。 剥注释的扫描器知道：字符串里的 // 不是行注释，除号 / 和正则字面量开头的 / 也不一样——所以它永远不会啃到你的代码本身。
• 左右双栏、复制就绪。 输入可编辑，输出只读，一键复制。
• 完全在浏览器里跑。 没有后端、不上传。Prettier 打包进本页，打开时按需加载，仍然满足严格的 self-only 内容安全策略（CSP）。

实例演示#

一段从旧 gist 里抠出来的函数，带注释、缩进还乱：

输入：

function fetchUser(id){/*legacy: returns null when missing*/
  const url="https://example.com/users/"+id
    const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

选 2 空格，点 Format：

function fetchUser(id) {
  /*legacy: returns null when missing*/
  const url = "https://example.com/users/" + id;
  const opts = { method: "GET", cache: "no-store" };
  return fetch(url, opts).then((r) => r.json());
}

Prettier 把错位的缩进理顺、统一了运算符间距、补上分号——但块注释原位保留。现在换成对原始输入点 Minify：

function fetchUser(id){
const url="https://example.com/users/"+id
const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

注释没了，错位缩进没了，但每条语句仍然独占一行。注意没有发生的事：fetchUser 没被缩短，"GET" 没被改写，箭头函数的参数列表原样保留。这是“可读的压缩”、可以放心粘回 <script>，不是打包工具在构建时做的那种激进混淆。

常见问题#

为什么 Minify 不重命名变量、不压缩我的包？#

因为要正确做这件事，需要完整的“解析 + 代码生成”流水线（作用域分析、属性追踪、副作用判定）。本工具的压缩是有意做成扫描器式的：快、依赖少、可证明不会改变运行时行为。压生产包请在构建线下用真正的打包工具；本页适合做的是快速清理、往文档里贴片段、或者把一段代码整理给别人看。

压缩会把字符串里的注释也删掉吗？#

不会。扫描器逐字符走源码，并持续跟踪自己当前是否处于单引号串、双引号串、模板串或正则字面量之中。出现在这些位置里的 // 被当成普通文本保留；只有真正的注释才会被剥掉。

支持 TypeScript 或 JSX 吗？#

Format 走的是 Babel 解析器，能吃 JSX。但 TypeScript 的类型标注和 .ts/.tsx 专用语法在这里没有开启——遇到它们，本工具会直接报解析错误，而不是悄悄产出错的结果。本页就留给纯 JavaScript 用。

我的代码会被上传吗？#

不会。一切都在你正看着的这个标签页里跑。Prettier 跟本页打包在一起、按需加载；源码在内存里解析，绝不走网络。