js beautify
v1.15.1 ?
这个小美化器将重新格式化和重新缩进书签、丑陋的 JavaScript、解压由 Dean Edward 的流行打包器打包的脚本，以及部分反混淆由 npm 包 javascript-obfuscator 处理的脚本。
打开 beautifier.io 来尝试一下。可通过 UI 获取选项。
我把这个放在前面和中间是因为现有的业主目前处理这个项目的时间非常有限。这是一个受欢迎的项目并且被广泛使用，但它迫切需要贡献者有时间致力于修复客户面临的错误以及内部设计和实现的潜在问题。
如果您有兴趣，请查看 CONTRIBUTING.md，然后修复标有“Good first issues”标签的问题并提交 PR。尽可能多地重复。谢谢！
您可以安装 Node.js 或 Python 的美化器。
您可以安装 NPM 包js-beautify 。当全局安装时，它提供了一个可执行的js-beautify脚本。与 Python 脚本一样，除非另有配置，否则美化结果将发送到stdout 。
$ npm -g install js-beautify
$ js-beautify foo.js您还可以使用js-beautify作为node库（本地安装， npm默认）：
$ npm install js-beautify上面安装了最新的稳定版本。要安装 beta 或 RC 版本：
$ npm install js-beautify@next美化器可以作为网络库添加到您的页面上。
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版本的美化器：
$ pip install jsbeautifier与 JavaScript 版本不同，Python 版本只能重新格式化 JavaScript。它不适用于 HTML 或 CSS 文件，但您可以为 CSS 安装css-beautify ：
$ pip install cssbeautifier您可以在 Web 浏览器中使用 JS Beautifier 来美化 JavaScript，或者在命令行上使用 Node.js 或 Python。
打开beautifier.io。可通过 UI 获得选项。
在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 )
/* OUTPUT
{
"completed": false,
"id": 1,
"title": "delectus aut autem",
"userId": 1,
}
*/ 全局安装时，美化器提供可执行的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 Imports，您可以像这样导入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% 相同。还有一些其他情况使我们无法实现 100% API 兼容性。
除了 CLI 参数之外，您还可以通过以下方式将配置传递给 JS 可执行文件：
jsbeautify_为前缀的环境变量--config参数指示的JSON格式的文件.jsbeautifyrc文件，包含$PWD以上文件系统任何级别的JSON数据此堆栈中较早提供的配置源将覆盖较晚的配置源。
这些设置是一棵浅树，所有语言都继承其值，但可以覆盖。这适用于在任一实现中直接传递到 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
}
}使用上面的示例将得到以下结果：
indent_size 。end_with_newline设置。indent_size 。indent_size 。preserve-newlines设置为true 。 除了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
指令允许您从源文件中控制美化器的行为。指令放置在文件内的注释中。 CSS 和 JavaScript 中指令的格式为/* beautify {name}:{value} */ 。在 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 */如果您发现它有用或对您有用，您可以以任何您想要的方式自由使用它，但您必须保留版权声明和许可。 （麻省理工学院）
还要感谢 Jason Diamond、Patrick Hof、Nochum Sossonko、Andreas Schneider、Dave Vasilevsky、Vital Batmanov、Ron Baldwin、Gabriel Harrison、Chris J. Shull、Mathias Bynens、Vittorio Gambaletta 等人。
（自述文件.md：[email protected]）
