JS 格式化工具：在线美化与压缩

用 JS 格式化工具通过 Prettier 美化或压缩 JavaScript、TypeScript 和 JSX/TSX。

你的代码在浏览器中用 Prettier 和 Terser 本地格式化，不会上传到任何服务器。

由 Udit Agarwal 开发和维护

也需要格式化样式？试试 CSS 格式化工具。

关于 JS / TS 格式化工具

这款 JS 格式化工具直接在你的浏览器中美化或压缩 JavaScript、TypeScript 和 JSX/TSX。作为 JavaScript 美化工具，它运行 Prettier 并提供完整的选项面板；压缩则使用 Terser 为生产环境精简代码。选择自动解析器以自动检测语法，或在需要特定 TypeScript 格式化时强制使用 JS/JSX 或 TS/TSX。调整分号、引号风格、制表符宽度、打印宽度和尾随逗号，以匹配你项目的风格。它专为清理杂乱片段的开发者、检查打包输出的 QA 工程师，以及任何想要一个快捷的在线 Prettier 替代方案的人打造。所有处理都在你的浏览器本地完成，因此你的源代码不会离开你的设备，也不会上传到任何服务器。

功能特性

• 用 Prettier 美化 JavaScript、TypeScript 和 JSX/TSX
• 用 Terser 压缩以为生产环境精简代码
• 自动解析器检测，外加显式的 JS/JSX 和 TS/TSX 模式
• 切换分号、单引号或双引号，以及制表符与空格
• 可配置的制表符宽度（2 或 4）和打印宽度（80、100、120）
• 选择尾随逗号：none、es5 或 all
• 调整任何选项时即时格式化
• 完全在你的浏览器中运行

如何使用 JS / TS 格式化工具

1. 将你的 JavaScript 或 TypeScript 粘贴到输入框。
2. 选择美化以美化排版，或压缩以压缩。
3. 选择解析器：自动、JS / JSX 或 TS / TSX。
4. 调整制表符宽度、引号、分号和尾随逗号等选项。
5. 从结果面板复制格式化后的输出。

示例

输入

const  greet=(name)=>{return 'hi '+name}

输出

const greet = (name) => {
  return 'hi ' + name;
};

使用默认 Prettier 选项美化（2 个空格缩进、分号）。

常见错误与故障排除

• 粘贴后输出为空或显示解析错误。 — 请确保片段是有效的 JavaScript 或 TypeScript。对类型注解切换到 TS / TSX，对 React 语法切换到 JS / JSX。
• 自动模式错误解析了 TypeScript 特有语法。 — 自动模式先尝试 TypeScript 解析器再回退到 Babel；如果你的文件使用了高级类型特性，请显式强制使用 TS / TSX。
• 压缩后的输出看起来难以阅读。 — 这是预期行为。Terser 会剥离空白并精简代码以用于生产环境。如果你想要可读结果，请使用美化。
• 引号或分号不是你想要的样子。 — 在复制前切换单引号和分号选项。更改时 Prettier 会即时重新格式化。

常见问题

什么是 JS 格式化工具，它能做什么？

它是一款基于浏览器的工具，能美化或压缩 JavaScript、TypeScript 和 JSX/TSX。美化运行带完整风格选项的 Prettier，压缩运行 Terser 以为生产环境压缩代码。

如何用 JS 格式化工具格式化 TypeScript 或 JSX？

选择解析器：JS / JSX、TS / TSX 或自动。自动模式先尝试 TypeScript 解析器再回退到 Babel，因此纯 JavaScript、JSX 和 TypeScript 都能正确格式化。

JS 格式化工具使用 Prettier 和 Terser 吗？

是的。美化使用 Prettier，压缩使用 Terser，因此输出与你在真实构建流水线中使用的工具一致。

我可以在 JS 格式化工具中控制哪些风格选项？

你可以切换单引号与双引号、分号，在制表符和空格之间切换，将制表符宽度设为 2 或 4，选择 80、100 或 120 的打印宽度，并选择 none、es5 或 all 的尾随逗号。

JS 格式化工具会把我的代码发送到任何地方吗？

不会。Prettier 和 Terser 都完全在你的浏览器中运行，因此你的代码不会离开你的设备，也不会上传到任何服务器。

相关工具

• CSS / SCSS 格式化工具 — 美化或压缩 CSS/SCSS/LESS，排序属性并去除重复项。
• HTML 格式化工具 — 美化或压缩 HTML，格式化内联 CSS/JS 并预览结果。
• JSON 格式化工具 — 美化、压缩并验证 JSON，并定位错误位置。
• JSON 转 TypeScript — 从 JSON 示例生成 TypeScript 接口。
• SQL 格式化工具 — 为 MySQL、PostgreSQL、SQL Server、SQLite、BigQuery 和 Oracle 格式化 SQL。
• GraphQL 格式化工具 — 格式化或压缩 GraphQL 查询和模式，验证语法并提取操作。
• XML 格式化工具 — 美化、压缩和验证 XML，并在 XML ↔ JSON 之间转换。
• cURL 转 Fetch — 将 curl 命令转换为 JavaScript 的 fetch() 调用。

更多代码格式化工具

• HTML 格式化工具 — 美化或压缩 HTML，格式化内联 CSS/JS 并预览结果。
• XML 格式化工具 — 美化、压缩和验证 XML，并在 XML ↔ JSON 之间转换。
• SQL 格式化工具 — 为 MySQL、PostgreSQL、SQL Server、SQLite、BigQuery 和 Oracle 格式化 SQL。
• GraphQL 格式化工具 — 格式化或压缩 GraphQL 查询和模式，验证语法并提取操作。
• Dockerfile 格式化工具 — 格式化 Dockerfile 并获取最佳实践和 lint 建议。
• MongoDB 查询格式化工具 — 格式化 MongoDB shell 查询和聚合管道。
• 对比度检查工具 — 检查两种颜色之间的 WCAG 对比度以及是否通过 AA/AAA。
• Mermaid 图表渲染器 — 在浏览器中将 Mermaid 图表（流程图、时序图、甘特图）渲染为 SVG。
• SVG 优化工具 — 压缩 SVG：移除注释、元数据和编辑器残留，并合并空白。
• MongoDB 查询美化工具 — 在浏览器中美化并缩进 MongoDB 查询和 find() 语句。
• MongoDB 聚合美化工具 — 在浏览器中美化并缩进 MongoDB 聚合管道。
• MongoDB 浏览器 — 浏览 MongoDB 文档或集合样本，并推断其字段架构和类型。

查看全部代码格式化工具 (32) · 全部工具