JS 格式化

这个小美化器将重新格式化和重新缩进bookmarklet、丑陋的JavaScript、解压由Dean Edward的流行打包程序打包的脚本，以及对由NPM包处理的脚本进行部分去模糊处理javascript-obfuscator

我把这个放在最前面和中心，因为现有的业主目前在这个项目上的工作时间非常有限。这是一个很受欢迎并被广泛使用的项目，但它迫切需要有时间致力于修复面向客户的错误以及内部设计和实现的潜在问题的贡献者

如果您有兴趣，请看一下CONTRIBUTING.md然后修复标有“Good first issue”贴上标签并提交请购单。尽可能多地重复。谢谢!

安装

您可以安装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)

以上安装了最新的稳定版本。要安装测试版或RC版，请执行以下操作：

$ npm install js-beautify@next

Web库

美容师可以作为Web库添加到您的页面上

JS美颜托管在两个CDN服务上：cdnjs和生菜

要从这些服务之一提取最新版本，请在您的文档中包含以下一组脚本标记：

“>

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-html.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-html.min.js"></script>

<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.14.0/js/lib/beautify.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.14.0/js/lib/beautify-css.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.14.0/js/lib/beautify-html.js"></script>

通过更改版本号可以使用较旧的版本

免责声明：这些都是免费服务，所以有no uptime or support guarantees

python

要安装Python版本的美容器，请执行以下操作：

$ pip install jsbeautifier

与JavaScript版本不同，Python版本只能重新格式化JavaScript。它不适用于HTML或CSS文件，但您可以安装CSS-美化对于CSS：

$ pip install cssbeautifier

用法

您可以在Web浏览器中使用JS美化器美化javascript，也可以在命令行上使用node.js或python美化javascript

Web浏览器

打开beautifier.io选项通过UI提供

Web库

上面的脚本标记公开了三个函数：js_beautify，css_beautify，以及html_beautify

Node.js JavaScript

全局安装时，美容器提供一个可执行文件js-beautify剧本。美化结果发送到stdout除非另有配置，否则

$ js-beautify foo.js

要使用js-beautify作为一个node库(在本地安装之后)，为javascript(Js)、CSS或HTML导入并调用适当的Beautifier方法。所有三个方法签名都是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,
    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 }));
});

python

安装后，要使用Python进行美化，请执行以下操作：

$ js-beautify file.js

美化的产出流向stdout默认情况下，

要使用jsbeautifier因为库很简单：

import jsbeautifier
res = jsbeautifier.beautify('your javascript string')
res = jsbeautifier.beautify_file('some_file.js')

或者，要指定一些选项，请执行以下操作：

opts = jsbeautifier.default_options()
opts.indent_size = 2
opts.space_in_empty_paren = True
res = jsbeautifier.beautify('some javascript', opts)

配置选项名称与CLI名称相同，但使用下划线而不是破折号。上面的示例将在命令行上设置为--indent-size 2 --space-in-empty-paren

选项

以下是Python和JS脚本的命令行标志：

CLI Options:
  -f, --file       Input file(s) (Pass '-' for stdin)
  -r, --replace    Write output in-place, replacing input
  -o, --outfile    Write output to file (default stdout)
  --config         Path to config file
  --type           [js|css|html] ["js"] Select beautifier type (NOTE: Does *not* filter files, only defines which beautifier type to run)
  -q, --quiet      Suppress logging to stdout
  -h, --help       Show this help
  -v, --version    Show the version

