素晴らしいコミュニティモジュール

JSビューティファイアー

ビルドステータス ビルドステータス

PyPIのバージョン CDNJSのバージョン NPMのバージョン 統計をダウンロードする

https://gitter.im/beautify-web/js-beautify でチャットに参加してください ツイッターフォロー

NPM統計

この小さな整形ツールは、ブックマークレット、醜い JavaScript の再フォーマットと再インデントを行い、Dean Edward の人気のパッカーによってパックされたスクリプトを解凍し、 javascriptobfuscator.comによって処理されたスクリプトの難読化を解除します。

貢献者が必要です

現在、既存の所有者がこのプロジェクトに取り組む時間が非常に限られているため、これを前面に押し出しています。これは人気のあるプロジェクトで広く使用されていますが、顧客が直面しているバグと根本的な問題の両方を修正することに専念する時間のある貢献者を切実に必要としています。内部設計と実装を伴う。

興味のある方はぜひご覧くださいCONTRIBUTING.md次に、 「良好な最初の問題」ラベルが付いている問題を修正し、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>

免責事項: これらは無料のサービスであるため、稼働時間やサポートの保証はありません。

ウェブブラウザ

jsbeautifier.orgを開きます。オプションは UI から利用できます。

パイソン

Python を使用して美化するには:

1 2
$ pip install jsbeautifier $ js-beautify file.js

整形された出力は に送られますstdout

jsbeautifierライブラリとして使用するのは簡単です。

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

...または、いくつかのオプションを指定するには:

1 2 3 4
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

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 の適切な整形メソッドをインポートして呼び出します。3 つのメソッド シグネチャはすべて、整形するコードの文字列ですbeautify(code, options)。optionscodeは、コードを整形するために使用する設定を含むオブジェクトです。

設定オプション名は CLI 名と同じですが、ダッシュの代わりにアンダースコアが付いています。たとえば、 と--indent-size 2 --space-in-empty-parenなります{ indent_size: 2, space_in_empty_paren: true }

1 2 3 4 5 6 7 8 9
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 スクリプトと 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 35
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"] -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 引数に加えて、次の方法で config を 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
      • HTMLend_with_newline設定を引き継ぐ
      • インデントを 2 つのスペースにオーバーライドします
  • CSSファイル
    • 最上位の設定をindent_size1 スペースにオーバーライドします。
  • JavaScript ファイル
    • indent_size最上位設定から 4 つのスペースを継承
    • preserve-newlines設定true

CSS & HTML

実行可能ファイルに加えてjs-beautifycss-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 27
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 -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 のみ)

ビューティファイアは、ファイル内のコメント内のディレクティブをサポートします。これにより、ビューティファイアにファイルの書式設定を保持するか、ファイルの一部を完全に無視するように指示できます。以下の入力例は、ビューティファイ後も変更されたままになります。

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)

クレジット

ジェイソン・ダイアモンド、パトリック・ホフ、ノフム・ソソンコ、アンドレアス・シュナイダー、デイブ・ヴァシレフスキー、ヴィタル・バトマノフ、ロン・ボールドウィン、ガブリエル・ハリソン、クリス・J・シャル、マティアス・ビネンス、ヴィットリオ・ガンバレッタらにも感謝します。

(README.md: js-beautify@1.7.5)