js beautifyダウンロード - js beautifyソースコードのダウンロード

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

beautifier.io を開いて試してください。オプションは UI から利用できます。

貢献者が必要です

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

ご興味がございましたら、CONTRIBUTING.md をご覧になり、「良好な初号」ラベルが付いている問題を修正して、PR を送信してください。できるだけ頻繁に繰り返します。ありがとう！

インストール

Node.js または Python のビューティファイアーをインストールできます。

Node.js JavaScript

NPM パッケージjs-beautifyをインストールできます。グローバルにインストールすると、実行可能なjs-beautifyスクリプトが提供されます。 Python スクリプトと同様に、特に設定されていない限り、整形された結果はstdoutに送信されます。

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

js-beautify nodeライブラリとして使用することもできます (ローカルにインストール、 npmデフォルト)。

$ npm install js-beautify

Node.js JavaScript (vNext)

上記により、最新の安定リリースがインストールされます。ベータ版または RC バージョンをインストールするには:

$ npm install js-beautify@next

ウェブライブラリ

ビューティファイアーは Web ライブラリとしてページに追加できます。

JS Beautifier は、cdnjs と rawgit という 2 つの CDN サービスでホストされています。

これらのサービスのいずれかから最新バージョンを取得するには、ドキュメントに以下のスクリプトタグのセットを 1 つ含めます。

 < 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 を使用するか、Node.js または Python を使用してコマンドラインで JavaScript を美しくすることができます。

ウェブブラウザ

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

ウェブライブラリ

<script>タグをhtmlファイルに埋め込むと、 js_beautify 、 css_beautify 、 html_beautifyの 3 つの関数が公開されます。

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,
}
*/

Node.js JavaScript

グローバルにインストールすると、ビューティファイアーは実行可能なjs-beautifyスクリプトを提供します。特に設定されていない限り、整形された結果はstdoutに送信されます。

$ js-beautify foo.js

js-beautify nodeライブラリとして使用するには (ローカルにインストールした後)、JavaScript (JS)、CSS、または HTML の適切な整形メソッドをインポートして呼び出します。 3 つのメソッドシグネチャはすべて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 互換性を妨げるケースが他にもいくつかあります。

環境または .jsbeautifyrc からの設定の読み込み (JavaScript のみ)

CLI 引数に加えて、次の方法で config を JS 実行可能ファイルに渡すこともできます。

jsbeautify_という接頭辞が付いた環境変数
--configパラメータで指定されたJSON形式のファイル
$PWDより上のファイルシステムの任意のレベルのJSONデータを含む.jsbeautifyrcファイル

このスタックの以前に提供された構成ソースは、後の構成ソースをオーバーライドします。

継承と言語固有のオーバーライドの設定

設定は浅いツリーであり、その値はすべての言語に継承されますが、オーバーライドできます。これは、どちらの実装でも 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
    }
}

上記の例を使用すると、次の結果が得られます。

HTMLファイル
- 最上位の設定から 4 スペースのindent_size継承します。
- ファイルも改行で終わります。
- HTML内のJavaScriptとCSS
  - HTML のend_with_newline設定を継承します。
  - インデントを 2 つのスペースにオーバーライドします。
CSSファイル
- 最上位の設定をindent_sizeのスペース 1 にオーバーライドします。
JavaScript ファイル
- 最上位の設定から 4 スペースのindent_size継承します。
- 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

指令

ディレクティブを使用すると、ソースファイル内から Beautifier の動作を制御できます。ディレクティブはファイル内のコメントに配置されます。 CSS および JavaScript では、ディレクティブは/* beautify {name}:{value} */形式になります。 HTML ではという形式になります。

ディレクティブを無視する

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 */