JS ビューティファイア
この小さな美化ツールは、ブックマークレット、醜い JavaScript、Dean Edward の人気パッカーによってパックされたスクリプトの再フォーマットと再インデント、および javascriptobfuscator.comによって処理されたスクリプトの難読化解除を行います。
貢献者が必要です
既存の所有者が現在このプロジェクトに取り組む時間が非常に限られているため、これを前面に出して中心に置いています. これは人気のあるプロジェクトであり、広く使用されていますが、顧客が直面しているバグと根本的な問題の両方を修正することに専念する時間のある貢献者が必死に必要です.内部設計と実装。
興味のある方はぜひご覧くださいCONTRIBUTING.md次に、 「Good first issue」ラベルが付いた問題を修正し、PR を送信します。できるだけ頻繁に繰り返します。ありがとうございます。
使用法
Web ブラウザーで JS Beautifier を使用するか、node.js または python を使用してコマンドラインで JavaScript を美しくすることができます。
JS Beautifier は、cdnjsと rawgit の 2 つの CDN サービスでホストされています。
これらのサービスのいずれかからプルするには、ドキュメントに以下のスクリプト タグのセットを 1 つ含めます。
1
2
3
4
5
6
7
8
9
10
11<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-html.min.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.7.5/js/lib/beautify.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.7.5/js/lib/beautify-css.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.7.5/js/lib/beautify-html.js"></script>
免責事項: これらは無料のサービスであるため、アップタイムやサポートの保証はありません。
ウェブブラウザ
Open jsbeautifier.org . UI からオプションを利用できます。
パイソン
Python を使用して美化するには:
1
2$ pip install jsbeautifier
$ js-beautify file.js
美化された出力は に行きますstdout
。
jsbeautifier
ライブラリとして使用するのは簡単です:
1
2
3import jsbeautifier
res = jsbeautifier.beautify('your javascript string')
res = jsbeautifier.beautify_file('some_file.js')
...または、いくつかのオプションを指定するには:
1
2
3
4opts = jsbeautifier.default_options()
opts.indent_size = 2
opts.space_in_empty_paren = True
res = jsbeautifier.beautify('some javascript', opts)
The configuration option names are same as the CLI names but with underscores instead of dashes. 上記の例は、コマンドラインで として設定されます--indent-size 2 --space-in-empty-paren
。
JavaScript
Python スクリプトの代わりに、NPM パッケージをインストールすることもできますjs-beautify
. グローバルにインストールすると、実行可能なスクリプトが提供されますjs-beautify
. Python スクリプトと同様に、stdout
特に設定しない限り、美化された結果が に送信されます.
1
2$ npm -g install js-beautify
$ js-beautify foo.js
js-beautify
ライブラリとして使用することもできますnode
(ローカルにインストール、npm
デフォルト):
1$ npm install js-beautify
javascript (js)、css、または html の適切な beautifier メソッドをインポートして呼び出します。3 つのすべてのメソッド シグネチャは次のとおりです。. は、beautify(code, options)
美化code
するコードの文字列です。options は、コードを美化するために使用する設定を持つオブジェクトです。
構成オプション名は CLI 名と同じですが、ダッシュの代わりにアンダースコアが--indent-size 2 --space-in-empty-paren
使用されています{ indent_size: 2, space_in_empty_paren: true }
。
1
2
3
4
5
6
7
8
9var 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 スクリプトと JS スクリプトの両方のコマンドライン フラグです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35CLI 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"]
-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 ()
-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 at next opportunity after 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]
両方のライブラリ インターフェイスの下線付きのオプション キーに対応するもの
CLI オプションごとのデフォルト
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23{
"indent_size": 4,
"indent_char": " ",
"indent_with_tabs": 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,
"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"
}
cli で公開されていないデフォルト
1
2
3
4{
"eval_code": false,
"space_before_conditional": true
}
すべてのデフォルトが CLI 経由で公開されているわけではないことに注意してください. 歴史的に、Python と JS API は 100% 同一ではありません. たとえば、現在のところ はspace_before_conditional
JS のみであり、CLI スクリプトからはアドレス指定できません. 100% API 互換性を提供します。
Loading settings from environment or .jsbeautifyrc (JavaScript-Only)
CLI 引数に加えて、次の方法で構成を JS 実行可能ファイルに渡すことができます。
- 接頭辞付き
jsbeautify_
の環境変数 - パラメータ
JSON
で指定された形式のファイル--config
- 上記のファイルシステムの任意のレベルのデータを
.jsbeautifyrc
含むファイルJSON
$PWD
このスタックで以前に提供された構成ソースは、後のものをオーバーライドします。
Setting inheritance and Language-specific overrides
設定は、すべての言語で値が継承される浅いツリーですが、上書きすることができます. これは、どちらの実装でも API に直接渡される設定に対して機能します. Javascript 実装では、.jsbeautifyrc などの構成ファイルから読み込まれた設定、継承/オーバーライドも使用できます。
indent_size
以下は、言語オーバーライド ノードでサポートされているすべての場所を示す構成ツリーの例です。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18{
"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 つのスペースにオーバーライドします
- HTML
- 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
それぞれ同じことを実現します。
1
2
3
4
5
6// 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 ビューティファイアーは、範囲がはるかに単純であり、オプションがはるかに少ないです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27CSS 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
-L, --selector-separator-newline Add a newline between multiple selectors
-N, --newline-between-rules Add a newline between CSS rules
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] ["auto"]
-i, --wrap-attributes-indent-size Indent wrapped attributes to after N characters [indent-size] (ignored if wrap-attributes is "force-aligned")
-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
セクションを無視または保持するディレクティブ (Javascript のみ)
Beautifier は、ファイル内のコメントのディレクティブをサポートします. これにより、beautifier にファイルのフォーマットを保持するか、ファイルの一部を完全に無視するように指示できます. 以下の入力例は、beautification 後も変更されたままになります
1
2
3
4
5
6
7
8
9
10
11
12
13
14// Use preserve when the content is not javascript, but you don't want it reformatted.
/* beautify preserve:start */
{
browserName: 'internet explorer',
platform: 'Windows 7',
version: '8'
}
/* beautify preserve:end */
// Use ignore when the content is not parsable as javascript.
var a = 1;
/* beautify ignore:start */
{This is some strange{template language{using open-braces?
/* beautify ignore:end */
ライセンス
これが有用である、または機能していると思われる場合に備えて、これを好きなように自由に使用できますが、著作権表示とライセンスを保持する必要があります. (MIT)
クレジット
- 作成者 Einar Lielmanis、einar@jsbeautifier.org
- Stefano Sanfilippo a.little.coder@gmail.comによって栄えた Python バージョン
- Daniel Stockmanによるnode.jsのコマンドラインdaniel.stockman@gmail.com
- Liam Newman bitwiseman@gmail.comによって維持および拡張されています。
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.7.5)