数据

JavaScript 格式化

压缩后的打包文件是一整行被改名的变量加上被剥光的空白：上线很完美，阅读却毫无希望。当你需要看懂一段第三方脚本、追踪某个组件做了什么，或只是想整理粘贴进来的代码时，这个格式化工具会把结构重建起来。它把 JavaScript 解析成语法树，再带着真正的缩进、换行和空格打印回来，让原本挤在一行的逻辑变成你能跟得上的样子。行为完全一致，改变的只是排版。缩进、引号和分号风格都可以选，全部在浏览器内完成。

正在加载格式化引擎
8%
Prettier 引擎只需下载一次，本次访问期间会被缓存。
缩进
宽度

功能简介

看懂不是自己写的代码、或被打包工具压扁的代码，第一步是看见它的结构。这个工具把结构还原出来，同时不改变代码做的事。

  1. 01

    基于解析器重排

    JavaScript 会先被解析成语法树再打印，工具是从真实结构重排，而不是猜在哪里断行。正因如此，缩进、代码块和语句边界总能落在正确的位置。

  2. 02

    一致、确定的风格

    缩进、空格、换行和括号位置自始至终遵循同一套规则。相同输入总是得到相同输出，结果稳定到便于阅读、分享和 diff。

  3. 03

    匹配项目的选项

    选两个空格、四个空格或 Tab，设置换行宽度，决定语句是否以分号结尾，选单引号或双引号，让输出读起来就像你代码库本来的样子。

  4. 04

    支持 JavaScript、TypeScript 与 JSX

    箭头函数、class、async/await、模板字符串、解构、可选链、装饰器、JSX 以及 TypeScript 类型标注都会被正确解析并排好，而不是当成纯文本。

  5. 05

    看得懂的错误提示

    代码解析不了时，原因、行号列号和出问题那一行的片段会一起显示，于是你能直接找到那个多余的花括号，而不用猜格式化在哪里放弃了。

  6. 06

    读完就能带走

    输出面板会显示代码展开成多少行、有多大，让你快速衡量原文被压得有多紧。从剪贴板粘贴或从磁盘打开文件，再复制格式化后的代码或保存下来，全程不经过服务器。

如何使用

几步就能把一段塞满、没法读的脚本变成整洁、风格一致的 JavaScript。

  1. 01

    把压缩或杂乱的 JavaScript 贴进输入面板，或用「上传」从磁盘打开 .js 文件。

  2. 02

    设置缩进风格和换行宽度，选择是否使用分号和单引号。

  3. 03

    在右侧查看格式化后的代码，重新带上缩进、每条语句独占一行，随你调整选项实时更新。

  4. 04

    复制结果或下载为 .js 文件，在编辑器里打开去读、调试或继续修改。

功能说明

这些细节让格式化结果值得信任、用着顺手。

  • 基于 Prettier 与 Babel 解析器的 TypeScript 模式，普通 JavaScript、TypeScript 与 JSX 都从真正的语法树重排，而不是靠模式匹配。
  • 随输入和选项变化即时格式化，结果就地更新。
  • 语法错误会连同原因、位置和它指向的那一行一起报出来，而不是产出半成品或空白。
  • 输入和格式化结果都带完整的 JavaScript 语法高亮，浅色深色主题都适配。
  • 不上传、不记录。你粘贴的代码留在浏览器里，关掉标签页即消失。

适合哪些场景

把塞满的 JavaScript 还原成可读代码，在这些场景里很值。

  1. 读一份压缩打包文件

    当一段脚本只剩压缩后的生产文件时，在这里格式化，就能跟上控制流、看清各部分是怎么拼起来的。

  2. 检查第三方组件

    统计脚本、嵌入代码和厂商 SDK 都是压缩发布的。格式化之后，你才能在信任它之前审查它会动什么。

  3. 根据堆栈跟踪调试

    生产错误常常指向某一压缩长行。格式化那个文件，让周围逻辑变得清晰，才好找到真正的原因。

  4. 统一粘贴进来的片段

    从文档、论坛或聊天里复制的代码，缩进和引号风格混杂。一次处理就让它与你的风格一致。

  5. 提交前的整理

    把粗稿格式化成项目的缩进、引号和分号约定再进入审查，无需搭起一整套工具链。

  6. 分享可读示例

    排版一致的片段，在教程、issue 或合并请求里远比东拼西凑的空格更容易讲清楚。

延伸阅读

要上线而不是阅读？JavaScript 压缩 把同一份代码朝相反方向压缩；而样式表则可以用CSS 格式化 把 CSS 排成同样可读的样子。

格式化与压缩

