跳到主要内容
项目详情

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 均未标注单独收费信息。

多语言代码美化支持 JavaScript、JSON、React.js、HTML、CSS、SCSS 和 SASS 的代码格式化。
格式化规则可调可设置缩进方式、空行数量、行宽、括号位置以及 HTML 标签和属性的排版方式。
复制与下载结果格式化后可以复制到剪贴板、下载结果、全选或清空编辑区域。
命令行与开发工具支持提供命令行版本、Python library、Node package,并列出多种浏览器扩展和编辑器插件。
多种输入编辑方式默认使用 CodeMirror 语法高亮编辑器,也提供使用简单 textarea 输入代码的选项。

用户评论 (0)

还没有用户评论

成为第一个分享使用体验的人

查看更多

js-beautify 截图

官网首页截图

写评论

分享你的使用体验,至少 10 个字。评论可以发多条,打分在右侧卡片单独进行。

还需 10 个字 · 0 / 500