js-beautify 是一个面向网页开发代码的在线格式化工具,官网页面直接提供 JavaScript、JSON、React.js、HTML、CSS、SCSS 和 SASS 的美化入口。它将代码输入、格式化选项和结果操作集中在同一个页面中,用户可以调整缩进、换行、括号及 HTML 标签相关规则,再复制或下载处理后的代码。与只针对单一语言的格式化工具相比,js-beautify 同时覆盖脚本、标记语言和样式代码,并将同一套格式化能力扩展到了命令行、Python 库、Node 包以及多种编辑器和浏览器扩展场景。
核心功能
JavaScript 与 JSX 格式化
页面提供 JavaScript 美化功能,可处理压缩或排版混乱的脚本,并通过缩进、换行、括号位置等选项控制结果样式。设置中包含“Support e4x/jsx syntax”,因此页面明确提供了对 E4X/JSX 语法的支持选项;同时还可以选择是否保留行内括号和代码块、是否保持数组缩进,以及是否在链式方法处断行。
JSON 美化与设置校验
js-beautify 将 JSON 列为支持的代码类型,页面还提供 Additional Settings 的 JSON 输入区域。官网页面显示了“Could Not Parse JSON!”提示,说明当附加设置内容无法解析时会反馈解析错误;格式化结果仍可通过复制或下载操作使用。
HTML、CSS、SCSS 与 SASS 处理
工具支持 HTML、CSS、SCSS 和 SASS 美化。针对 HTML,选项可以设置 style、script 标签内部代码的缩进方式,也可以控制 head 和 body 区域的缩进;针对 HTML 属性,则提供过长时换行、每个属性单独换行、对齐属性、保留原有换行等方式。
缩进、换行与括号规则
页面提供使用制表符或 2、3、4、8 个空格进行缩进的选项,也能移除多余空行,或在 token 之间允许 1、2、5、10 个以及不限数量的换行。代码行可以选择不换行,或接近 40、70、80、110、120、160 个字符时换行;括号还可以跟随控制语句、独占一行、结束括号独占一行,或尽量保持原位置。
输入、结果与页面操作
官网提供代码输入编辑区域,并列出“Beautify Code”“Copy to Clipboard”“Download”“Select All”“Clear”等操作。页面还提供使用简单 textarea 代替 CodeMirror 编辑器的入口;默认页面使用 CodeMirror 语法高亮编辑器,该编辑器由 Marijn Haverbeke 编写。
多端与开发工具集成
项目除了网页端,还提供 command-line version、Python library 和 node package。官网列出了 bookmarklet,以及 Chrome、Firefox、Safari、Opera 浏览器相关扩展或工具,并提到 Visual Studio Code、Sublime Text、vim、Emacs、Komodo IDE、Fiddler、Cloud9、Burp Suite、NetBeans、Adobe Brackets 等环境中的插件、扩展或集成使用方式。
使用方式
网页端通过编辑区域输入代码,选择语言和格式化选项后执行“Beautify Code”,再复制到剪贴板或下载结果。页面支持使用 CodeMirror 编辑器,也可切换为简单 textarea。项目同时提供命令行版本、Python library 和 Node package;官网还列出 bookmarklet、浏览器扩展及多个编辑器插件。正文没有说明注册要求,也没有提到需要自备模型 Key 或提供 API。
适用人群与场景
网页开发者可以用它整理 JavaScript、JSX、HTML 和样式代码的缩进、换行与括号格式。需要查看网页源代码的用户可以使用 bookmarklet 或浏览器相关工具,整理页面中使用的脚本。使用 Sublime Text、vim、Emacs、Visual Studio Code、Cloud9 等开发环境的用户,可以参考官网列出的对应插件或集成。进行请求调试或代理分析的用户,则可使用官网提到的 REST Console、mitmproxy 和 Burp Suite 等场景中的 beautifier 扩展或能力。
定价
官网明确说明“All of the source code is completely free and open”,并表示代码以 MIT licence 开放在 GitHub 上。正文没有列出付费档位、调用额度或账户套餐;网页工具、命令行版本、Python library 和 Node package 均未标注单独收费信息。