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
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)

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
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_conditionalJS のみであり、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
  - HTMLend_with_newline設定を継承する
  - インデントを 2 つのスペースにオーバーライドします
CSS ファイル
- トップレベルの設定をindent_size1 のスペースにオーバーライドします。
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
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 のみ)

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)

開発ガイド

基本モジュール

組み込みオブジェクト

コミュニティモジュール

JS ビューティファイア

貢献者が必要です

使用法

ウェブブラウザ

パイソン

JavaScript

オプション

Loading settings from environment or .jsbeautifyrc (JavaScript-Only)

Setting inheritance and Language-specific overrides

CSS & HTML

セクションを無視または保持するディレクティブ (Javascript のみ)

ライセンス

クレジット

開発ガイド

基本モジュール

組み込みオブジェクト

コミュニティ モジュール

JS ビューティファイア

貢献者が必要です

使用法

ウェブブラウザ

パイソン

JavaScript

オプション

Loading settings from environment or .jsbeautifyrc (JavaScript-Only)

Setting inheritance and Language-specific overrides

CSS & HTML

セクションを無視または保持するディレクティブ (Javascript のみ)

ライセンス

クレジット

コミュニティモジュール