コマンドラインを使用して JavaScript コードを美しくするにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/18985

質問

JavaScriptのコードを美しくするためにバッチスクリプトを書いています。両方に取り組む必要がある ウィンドウズ そして Linux.

コマンド ライン ツールを使用して JavaScript コードを美しくするにはどうすればよいですか?

役に立ちましたか？

解決

まず、お気に入りの Javascript ベースの Pretty Print/Beautifier を選択します。私は、のほうが好きです http://jsbeautifier.org/, 、それは私が最初に見つけたものだからです。ファイルをダウンロードします https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js

次に、Mozilla グループの Java ベースの Javascript エンジンをダウンロードしてインストールします。 サイ. 。「インストール」という表現は少し誤解を招きます。zip ファイルをダウンロードしてすべてを解凍し、js.jar を Java クラスパス (または OS X の Library/Java/Extensions) に配置します。これで、次のような呼び出しでスクリプトを実行できます。 

java -cp js.jar org.mozilla.javascript.tools.shell.Main name-of-script.js

ステップ 1 の Pretty Print/Beautifier を使用して、JavaScript ファイルを読み取り、ステップ 1 の Pretty Print/Beautifier を通じて実行する小さなシェル スクリプトを作成します。例えば

//original code    
(function() { ... js_beautify code ... }());

//new code
print(global.js_beautify(readFile(arguments[0])));

Rhino は、JavaScript に、ブラウザーのコンテキストでは必ずしも意味をなさないが、コンソールのコンテキストでは意味をなす追加の便利な関数をいくつか提供します。関数 print は期待通りの動作をし、文字列を出力します。関数 readFile は、ファイル パス文字列を引数として受け取り、そのファイルの内容を返します。

上記を次のように呼び出します。 

java -cp js.jar org.mozilla.javascript.tools.shell.Main beautify.js file-to-pp.js

Rhino の実行スクリプトでは Java と Javascript を組み合わせて使用​​できるため、Java の知識があれば、これをテキスト ストリームで実行することもそれほど難しくないはずです。

他のヒント

Nodejsを使用している場合は試してください uglify-js

Ubuntu 12.04 では、nodejs がすでにインストールされていると仮定して、次のコマンドを使用して uglify をインストールできます。

sudo npm install -g uglify-js

そしてオプションを取得します。

uglifyjs -h

ソースファイルがある場合 foo.js これは次のようになります:

// foo.js -- minified
function foo(bar,baz){console.log("something something");return true;}

次のように美化できます。

uglifyjs foo.js --beautify --output cutefoo.js

uglify デフォルトではインデントにスペースが使用されるため、4 スペースのインデントをタブに変換したい場合は、それを実行できます unexpand Ubuntu 12.04 には次のものが付属しています。

unexpand --tabs=4 cutefoo.js > cuterfoo.js

または、すべてを一度に行うこともできます。

uglifyjs foo.js --beautify | unexpand --tabs=4 > cutestfoo.js

unexpand についてさらに詳しく知ることができます ここ

以上のことをすべて終えると、次のようなファイルが完成します。

function foo(bar, baz) {
    console.log("something something");
    return true;
}

更新 2016-06-07

uglify-js のメンテナが現在取り組んでいるようです。 バージョン2 インストールは同じですが。

2014 年 4 月の更新:

このビューティファイアーは、2010 年に私がこれに回答して以来書き直されました。そこには Python モジュールと、nodejs の npm パッケージがあり、jar ファイルはなくなりました。を読んでください。 github.com のプロジェクト ページ.

Python スタイル:

 $ pip install jsbeautifier

NPM スタイル:

 $ npm -g install js-beautify

それを使用するには:

 $ js-beautify file.js

元の回答

@Alan Stormの回答に追加

コマンドライン整形ツールに基づく http://jsbeautifier.org/ は、rhino (「js.jar」としてパッケージ化された Java ベースの JS エンジン) ではなく、(あるいは) V8 JavaScript エンジン (C++ コード) に基づいているため、少し使いやすくなりました。したがって、Rhino の代わりに V8 を使用できます。

