这个小美化工具可以重新格式化和重新缩进书签工具、难看的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个空格。
CSS文件
- 将顶级设置覆盖为1个空格的 indent_size。
JavaScript文件
- 从顶级设置继承4个空格的 indent_size。
- 将 preserve-newlines 设置为 true。

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 中，格式为 。

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 */

许可证

致谢

由 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）