JavaScript 格式化工具
JavaScript 格式化工具可在浏览器中实时将凌乱、压缩或风格不一致的 JavaScript 转换为整洁、易读的代码。粘贴一行式的打包代码或手写片段,格式化结果会立即显示在右侧面板,缩进完整、风格统一。
常见使用场景
展开打包代码
统一风格
审阅与学习
如何格式化 JavaScript
粘贴你的代码
在左侧的输入面板中键入或粘贴 JavaScript。你也可以使用上传按钮加载 .js 文件,或点击示例加载样例。
即时查看输出
在你输入时,带语法高亮的格式化结果会自动显示在右侧面板——无需点击按钮。行号和实时大小计数器让大文件更易于浏览。
调整选项
设置缩进(2、3、4、8 个空格或 Tab),并在工具栏中切换行宽、分号、引号和尾逗号。输出会立即重新格式化。
复制或下载
点击复制将结果发送到剪贴板,或点击下载将其保存为 .js 文件。使用编辑在导出前手动微调输出。
功能与选项
格式化选项
Prettier 在设计上带有明确风格主张,但这些选项可让你贴合项目的风格规范。每次更改都会立即重新格式化输出。
| 选项 | 可选值 | 控制内容 |
|---|---|---|
| 缩进 | 2 · 3 · 4 · 8 空格 · Tab | 每个嵌套层级所用的缩进宽度和字符。 |
| 行宽 | 80 · 100 · 120 | Prettier 在换行长语句前所设定的目标行长。 |
| 分号 | 是 · 否 | 语句是否以分号结尾。 |
| 引号 | 双引号 · 单引号 | 字符串字面量所用的引号风格。 |
| 尾逗号 | 全部 · ES5 · 无 | 多行数组、对象和参数列表中最后一项之后的逗号。 |
内置工具
实时格式化
输出随输入即时更新,带有 Prism 语法高亮和行号。
上传与下载
加载本地 .js 文件,或一键导出格式化结果。
可编辑输出
将结果面板切换到编辑模式,在复制前进行手动微调。
语法错误检测
如果你的代码无法被解析,格式化工具会显示清晰的错误信息,而不会生成损坏的输出——让你确切知道需要修复之处。状态栏会显示就绪、已格式化或错误,以及行数和文件大小。
常见问题
我的 JavaScript 代码会被发送到服务器吗?
不会。所有格式化都在你的浏览器本地完成。上传的文件由浏览器的 FileReader 读取,绝不会离开你的设备,因此该工具对专有和机密源代码都很安全。
格式化和压缩有什么区别?
格式化(美化)会添加缩进、换行和一致的间距,让代码易读。压缩则相反——它剥离空白以缩小文件体积。本工具用于美化;当你想为生产环境压缩代码时,请使用压缩工具。
它支持现代 ES6+ 和 JSX 语法吗?
支持。Babel 解析器可处理现代 JavaScript——箭头函数、async/await、解构、模板字符串、可选链和 JSX——因此当代代码能被正确格式化。
我可以自定义缩进和风格吗?
可以。缩进可选 2、3、4、8 个空格(或 Tab)并设置行宽,然后在工具栏中切换分号、引号风格和尾逗号。只要你更改任一选项,输出就会立即重新格式化。
格式化会改变我的代码运行结果吗?
不会。Prettier 只会重写空白和外观风格——缩进、引号、分号和换行。你的 JavaScript 行为保持完全不变。
如果我的代码有语法错误会怎样?
Prettier 无法格式化它无法解析的代码,因此工具会显示描述问题的错误信息,而不是胡乱猜测。修复所报告的问题后,代码一旦有效,格式化输出就会出现。
可格式化的代码有大小限制吗?
没有固定限制。由于格式化在浏览器中运行,速度取决于你的设备——在现代机器上,大文件也能在瞬间完成格式化;状态栏会显示行数和文件大小。
还没有评论,快来发表第一条!