使い方：

jsbeautifier.org zip ファイルをダウンロードしますhttp://github.com/einars/js-beautify/zipball/master

(これは、次のような zip ファイルにリンクされているダウンロード URL です。 http://download.github.com/einars-js-beautify-10384df.zip)

古い (動作しなくなった、jar ファイルがなくなった)

  java -jar js.jar  name-of-script.js

新しい（代替）

svn から v8 lib をインストール/コンパイルします。上記の zip ファイルの v8/README.txt を参照してください。

  ./jsbeautify somefile.js

-rhino バージョンとはコマンドライン オプションが若干異なります。

-「外部ツール」として構成すると、Eclipse でうまく動作します

Ubuntu 18.04 LTS の場合

$ sudo apt install jsbeautifier
$ js-beautify ugly.js > beautiful.js

コンソールで使用できるのは、 芸術的なスタイル (別名Aスタイル）付き --mode=java.
それは素晴らしく機能し、無料、オープンソース、クロスプラットフォーム (Linux、Mac OS X、Windows) です。

受け入れられた回答にコメントを追加することができないため、そもそも存在しないはずの投稿が表示されます。

基本的に、Java コード内に JavaScript 整形機能も必要でしたが、驚いたことに、私が見つけた限りでは利用できるものはありませんでした。そこで、受け入れられた回答に完全に基づいて自分でコードを作成しました（jsbeautifier.org beautifier .jsスクリプトをラップしますが、Javaまたはコマンドラインから呼び出すことができます）。

コードは次の場所にあります https://github.com/belgampaul/JsBeautifier

rhinoとbeautifier.jsを使用しました

コンソールからの使用方法:java -jar jsbeautifier.jar スクリプトのインデント

例：java -jar jsbeautifier.jar "関数 ff() {return;}" 2

Java コードからの使用法:public static String jsBeautify(String jsCode, int indentSize)

コードを拡張していただいても構いません。私の場合、開発中に生成された JavaScript を確認できるようにインデントのみが必要でした。

プロジェクトにかかる時間を少しでも節約できることを願っています。

作り方を解説した記事を書きました JavaScript で実装されたコマンドライン JavaScript 整形ツール 5分以内に。YMMV。

  1. 最新の安定版 Rhino をダウンロードし、どこか (例:~/dev/javascript/rhino
  2. 前述の jsbeautifier.org から参照されている beautify.js をダウンロードし、どこかにコピーします。~/dev/javascript/bin/cli-beautifier.js

  3. これを beautify.js の最後に追加します (JavaScript にいくつかの追加のトップレベル プロパティを使用します)。

    // Run the beautifier on the file passed as the first argument.
print( j23s_beautify( readFile( arguments[0] )));

  4. 次のコードをコピーして実行可能ファイルに貼り付けます。~/dev/javascript/bin/jsbeautifier.sh:

    #!/bin/sh
java -cp ~/dev/javascript/rhino/js.jar org.mozilla.javascript.tools.shell.Main ~/dev/web/javascript/bin/cli-beautifier.js $*

  5. (オプション) jsbeautifier.js を含むフォルダーを PATH に追加するか、既存のフォルダーに移動します。

コマンドラインツールについて質問したときは、すべての js ファイルをバッチで美しくしたいだけだったと思います。

この場合、Intellij IDEA (11.5 でテスト済み) でこれを行うことができます。

プロジェクト ファイルのいずれかを選択し、メイン IDE メニューで [コード] -> [コードの再フォーマット] を選択するだけです。次に、ダイアログで「ディレクトリ内のすべてのファイル...」を選択し、「Enter」を押します。JVM 用に十分なメモリを確保してください。

最新の JavaScript の方法を使用します。

使用 イサキ と組み合わせて、 Grunt 用の jsbeautifier プラグイン

を使用すると、すべてを開発環境に簡単にインストールできます npm.

必要なのは、ファイルの連結、lint、uglify、minify などを含む適切なタスクを含む Gruntfile.js を設定し、grunt コマンドを実行することだけです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top