Beautifier Options:
  -s, --indent-size                 Indentation size [4]
  -c, --indent-char                 Indentation character [" "]
  -t, --indent-with-tabs            Indent with tabs, overrides -s and -c
  -e, --eol                         Character(s) to use as line terminators.
                                    [first newline in file, otherwise "\n]
  -n, --end-with-newline            End output with newline
  --editorconfig                    Use EditorConfig to set up the options
  -l, --indent-level                Initial indentation level [0]
  -p, --preserve-newlines           Preserve line-breaks (--no-preserve-newlines disables)
  -m, --max-preserve-newlines       Number of line-breaks to be preserved in one chunk [10]
  -P, --space-in-paren              Add padding spaces within paren, ie. f( a, b )
  -E, --space-in-empty-paren        Add a single space inside empty paren, ie. f( )
  -j, --jslint-happy                Enable jslint-stricter mode
  -a, --space-after-anon-function   Add a space before an anonymous function's parens, ie. function ()
  --space-after-named-function      Add a space before a named function's parens, i.e. function example ()
  -b, --brace-style                 [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline]
  -u, --unindent-chained-methods    Don't indent chained method calls
  -B, --break-chained-methods       Break chained method calls across subsequent lines
  -k, --keep-array-indentation      Preserve array indentation
  -x, --unescape-strings            Decode printable characters encoded in xNN notation
  -w, --wrap-line-length            Wrap lines that exceed N characters [0]
  -X, --e4x                         Pass E4X xml literals through untouched
  --good-stuff                      Warm the cockles of Crockford's heart
  -C, --comma-first                 Put commas at the beginning of new line instead of end
  -O, --operator-position           Set operator position (before-newline|after-newline|preserve-newline) [before-newline]
  --indent-empty-lines              Keep indentation on empty lines
  --templating                      List of templating languages (auto,django,erb,handlebars,php,smarty) ["auto"] auto = none in JavaScript, all in html

它们对应于两个库接口的带下划线的选项键

每个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和JSAPI并不是100%相同的。还有一些其他情况使我们无法实现100%的API兼容性

从环境或.jsBeaufyrc加载设置(仅限JavaScript)

除了CLI参数之外，您还可以通过以下方式将配置传递给JS可执行文件：

任何jsbeautify_-带前缀的环境变量
一个JSON-由指示的格式化文件--config参数
一个.jsbeautifyrc包含以下内容的文件JSON以上文件系统的任何级别的数据$PWD

此堆栈中前面提供的配置源将覆盖后面的配置源

设置继承和特定于语言的重写

这些设置是一个浅树，其值对于所有语言都是继承值，但可以被覆盖。这适用于在任一实现中直接传递给API的设置。在Javascript实现中，从配置文件(如.jsBeaufyrc)加载的设置也可以使用继承/覆盖

下面是一个示例配置树，显示了语言覆盖节点的所有支持位置。我们将使用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文件
- 继承indent_size从顶层设置开始，共4个空间
- 这些文件还将以换行符结尾
- HTML中的JavaScript和CSS
  - 继承HTMLend_with_newline设置
  - 将它们的缩进覆盖为2个空格
CSS文件
- 将顶级设置重写为indent_size共1个空间
JavaScript文件
- 继承indent_size从顶层设置开始，共4个空间
- 设置preserve-newlines至true

CSS和HTML

除了js-beautify可执行文件，css-beautify和html-beautify还提供了进入这些脚本的简单界面。或者，js-beautify --css或js-beautify --html将分别完成相同的任务

// Programmatic access
var beautify_js = require('js-beautify'); // also available under "js" export
var beautify_css = require('js-beautify').css;
var beautify_html = require('js-beautify').html;

// All methods accept two arguments, the string to be beautified, and an options object.

CSS和HTML美化程序在范围上要简单得多，并且拥有的选项要少得多

CSS Beautifier Options:
  -s, --indent-size                  Indentation size [4]
  -c, --indent-char                  Indentation character [" "]
  -t, --indent-with-tabs             Indent with tabs, overrides -s and -c
  -e, --eol                          Character(s) to use as line terminators. (default newline - "\\n")
  -n, --end-with-newline             End output with newline
  -b, --brace-style                  [collapse|expand] ["collapse"]
  -L, --selector-separator-newline   Add a newline between multiple selectors
  -N, --newline-between-rules        Add a newline between CSS rules
  --indent-empty-lines               Keep indentation on empty lines

HTML Beautifier Options:
  -s, --indent-size                  Indentation size [4]
  -c, --indent-char                  Indentation character [" "]
  -t, --indent-with-tabs             Indent with tabs, overrides -s and -c
  -e, --eol                          Character(s) to use as line terminators. (default newline - "\\n")
  -n, --end-with-newline             End output with newline
  -p, --preserve-newlines            Preserve existing line-breaks (--no-preserve-newlines disables)
  -m, --max-preserve-newlines        Maximum number of line-breaks to be preserved in one chunk [10]
  -I, --indent-inner-html            Indent <head> and <body> sections. Default is false.
  -b, --brace-style                  [collapse-preserve-inline|collapse|expand|end-expand|none] ["collapse"]
  -S, --indent-scripts               [keep|separate|normal] ["normal"]
  -w, --wrap-line-length             Maximum characters per line (0 disables) [250]
  -A, --wrap-attributes              Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline|aligned-multiple|preserve|preserve-aligned] ["auto"]
  -i, --wrap-attributes-indent-size  Indent wrapped attributes to after N characters [indent-size] (ignored if wrap-attributes is "aligned")
  -d, --inline                       List of tags to be considered inline tags
  -U, --unformatted                  List of tags (defaults to inline) that should not be reformatted
  -T, --content_unformatted          List of tags (defaults to pre) whose content should not be reformatted
  -E, --extra_liners                 List of tags (defaults to [head,body,/html] that should have an extra newline before them.
  --editorconfig                     Use EditorConfig to set up the options
  --indent_scripts                   Sets indent level inside script tags ("normal", "keep", "separate")
  --unformatted_content_delimiter    Keep text content together between this string [""]
  --indent-empty-lines               Keep indentation on empty lines
  --templating                       List of templating languages (auto,none,django,erb,handlebars,php,smarty) ["auto"] auto = none in JavaScript, all in html

指令

指令允许您从源文件中控制美化器的行为。指令放在文件内部的注释中。指令的格式为/* beautify {name}:{value} */用CSS和JavaScript编写。在HTML中，它们的格式为

忽略指令

这个ignore指令使美化器完全忽略文件的一部分，将其视为不解析的文字文本。美化后以下输入保持不变：

// Use ignore when the content is not parsable in the current language, JavaScript in this case.var a =  1;/* beautify ignore:start */ {This is some strange{template language{using open-braces?/* beautify ignore:end */

保留指令

注意：此指令仅适用于HTML和JavaScript，不适用于CSS

这个preserve指令使美化器解析，然后保留一段代码的现有格式

美化后以下输入保持不变：

// Use preserve when the content is valid syntax in the current language, JavaScript in this case.
// This will parse the code and preserve the existing formatting.
/* beautify preserve:start */
{
    browserName: 'internet explorer',
    platform:    'Windows 7',
    version:     '8'
}
/* beautify preserve:end */

许可证

学分

由埃纳尔·利尔马尼斯创建，einar@beautifier.io
Python版本由Stefano Sanfilippo蓬勃发展a.little.coder@gmail.com
Daniel Stockman提供的node.js命令行daniel.stockman@gmail.com
利亚姆·纽曼(Liam Newman)维护和扩展bitwiseman@beautifier.io

还要感谢杰森·戴蒙德、帕特里克·霍夫、诺姆·索松科、安德烈亚斯·施耐德、戴夫·瓦西列夫斯基、维塔利·巴特马诺夫、罗恩·鲍德温、加布里埃尔·哈里森、克里斯·J·舒尔、马蒂亚斯·拜恩斯、维托里奥·甘巴莱塔等人

(Readme.md：js-Beautify@1.14.0)

Python 实用宝典

Js-beautify-javascript 格式化工具

JS 格式化

安装

Node.js JavaScript

Node.js JavaScript(VNext)

Web库

python

用法

Web浏览器

Web库

Node.js JavaScript

python

选项

从环境或.jsBeaufyrc加载设置(仅限JavaScript)

设置继承和特定于语言的重写

CSS和HTML

指令

忽略指令

保留指令

许可证

学分

有趣好用的Python教程