格式化和压缩把同一份代码朝相反方向移动，两者都只改引擎忽略的字符。一个恢复让代码可读的空白，一个为省字节把它去掉。

  1. 格式化不改变行为

    缩进、换行和空格对 JavaScript 引擎是不可见的。重排只调整代码在人眼里的样子，从不改变它的计算结果，所以格式化后的脚本运行起来和原文一样。

  2. 打包文件为何难读

    压缩器剥掉空白、把局部变量改成短名，并尽量把一切塞进尽可能少的行。结果体积小、下载快，却是密密一行，语句之间的边界全都消失了。

  3. 它不会还原原始命名

    格式化带回的是排版，不是被丢掉的含义。被压缩改名成 a、b 的变量仍是那样，被剥掉的注释也不会回来。你得到可读的结构，而不是作者的原始源码。

  4. 幂等、可安全提交

    对已经格式化的代码再格式化，会得到完全相同的文本。因为输出确定，在每次保存或提交前钩子里运行都不会在历史里制造只有噪声的改动。

  5. 它是阅读器，不是运行器

    格式化工具重排文本；它不执行脚本、不解析 import，也不追踪它在运行时做了什么。它让代码变得清晰，好让你自己去读、去推理。

  6. 读用格式化，发布用压缩

    可读代码属于你的编辑器和仓库，压缩代码属于生产环境。这个工具是这一对里「读」的一侧，是压缩器的镜像。

使用建议

一些习惯，能把 JavaScript 格式化的价值用满。

  • 用格式化工具来读和审查陌生或塞满的代码，自己的可读源码仍以原件为准。
  • 一个项目固定一种缩进、引号和分号风格，格式化后的文件之间才能干净地 diff。
  • 记住格式化只恢复排版：被压缩的变量名和被剥掉的注释不会回来。
  • 对自己的代码库，从编辑器或提交前钩子运行格式化，文件就能保持一致，不必手动粘贴。
  • 把格式化后的第三方脚本当作「读它」的方式，而不是你被分发版本的安全替代品。

边界与注意事项

这个工具做什么，又把什么留给其他步骤。

  • 它重排单段 JavaScript，不运行代码、不解析 import、不打包模块、也不转译语法。
  • 它恢复的是排版，不是信息。被压缩的变量名仍然很短，被剥掉的注释不会回来。
  • 它只负责排版，不做类型检查、不解析 JSX 组件，也不会告诉你代码是否正确。
  • 文件在浏览器里读取，因此上传上限是 2 MB，更大的包建议在编辑器里打开。
  • 语法错误会中止格式化并报告出来，所以严重损坏的输入不会产出半成品。

常见问题

关于格式化 JavaScript 以及何时使用的常见问题。

格式化会改变我的代码行为吗？

不会。它加的是空白、换行和一致的间距，而这些 JavaScript 引擎都会忽略。语句、表达式和逻辑含义不变，唯一的改写只在写法层面，比如把 .5 打印成 0.5，或者统一引号风格，所以格式化后的代码行为与你粘贴进来的完全一致。

它能把打包文件反压缩回原始源码吗？

它恢复的是可读排版，不是原始源码。缩进和换行会回来，但被压缩改成单字母的变量仍是单字母，被剥掉的注释也没了。你得到能读、能跟的代码，而不是作者所写内容逐字节的副本。

我能控制哪些格式化选项？

缩进可选两个空格、四个空格或 Tab，换行宽度可设 80、100 或 120，可选择语句是否以分号结尾，以及字符串用单引号还是双引号。

它支持现代 JavaScript 语法吗？

支持。箭头函数、class、私有字段、async/await、模板字符串、解构、展开、可选链以及顶层 await 都会被正确解析并格式化。它只格式化现代语法，不会为老旧浏览器降级。

它能格式化 TypeScript 或 JSX 吗？

可以。这个工具背后的解析器在读普通 JavaScript 之外，也读 TypeScript 和 JSX，所以类型标注、interface、enum、装饰器和 JSX 元素都会被正确排版，而不是被拒绝。它只排版、不做类型检查：工具负责把代码摆好，不负责告诉你类型对不对。

把第三方脚本放进来安全吗？

格式化它是安全的，全程在浏览器内进行；代码绝不会被执行，只是作为文本重新排版。请把结果当作阅读和审计该脚本的方式，而不是你原本被分发文件的可信替代品。

我的代码会被上传吗？

不会。一切都在浏览器里运行。你粘贴的 JavaScript 和打开的文件都在本地处理，从不传输或存储，关掉标签页就消失，打包文件和私有代码都留在本机。

更多相关工具

继续使用数据与格式工具箱的其余部分。