多人协作代码规范
前端团队5人用不同编辑器，缩进、分号、引号风格长期不统一。每次合并代码都要人工改几十处，还容易漏掉。把混乱的代码粘贴到本工具，选好 Prettier 配置（比如单引号、尾逗号、缩进2格），一键格式化后直接复制替换，确保合并前代码风格一致，省去逐行校对的时间。
开发者工具 · JSON / 数据格式
JS 格式化
Prettier 风格/多选项
✓本地处理 · 不上传
✓免费 · 无需登录
✓无次数限制
输 入 JS / TS
格式化结果 JavaScript
格式化结果将在这里呈现 —— 点「示例」试试就绪 · 粘贴代码实时格式化，Prettier 风格多选项，全程本地处理
第一节
关于本工具
About接手一段别人写的 JavaScript，缩进混乱、分号时有时无、引号双单混用——手工对齐比重写还费时。这个工具调用 Prettier 核心规则，在粘贴代码的瞬间按选定的行宽、引号风格、尾分号策略重新排版，输出可直接粘贴回编辑器。所有处理在浏览器本地完成，代码不上传服务器，适合处理含敏感逻辑的代码片段。
使用场景
面试手写代码批改
面试者手写了一段 JS 逻辑，缩进混乱、括号换行随意，考官很难快速判断语法是否正确。把代码输入本工具，选择标准 Prettier 风格格式化，混乱的代码瞬间对齐缩进、补全缺失分号，考官能一眼看出逻辑缺陷，而不是被格式干扰判断。
开源项目贡献者格式检查
一个开源仓库要求所有 PR 代码必须符合 Prettier 配置（2空格缩进、无分号、单引号）。贡献者本地环境没装 Prettier，提交后 CI 报错。把本地写的代码粘贴到本工具，选好对应规则格式化，再复制回文件，保证一次通过格式检查，不必反复 push 等 CI 结果。
代码片段分享前整理
在技术社区回答问题时，想贴一段自己写的 JS 示例，但代码里混着调试用的 console.log 和凌乱的缩进。把代码贴进本工具，格式化后删除多余调试语句，再复制到回答框。读者看到的是整洁、易读的示例，不会因为格式问题产生误解。
旧项目迁移前代码清洗
接手一个用了 3 年的 jQuery 项目，代码里缩进混乱、引号混用、大量无用空行。用本工具先对每个 JS 文件做一次格式化，选择项目统一的 Prettier 风格（双引号、分号、缩进4格），再开始重构逻辑。格式化后的代码结构清晰，能快速定位到真正的业务逻辑，而非被格式噪声干扰。
第二节
使用指南
Getting Started使用步骤
- 1在代码编辑区粘贴或输入待格式化的 JavaScript 代码，支持 ES6+ 语法
- 2从「缩进风格」下拉菜单选择空格数（2/4）或制表符，实时预览右侧格式化结果
- 3勾选「分号」「尾逗号」「引号风格」等选项，每次切换均立即更新输出面板
- 4点击「复制结果」按钮将格式化后的代码存入剪贴板，状态栏显示「已复制」提示
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| function add(a,b){return a+b} | function add(a, b) { return a + b; } | 常规：Prettier 风格自动添加分号、空格、换行，验证基本格式化效果 |
| const x={a:1,b:2,c:3} | const x = { a: 1, b: 2, c: 3 }; | 常规：对象字面量自动展开为单行（若未超行宽），验证空格与逗号规整 |
| let y= [1,2, 3] | let y = [1, 2, 3]; | 边界：输入含多余空格，工具应自动压缩为单空格分隔，而非保留原格式 |
| /* comment */ var z=1+2 | /* comment */ var z = 1 + 2; | 边界：注释应原样保留，不因格式化而丢失或移位，同时运算符两侧加空格 |
| if(true){console.log('ok')}else{console.log('no')} | if (true) { console.log("ok"); } else { console.log("no"); } | 常规：if-else 结构自动换行缩进，字符串引号统一为双引号（Prettier 默认） |
| function foo(){ return 42} | function foo() { return 42; } | 易错：return 语句前缺少换行，工具应自动缩进并补分号，而不是报错或保留原样 |
| const arr=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] | const arr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ]; | 边界：超长数组自动折行（行宽默认 80），验证尾逗号是否添加（Prettier 默认加） |
| try{throw new Error('fail')}catch(e){console.error(e)} | try { throw new Error("fail"); } catch (e) { console.error(e); } | 易错：try-catch 块内语句应缩进，catch 关键字前换行，字符串引号统一 |
常见错误对照
1.JSON 末尾多余逗号导致解析失败
✗ 错误
{"name": "Alice", "age": 30,}✓ 修复
{"name": "Alice", "age": 30}JSON 规范（RFC 8259）禁止末尾逗号，Prettier 默认会移除，但若手动粘贴带逗号的 JSON，格式化前就会报错。
2.单引号字符串被当作无效 JSON
✗ 错误
{'name': 'Bob'}✓ 修复
{"name": "Bob"}JSON 标准要求键和字符串值必须用双引号，单引号只在 JavaScript 对象字面量中合法，不是 JSON 格式。
3.未转义字符串内的双引号
✗ 错误
{"message": "他说"好的""}✓ 修复
{"message": "他说\"好的\""}JSON 字符串内双引号必须用反斜杠转义，否则解析器会把字符串提前截断，导致格式错误。
4.数字或布尔值误加引号
✗ 错误
{"count": "42", "active": "true"}✓ 修复
{"count": 42, "active": true}JSON 中数字和布尔值不应加引号，加引号后变成字符串，工具格式化不会纠正类型，但语义错误。
5.注释残留导致解析失败
✗ 错误
/* 这是配置 */
{
"port": 8080 // 端口号
}✓ 修复
{
"port": 8080
}JSON 标准不支持注释，Prettier 风格的格式化工具不会保留注释，粘贴前需手动移除。
6.键名未用双引号（非标准 JSON）
✗ 错误
{name: "Charlie"}✓ 修复
{"name": "Charlie"}JavaScript 对象允许无引号键名，但 JSON 必须用双引号包裹键名，否则解析器报错。
7.多层嵌套未缩进，可读性差
✗ 错误
{"a":{"b":{"c":1}}}✓ 修复
{
"a": {
"b": {
"c": 1
}
}
}Prettier 风格默认缩进 2 空格，未格式化的紧凑 JSON 虽合法，但人工审查时极易遗漏括号或逗号。
8.控制字符未转义
✗ 错误
{"text": "第一行
第二行"}✓ 修复
{"text": "第一行\n第二行"}JSON 字符串内不允许直接包含换行符或制表符等控制字符，必须用 \n、\t 等转义序列表示。
第三节
工作原理
How It Works核心公式
格式化输出 = Prettier(输入代码, { parser: 'babel', semi: 选项, singleQuote: 选项, tabWidth: 选项, trailingComma: 选项 })
变量说明
输入代码待格式化的 JavaScript 源码字符串parser解析器，babel 用于 JS/JSXsemi布尔值，是否在语句末尾加分号singleQuote布尔值，是否使用单引号tabWidth缩进空格数，如 2 或 4trailingComma尾逗号策略：'none'/'es5'/'all'
示例
输入代码 `const a=1;const b='hello'`，选项 semi=true, singleQuote=true, tabWidth=2, trailingComma='none'：Prettier 解析为 AST 后重新打印为 `const a = 1;\nconst b = 'hello';`，缩进 2 空格，分号保留，单引号生效，无尾逗号。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问这个格式化工具是 Prettier 风格，那能自定义缩进用 2 空格还是 4 空格吗？＋
答
可以。工具在输入框下方提供了「缩进大小」选项，支持 2 空格、4 空格和 Tab 三种。默认是 2 空格，这是 Prettier 的默认值。如果你团队代码规范要求 4 空格，手动选一下就行，格式化结果会按这个缩进来重排整个代码。
问我把一段很长的 ES6 箭头函数贴进去，格式化后换行位置不对怎么办？＋
答
箭头函数的换行受「打印宽度」和「尾逗号」两个选项影响。如果觉得换行太多，把「打印宽度」从默认 80 改成 120，工具会尽量在一行内放更多代码。如果想去掉函数参数后的逗号，把「尾逗号」改成「无」。这两个选项都在输入框下方的设置区。
问为什么我格式化后，某些对象属性顺序变了？＋
答
工具本身不会主动改变对象属性的书写顺序，Prettier 风格的格式化只调整缩进、空格、换行和分号。如果你的属性顺序变了，检查一下输入代码里是否有「排序导入」或「排序对象键」之类的预处理步骤。本工具不包含排序功能，纯格式化不影响属性顺序。
问格式化后代码里多了很多分号，我习惯不加分号怎么办？＋
答
在设置区把「分号」选项从「始终」改成「省略」即可。Prettier 默认加所有语句的分号，但很多开发者偏好无分号风格。改这个选项后，格式化结果会去掉所有非必要的 ASI 分号，只保留必须的（如 for 循环头部）。
问这个工具在浏览器里运行，我的代码会上传到你们服务器吗？＋
答
不会。工具实现方式是纯前端（FE），所有格式化逻辑都在浏览器本地执行，使用 JavaScript 版本的 Prettier 核心库。你粘贴的代码不会离开你的电脑，也不会上传到任何服务器。关闭页面后，输入内容自动清除，没有后端存储。
问我贴了 2 万行代码进去，页面卡住了，是不是有大小限制？＋
答
纯前端工具受浏览器内存和单线程限制，超大文件（超过 1 万行或 500KB）可能导致页面卡顿甚至崩溃。建议分段格式化，每次处理 2000-3000 行。如果必须格式化完整大文件，先用编辑器拆分成多块，逐块粘贴到工具中处理。
问格式化后单引号全变成了双引号，怎么改回来？＋
答
在设置区找到「引号」选项，默认是「双引号」，改成「单引号」即可。Prettier 风格默认使用双引号，但很多 JS 项目习惯单引号。改这个选项后，格式化结果会统一使用单引号，包括字符串和对象键名。
问我有一段 JSX 代码，格式化后标签属性换行很奇怪，能调吗？＋
答
JSX 属性的换行受「打印宽度」和「JSX 单引号」两个选项影响。如果觉得属性换行太多，增大「打印宽度」到 100 或 120。另外，如果 JSX 属性用了双引号而你想用单引号，勾选「JSX 单引号」选项。这些都在设置区可调。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。