JS / TS 格式化工具
使用 Prettier 选项美化或压缩 JavaScript、TypeScript 和 JSX/TSX。
你的代码在浏览器中用 Prettier 和 Terser 本地格式化，不会上传到任何服务器。
也需要格式化样式？试试 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 格式化工具
- 将你的 JavaScript 或 TypeScript 粘贴到输入框。
- 选择美化以美化排版，或压缩以压缩。
- 选择解析器：自动、JS / JSX 或 TS / TSX。
- 调整制表符宽度、引号、分号和尾随逗号等选项。
- 从结果面板复制格式化后的输出。
示例
输入
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 都完全在你的浏览器中运行，因此你的代码不会离开你的设备，也不会上传到任何服务器。
相关工具
全部 ArrayKit 工具