这个小美化工具可以重新格式化和重新缩进书签工具、难看的JavaScript代码,解包由Dean Edward流行的打包器打包的脚本,以及部分反混淆由npm包javascript-obfuscator处理过的脚本。
打开beautifier.io来试用。可以通过用户界面设置选项。
需要贡献者
我将这一点放在最前面是因为现有的维护者目前几乎没有时间来处理这个项目。 这是一个流行且广泛使用的项目,但它迫切需要有时间致力于修复客户面临的bug以及内部设计和实现中潜在问题的贡献者。
如果你有兴趣,请查看CONTRIBUTING.md,然后修复一个标记为"Good first issue"的问题并提交PR。尽可能多地重复这个过程。谢谢!
安装
你可以为Node.js或Python安装美化工具。
Node.js JavaScript
你可以安装NPM包js-beautify
。全局安装时,它提供一个可执行的js-beautify
脚本。与Python脚本一样,美化后的结果会发送到stdout
,除非另有配置。
$ npm -g install js-beautify
$ js-beautify foo.js
你也可以将js-beautify
作为node
库使用(本地安装,npm默认):
$ npm install js-beautify
Node.js JavaScript (vNext)
上面安装的是最新稳定版本。要安装beta版或RC版本:
$ npm install js-beautify@next
Web库
美化工具可以作为web库添加到你的页面中。
JS Beautifier托管在两个CDN服务上:cdnjs和rawgit。
要从这些服务中获取最新版本,在你的文档中包含以下一组脚本标签:
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-html.min.js"></script>
在html中使用JS标签的示例:
<!DOCTYPE html>
<html lang="en">
<body>
. . .
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.min.js"></script>
<script src="script.js"></script>
</body>
</html>
通过更改版本号可以使用旧版本。
免责声明:这些是免费服务,所以没有保证正常运行时间或支持。
Python
要安装Python版本的美化工具:
$ pip install jsbeautifier
与JavaScript版本不同,Python版本只能重新格式化JavaScript。它不适用于HTML或CSS文件,但你可以为CSS安装_css-beautify_:
$ pip install cssbeautifier
使用方法
你可以在网页浏览器中使用JS Beautifier美化JavaScript,或在命令行中使用Node.js或Python。
网页浏览器
打开beautifier.io。可以通过用户界面设置选项。
Web库
在你的html
文件中嵌入<script>
标签后,它们会暴露三个函数:js_beautify
、css_beautify
和html_beautify
美化JSON字符串的示例用法:
const options = { indent_size: 2, space_in_empty_paren: true }
const dataObj = {completed: false,id: 1,title: "delectus aut autem",userId: 1,}
const dataJson = JSON.stringify(dataObj)
js_beautify(dataJson, options)
/* 输出
{
"completed": false,
"id": 1,
"title": "delectus aut autem",
"userId": 1,
}
*/
Node.js JavaScript
全局安装时,美化工具提供一个可执行的js-beautify
脚本。美化后的结果会发送到stdout
,除非另有配置。
$ js-beautify foo.js
要将 js-beautify
作为 node
库使用(在本地安装后),请导入并调用适用于JavaScript(JS)、CSS或HTML的相应美化方法。这三种方法的签名都是 beautify(code, options)
。code
是要美化的代码字符串。options 是一个包含您希望用于美化代码的设置的对象。
配置选项名称与CLI名称相同,但使用下划线而不是破折号。例如,--indent-size 2 --space-in-empty-paren
对应的是 { indent_size: 2, space_in_empty_paren: true }
。
var beautify = require('js-beautify/js').js,
fs = require('fs');
fs.readFile('foo.js', 'utf8', function (err, data) {
if (err) {
throw err;
}
console.log(beautify(data, { indent_size: 2, space_in_empty_paren: true }));
});
如果您使用ESM导入,可以这样导入 js-beautify
:
// 这里的'beautify'可以是任何名称。
import beautify from 'js-beautify';
beautify.js(data, options);
beautify.html(data, options);
beautify.css(data, options);
Python
安装后,使用Python进行美化:
$ js-beautify file.js
默认情况下,美化后的输出会发送到 stdout
。
将 jsbeautifier
作为库使用很简单:
import jsbeautifier
res = jsbeautifier.beautify('你的JavaScript字符串')
res = jsbeautifier.beautify_file('某个文件.js')
...或者,指定一些选项:
opts = jsbeautifier.default_options()
opts.indent_size = 2
opts.space_in_empty_paren = True
res = jsbeautifier.beautify('一些JavaScript代码', opts)
配置选项名称与CLI名称相同,但使用下划线而不是破折号。上面的例子在命令行中会设置为 --indent-size 2 --space-in-empty-paren
。
选项
以下是Python和JS脚本的命令行标志:
CLI选项:
-f, --file 输入文件(传入'-'表示标准输入)
-r, --replace 就地写入输出,替换输入
-o, --outfile 将输出写入文件(默认为标准输出)
--config 配置文件路径
--type [js|css|html] ["js"] 选择美化器类型(注意:不会过滤文件,只定义要运行的美化器类型)
-q, --quiet 禁止向标准输出记录日志
-h, --help 显示此帮助
-v, --version 显示版本
美化器选项:
-s, --indent-size 缩进大小 [4]
-c, --indent-char 缩进字符 [" "]
-t, --indent-with-tabs 使用制表符缩进,覆盖 -s 和 -c
-e, --eol 用作行终止符的字符
[文件中的第一个换行符,否则为"\n"]
-n, --end-with-newline 以换行符结束输出
--editorconfig 使用EditorConfig设置选项
-l, --indent-level 初始缩进级别 [0]
-p, --preserve-newlines 保留换行符(--no-preserve-newlines禁用)
-m, --max-preserve-newlines 在一个块中保留的最大换行符数 [10]
-P, --space-in-paren 在括号内添加填充空格,例如 f( a, b )
-E, --space-in-empty-paren 在空括号内添加单个空格,例如 f( )
-j, --jslint-happy 启用jslint更严格模式
-a, --space-after-anon-function 在匿名函数的括号前添加空格,例如 function ()
--space-after-named-function 在命名函数的括号前添加空格,例如 function example ()
-b, --brace-style [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline]
-u, --unindent-chained-methods 不缩进链式方法调用
-B, --break-chained-methods 在后续行上断开链式方法调用
-k, --keep-array-indentation 保留数组缩进
-x, --unescape-strings 解码以xNN表示法编码的可打印字符
-w, --wrap-line-length 换行超过N个字符的行 [0]
-X, --e4x 保持E4X xml字面量不变
--good-stuff 温暖Crockford的心
-C, --comma-first 将逗号放在新行的开头而不是结尾
-O, --operator-position 设置运算符位置 (before-newline|after-newline|preserve-newline) [before-newline]
--indent-empty-lines 保持空行的缩进
--templating 模板语言列表 (auto,django,erb,handlebars,php,smarty,angular) ["auto"] auto = JavaScript中为none,HTML中为all
这些对应于两个库接口的下划线选项键
CLI选项的默认值
{
"indent_size": 4,
"indent_char": " ",
"indent_with_tabs": false,
"editorconfig": false,
"eol": "\n",
"end_with_newline": false,
"indent_level": 0,
"preserve_newlines": true,
"max_preserve_newlines": 10,
"space_in_paren": false,
"space_in_empty_paren": false,
"jslint_happy": false,
"space_after_anon_function": false,
"space_after_named_function": false,
"brace_style": "collapse",
"unindent_chained_methods": false,
"break_chained_methods": false,
"keep_array_indentation": false,
"unescape_strings": false,
"wrap_line_length": 0,
"e4x": false,
"comma_first": false,
"operator_position": "before-newline",
"indent_empty_lines": false,
"templating": ["auto"]
}
未在CLI中公开的默认值
{
"eval_code": false,
"space_before_conditional": true
}
请注意,并非所有默认值都通过CLI公开。历史上,Python和JS API并不是100%相同的。仍然存在一些其他情况使我们无法达到100%的API兼容性。
从环境或.jsbeautifyrc加载设置(仅限JavaScript)
除了CLI参数外,您还可以通过以下方式向JS可执行文件传递配置:
- 任何以
jsbeautify_
为前缀的环境变量 - 由
--config
参数指定的JSON
格式文件 - 在
$PWD
上方文件系统的任何级别包含JSON
数据的.jsbeautifyrc
文件
在此堆栈中较早提供的配置源将覆盖较晚的配置源。
设置继承和特定语言覆盖
设置是一个浅层树,其值被所有语言继承,但可以被覆盖。这适用于直接传递给任一实现中API的设置。在JavaScript实现中,从配置文件(如.jsbeautifyrc)加载的设置也可以使用继承/覆盖。
下面是一个配置树示例,显示了语言覆盖节点的所有支持位置。我们将使用 indent_size
来讨论此配置的行为,但任意数量的设置都可以被继承或覆盖:
{
"indent_size": 4,
"html": {
"end_with_newline": true,
"js": {
"indent_size": 2
},
"css": {
"indent_size": 2
}
},
"css": {
"indent_size": 1
},
"js": {
"preserve-newlines": true
}
}
使用上述示例将产生以下结果:
- HTML文件
- 从顶级设置继承4个空格的
indent_size
。 - 文件也会以换行符结束。
- HTML内的JavaScript和CSS
- 继承HTML的
end_with_newline
设置。 - 将它们的缩进覆盖为2个空格。
- 继承HTML的
- 从顶级设置继承4个空格的
- CSS文件
- 将顶级设置覆盖为1个空格的
indent_size
。
- 将顶级设置覆盖为1个空格的
- JavaScript文件
- 从顶级设置继承4个空格的
indent_size
。 - 将
preserve-newlines
设置为true
。
- 从顶级设置继承4个空格的
CSS和HTML
除了 js-beautify
可执行文件外,还提供了 css-beautify
和 html-beautify
作为这些脚本的简易接口。另外,使用 js-beautify --css
或 js-beautify --html
也可以分别实现相同的功能。
// 程序化访问
var beautify_js = require('js-beautify'); // 也可通过"js"导出获得
var beautify_css = require('js-beautify').css;
var beautify_html = require('js-beautify').html;
// 所有方法接受两个参数:要美化的字符串和一个选项对象。
CSS 和 HTML 美化器的范围更简单,选项也少得多。
CSS 美化器选项:
-s, --indent-size 缩进大小 [4]
-c, --indent-char 缩进字符 [" "]
-t, --indent-with-tabs 使用制表符缩进,覆盖 -s 和 -c
-e, --eol 用作行终止符的字符(默认换行符 - "\\n")
-n, --end-with-newline 输出以换行符结束
-b, --brace-style [collapse|expand] ["collapse"]
-L, --selector-separator-newline 在多个选择器之间添加换行符
-N, --newline-between-rules 在 CSS 规则之间添加换行符
--indent-empty-lines 保持空行的缩进
HTML 美化器选项:
-s, --indent-size 缩进大小 [4]
-c, --indent-char 缩进字符 [" "]
-t, --indent-with-tabs 使用制表符缩进,覆盖 -s 和 -c
-e, --eol 用作行终止符的字符(默认换行符 - "\\n")
-n, --end-with-newline 输出以换行符结束
-p, --preserve-newlines 保留现有换行符(--no-preserve-newlines 禁用)
-m, --max-preserve-newlines 在一个块中保留的最大换行符数 [10]
-I, --indent-inner-html 缩进 <head> 和 <body> 部分。默认为 false。
-b, --brace-style [collapse-preserve-inline|collapse|expand|end-expand|none] ["collapse"]
-S, --indent-scripts [keep|separate|normal] ["normal"]
-w, --wrap-line-length 每行最大字符数(0 表示禁用)[250]
-A, --wrap-attributes 将属性换行 [auto|force|force-aligned|force-expand-multiline|aligned-multiple|preserve|preserve-aligned] ["auto"]
-M, --wrap-attributes-min-attrs 强制换行属性选项的最小 HTML 标签属性数 [2]
-i, --wrap-attributes-indent-size 将换行的属性缩进到 N 个字符之后 [indent-size](如果 wrap-attributes 为 "aligned" 则忽略)
-d, --inline 被视为内联标签的标签列表
--inline_custom_elements 内联自定义元素 [true]
-U, --unformatted 不应重新格式化的标签列表(默认为内联标签)
-T, --content_unformatted 内容不应重新格式化的标签列表(默认为 pre)
-E, --extra_liners 应在其前面添加额外换行符的标签列表(默认为 [head,body,/html])
--editorconfig 使用 EditorConfig 设置选项
--indent_scripts 设置脚本标签内的缩进级别("normal"、"keep"、"separate")
--unformatted_content_delimiter 在此字符串之间保持文本内容在一起 [""]
--indent-empty-lines 保持空行的缩进
--templating 模板语言列表(auto,none,django,erb,handlebars,php,smarty,angular)["auto"] auto = JavaScript 中为 none,HTML 中为全部
指令
指令让你可以从源文件内控制美化器的行为。指令放在文件内的注释中。在 CSS 和 JavaScript 中,指令的格式为 /* beautify {name}:{value} */
。在 HTML 中,格式为 <!-- beautify {name}:{value} -->
。
Ignore 指令
ignore
指令使美化器完全忽略文件的一部分,将其视为不解析的文字内容。
下面的输入在美化后将保持不变:
// 当内容在当前语言(本例中为 JavaScript)中无法解析时使用 ignore
var a = 1;
/* beautify ignore:start */
{This is some strange{template language{using open-braces?
/* beautify ignore:end */
Preserve 指令
注意:此指令仅在 HTML 和 JavaScript 中有效,不适用于 CSS。
preserve
指令使美化器解析然后保留代码部分的现有格式。
下面的输入在美化后将保持不变:
// 当内容是当前语言(本例中为 JavaScript)的有效语法时使用 preserve。
// 这将解析代码并保留现有格式。
/* beautify preserve:start */
{
browserName: 'internet explorer',
platform: 'Windows 7',
version: '8'
}
/* beautify preserve:end */
许可证
如果你发现这个有用或适合你,你可以自由地以任何方式使用它,但你必须保留版权声明和许可证。(MIT)
致谢
- 由 Einar Lielmanis 创建,einar@beautifier.io
- Python 版本由 Stefano Sanfilippo 发展,a.little.coder@gmail.com
- Node.js 命令行版本由 Daniel Stockman 开发,daniel.stockman@gmail.com
- 由 Liam Newman 维护和扩展,bitwiseman@beautifier.io
同时感谢 Jason Diamond、Patrick Hof、Nochum Sossonko、Andreas Schneider、Dave Vasilevsky、Vital Batmanov、Ron Baldwin、Gabriel Harrison、Chris J. Shull、 Mathias Bynens、Vittorio Gambaletta 等人。
(README.md:js-beautify@1.15.1)