这个小美人会重塑和重缩书签,丑陋 JavaScript,由迪恩·爱德华的受欢迎的打包工包装的无包装脚本, 以及由 npm 软件包处理的部分解析脚本 javascript- 显示器。 。 。 .

打开 美化器.io 试试看 选项可通过用户界面获取.

需要捐款者

我把这个前面和中央放在上面, 因为现有的业主现在在这个项目上工作的时间非常有限. 这是一个很受欢迎的项目,而且被广泛使用,但是它迫切需要那些有时间致力于修复两者的捐助者 客户面临错误以及内部设计和实施的根本问题.

如果你有兴趣,请看一下 捐款额 然后将问题固定为 "好第一期"(第一期) 标签并提交 PR。 越发重复. 谢谢!

安装

你可以为Node.js或Python安装美化器.

节点.js JavaScript

您可以安装国家防范机制软件包 js-beautify。在全球安装时,它提供了可执行文件 js-beautify 剧本. 和Python脚本一样,美化的结果被发送到 stdout 除非另有配置.

$ npm -g install js-beautify
$ js-beautify foo.js

您还可以使用 js-beautify 作为 node 库(在本地安装 npm 默认 :

$ npm install js-beautify

节点. js JavaScript (vNext)

以上安装最新稳定放出. 要安装β或RC版本 :

$ npm install js-beautify@next

Web 图书馆

美人可以添加到您的网页上作为网页库.

JS Beautifer在两个CDN服务上提供: (简体中文) 和生猪.

要从其中一项服务中提取最新版本,文档中包含下面的一组脚本标记 :

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.4/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.4/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.4/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.4/beautify.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

旧版本通过更改版本编号来提供.

免责声明:这些都是免费服务,所以有 没有准备时间或支持保证。 。 。 .

蟒

要安装美化器的 Python 版本 :

$ pip install jsbeautifier

与JavaScript版本不同,Python版本只能重塑JavaScript. 与 HTML 或 CSS 文件无关, 但您可以安装 css- 美化( c) 支助科:

$ pip install cssbeautifier

使用量

您可以在您的网页浏览器中使用 JS Beautifer 来美化 JavaScript, 或者在命令行中使用 Node.js 或 Python .

网页浏览器

打开 美化器.io。可通过用户界面提供选项.

Web 图书馆

装入后 <script> 在您的标签 html 文件,它们会显示三种功能: 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)

/* OUTPUT
{
  "completed": false,
  "id": 1,
  "title": "delectus aut autem",
  "userId": 1,
}
*/

节点.js JavaScript

全球安装时, 美容器提供可执行文件 js-beautify 剧本. 美容结果发给 stdout 除非另有配置.

$ js-beautify foo.js

用于 js-beautify 作为 node 库(在本地安装后),导入并调用JavaScript(JS),CSS,或HTML的适当美化方法. 所有三种方法签名都是 beautify(code, options)。 。 。 . code 是要被美化的代码串。 选项是带有您想要用来美化代码的设置的对象.

配置选项名称与 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' can be any name here.
import beautify from 'js-beautify';

beautify.js(data, options);
beautify.html(data, options);
beautify.css(data, options);

蟒

安装后, 使用 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,angular) ["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和 JS API并非完全相同. 还有一个 很少有其他案例 阻止我们100%的API兼容性.

从环境或.jsbeautifilic( JavaScript- Only) 装入设置

除了CLI的论据外,您还可以通过下列途径向JS可执行文件传递配置:

• 任意 jsbeautify_- 前置环境变量
• (单位:千美元) JSON- 格式化文件,由 --config 参数
• (单位:千美元) .jsbeautifyrc 包含的文件 JSON 以上文件系统任何级别的数据 $PWD

此堆栈中早先提供的配置源将覆盖后面的 .

设置继承和特定语言的覆盖

这些设置是浅树,其价值被所有语言所继承,但是 可以被推翻。 这适用于在实施中直接传递给API的设置. 在JavaScript执行中,从一个配置文件中加载的设置,如.jsbeautificrc,也可以使用继承/覆盖.

下面是显示所有支持位置的示例配置树 用于语言覆盖节点。 我们用 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
    • 继承 HTML end_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"]
  -M, --wrap-attributes-min-attrs    Minimum number of html tag attributes for force wrap attribute options [2]
  -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
  --inline_custom_elements           Inline custom elements [true]
  -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,angular) ["auto"] auto = none in JavaScript, all in html

指令

指令允许您从源文件中控制 Beautier 的行为 。 指令被放在文件内部的评论中. 指令的格式 /* beautify {name}:{value} */ 在 CSS 和 JavaScript 中。 HTML 格式化为 <!-- beautify {name}:{value} -->。 。 。 .

忽略指令

这个 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 指令使Beautifier 解析,然后保留代码一节的现有格式.

以下投入在美化后保持不变:

// 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@ beautifer.io
• Python 版本由 Stefano Sanfilippo 所繁荣 a. [email protected] (中文(简体) )
• 丹尼尔·斯托克曼的节点J命令线 丹尼尔·斯托克曼@gmail.com
• 由Liam Newman维护和扩建 比特睿曼@ beautifer.io

还感谢杰森·戴蒙德,帕特里克·霍夫,诺克洪·索松克,安德烈亚斯·施耐德,戴夫 瓦西里耶夫斯基 维塔利·蝙蝠侠诺夫 罗恩·鲍德温 加布里埃尔·哈里森 克里斯·J·舒尔, 马蒂亚斯·拜恩斯,维托里奥·甘巴莱塔等.

(README.MD: (英语) js- [email protected] (法语)(中文(简体) )