JavaScript 格式化工具
什么是 JavaScript 格式化？
JavaScript 格式化工具会把 JS 代码整理成一致、清晰、便于阅读的结构。它会处理缩进、换行、代码块、对象字面量、数组、函数调用和嵌套表达式，让逻辑和数据流更容易跟踪。它适合调试、代码评审、学习示例、复制片段，以及查看压缩或生成后的文件。格式化不是静态分析，不会修复运行时错误、证明异步逻辑正确、识别所有不安全依赖，也不能替代 lint。在真实项目中，输出应与 ESLint、Prettier 或团队既有规范保持一致，避免样式变化掩盖真正的代码改动。
使用方法
使用方法
- 在左侧输入框粘贴或输入 JavaScript 代码
- 选择缩进大小、引号风格和分号设置
- 点击「格式化」美化代码，或点击「校验」检查语法
- 在右侧查看结果（支持语法高亮）
- 点击「复制」将结果复制到剪贴板
选项说明
键盘快捷键
- Ctrl + Enter格式化
- Ctrl + Shift + C复制结果
JavaScript 提示
- 格式化无法保证运行时的正确性。修改依赖自动分号插入或构建转换的 JavaScript 后，请重新运行测试或浏览器验证。
- 校验粘贴的代码时，请注意浏览器解析器的支持可能与目标运行时或打包配置存在差异。
使用场景
技术原理
JavaScript 美化器是基于 ECMA-262 语法定义的三阶段流水线：词法分析器生成 Token 流（IdentifierName、NumericLiteral、StringLiteral、TemplateHead/Middle/Tail、Punctuator、Keyword 和 LineTerminator）；解析器构建兼容 ESTree 的 AST（@babel/parser、acorn 和 esprima 使用的结构）；打印器遍历 AST 树，按缩进大小和目标行宽规则输出文本。Prettier 将 AST 编译为由 group、indent、line 和 softline 基元组成的 Doc 中间表示，然后布局算法选择断行点使输出适配 printWidth（80、100、120）。ESLint --fix 则直接在原始源码上就地重写 Token，保留注释更积极但只修复标记为可自动修复的规则。 打印器不能随意插入换行：ECMA-262 §11.9.1 自动分号插入（ASI）规则会在遇到 LineTerminator 时结束语句，除非下一个 Token 是续行。具体来说，在以 (、[、`、+、-、/ 开头的行前换行，或在 ++/-- 前换行会悄悄改变语义；在 return、throw、break、continue 或 yield 之后直接换行会插入分号并丢弃操作数。模板字面量（反引号）按字节保留内部内容，包括嵌入的 ${} 表达式——其内部会作为 JS 重新格式化，但周围空白不会变动。注释通过 leading/trailing/innerComments 数组重新挂载到相邻 AST 节点，确保往返处理后不丢失。 词法分析和打印都是 O(n) 时间复杂度（常数较小）；得益于 ECMA-262 LR(1) 风格文法的单 Token 前瞻，解析器对格式良好的代码基本是线性的。标准 JavaScript 解析不涵盖 JSX、TypeScript 类型注解、装饰器或 Flow，这些需要 @babel/parser 插件或 @typescript-eslint/parser；对 .tsx 文件运行纯 JS 工具会拒绝 : type 注解。Source Map v3 可在构建步骤需要保留堆栈追踪精度时保留原始行列映射，行尾符（LF vs CRLF）在写入时标准化，而非解析时。
- 流水线：词法分析器（按 ECMA-262 §12 生成 Token 流）-> ESTree AST（acorn/@babel/parser/esprima）-> 打印器；词法分析器和打印器为 O(n)，解析器为 O(n)（单 Token 前瞻）。
- ECMA-262 §11.9.1 ASI 陷阱：不要在以 (、[、`、+、-、/ 开头的 Token 前换行，不要在 ++/-- 前换行，不要在 return/throw/break/continue/yield 之后立即换行。
- Prettier vs ESLint --fix：Prettier 将 AST 降低为 Doc 中间表示（group/indent/line），选择适配 printWidth（80/100/120）的布局；ESLint --fix 就地重写 Token，只应用标记为可修复的规则。
- 注释保留：leading/trailing/innerComments 绑定到 AST 节点；紧接在声明上方的 JSDoc 块保持关联，打印器不会将其错误地附加到前一个语句。
- 模板字面量（反引号）按字节保留；仅 ${} 内部的 JS 重新打印。正则字面量和字符串引号按选定的单/双引号风格标准化，转义符重新计算。
- 方言覆盖：纯 JS 解析器拒绝 JSX、TypeScript 类型、装饰器和 Flow；.tsx/.ts 文件需要 @babel/parser 插件 ['jsx','typescript','decorators-legacy'] 或 @typescript-eslint/parser。
- 输出标准化：行尾符按配置写为 LF 或 CRLF（与输入无关），多行数组/对象/调用应用尾逗号策略，工具链需要保留原始行列信息时输出 Source Map v3。
示例
格式化前
function greet(name){if(!name){return 'Hello, stranger';}const greeting=`Hello, ${name}!`;console.log(greeting);return greeting;}格式化后（2 空格缩进）
function greet(name) {
if (!name) {
return 'Hello, stranger';
}
const greeting = `Hello, ${name}!`;
console.log(greeting);
return greeting;
}压缩后
function greet(n){if(!n)return"Hello, stranger";const e=`Hello, ${n}!`;return console.log(e),e}常见问题
格式化器使用什么风格？
大多数版本采用 Prettier 默认配置：每行 80 列，保留分号，使用双引号，2 空格缩进，在 ES5 允许的位置加尾随逗号。如果你的项目风格不同，可调整对应选项。同一份配置下结果是确定的——相同输入必然产生相同输出。
它会执行我的 JS 吗？
不会。它只解析并重新打印源代码。副作用、网络请求、运行时错误都与它无关——格式化器从不执行脚本。
它会修复语法错误吗？
不会。解析器拒绝格式化无效的 JavaScript，并指出解析失败的位置。请先修复语法错误；常见原因有：括号缺失、IIFE 后 return 缺少分号、模板字符串反引号不匹配等。
支持 JSX/TypeScript 吗？
大多数现代版本支持解析带 JSX 的 JavaScript 以及 TypeScript 语法（.ts、.tsx）。格式化器会根据解析结果自动判断语法类型。如果你写的是纯 ES5，建议关闭 TypeScript 模式以避免误报错误。
可以压缩 JS 吗？
部分版本提供压缩（Terser 风格）模式，会重命名变量、移除空白并消除死代码。输出体积小但难以阅读。生产构建用压缩模式，源码评审用格式化模式。
我的代码会被上传吗？
不会。解析和打印基于浏览器内置的 JavaScript 解析器。粘贴的代码不会被传输。
为什么我的注释位置略有变动？
Prettier 等格式化器会把注释附着到最近的 AST 节点上。位于两个函数之间的注释，AST 上可能「属于」下方那个函数，于是被重新挂接到新位置。行尾内联注释通常会被原样保留，独立注释则可能发生位移。