JavaScriptなどをフォーマットするGruntプラグイン grunt-jsbeautifier を使ってみる

公開日: : 最終更新日:2014/05/05 JavaScript , ,

Java を使ってプログラムを書いているときはソースコードをフォーマットするのに、JavaScript や CSS をフォーマットしていないことにふと気が付きました。

Java は Eclipse を使ってコーディングしていることもあって、コミット前にはフォーマットするのが習慣になっているんですが、そういえば JavaScript ってフォーマットしてなかったよねってことで Grunt を使ってフォーマットしてくれるプラグインを探したところ、grunt-jsbeautifier を見つけたので使ってみました。

icatch-format_mini

目次

1. 動作環境

grunt-jsbeautifier を検証した動作環境は次の通りになっています。

1-1. node.js

node.js は、2014/04/27 の時点で最新の v0.10.26 を使っています。

$ node -v
v0.10.26

1-2. Grunt

Grunt は v0.4.3 を使っています。
1つ古いバージョンです。

$ grunt -version
grunt-cli v0.1.13
grunt v0.4.3

1-3. grunt-jsbeautifier

メインとなる grunt-jsbeautifier は 0.2.7 です。
これも現時点で最新のものになります。

2. インストール

2-1. node.js と Grunt のインストール

grunt-jsbeautifier は Grunt のプラグインなので Grunt が必要です。
その Grunt の実行には node.js が必要になります。

node.js と Grunt がマシンにインストールされていない場合は、次の記事辺りを参考にインストールしてみてください。

2-2. grunt-jsbeautifier のインストール

grunt-jsbeautifier 自体のインストールはとても簡単です。

  1. npm コマンドのパスが通っているターミナルで grunt-jsbeautifier を有効にしたいプロジェクトに移動する
  2. 次のコマンドを実行する
    • $ npm install grunt-jsbeautifier --save-dev

以下は、コマンドを実行した時の出力です。
こんな感じになればインストールできています。

$ npm install grunt-jsbeautifier --save-dev
npm WARN package.json grunt-work@0.1.0 No repository field.
npm http GET https://registry.npmjs.org/grunt-jsbeautifier
npm http 200 https://registry.npmjs.org/grunt-jsbeautifier
npm http GET https://registry.npmjs.org/grunt-jsbeautifier/-/grunt-jsbeautifier-
0.2.7.tgz
npm http 200 https://registry.npmjs.org/grunt-jsbeautifier/-/grunt-jsbeautifier-
0.2.7.tgz
npm http GET https://registry.npmjs.org/js-beautify
npm http GET https://registry.npmjs.org/underscore.string
npm http GET https://registry.npmjs.org/lodash
npm http 200 https://registry.npmjs.org/lodash
npm http 200 https://registry.npmjs.org/underscore.string
npm http 200 https://registry.npmjs.org/js-beautify
npm http GET https://registry.npmjs.org/js-beautify/-/js-beautify-1.4.2.tgz
npm http 200 https://registry.npmjs.org/js-beautify/-/js-beautify-1.4.2.tgz
npm http GET https://registry.npmjs.org/config-chain
npm http GET https://registry.npmjs.org/mkdirp/0.3.5
npm http GET https://registry.npmjs.org/nopt
npm http 200 https://registry.npmjs.org/mkdirp/0.3.5
npm http GET https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz
npm http 200 https://registry.npmjs.org/config-chain
npm http 200 https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz
npm http 200 https://registry.npmjs.org/nopt
npm http GET https://registry.npmjs.org/nopt/-/nopt-2.1.2.tgz
npm http 200 https://registry.npmjs.org/nopt/-/nopt-2.1.2.tgz
npm http GET https://registry.npmjs.org/abbrev
npm http GET https://registry.npmjs.org/ini
npm http GET https://registry.npmjs.org/proto-list
npm http 200 https://registry.npmjs.org/abbrev
npm http 200 https://registry.npmjs.org/proto-list
npm http 200 https://registry.npmjs.org/ini
grunt-jsbeautifier@0.2.7 node_modules\grunt-jsbeautifier
├── lodash@2.4.1
├── underscore.string@2.3.3
└── js-beautify@1.4.2 (mkdirp@0.3.5, nopt@2.1.2, config-chain@1.1.8)

3. grunt-jsbeautifier を動かすための設定

次に grunt-jsbeautifier の設定です。
動かすのに必要な最低限の設定に絞って説明します。

設定は他のプラグインと同様に Gruntfile.js で行います。

まずは grunt-jsbeautifier をロードするために次を追記します。

// grunt-jsbeautifier の設定
grunt.loadNpmTasks('grunt-jsbeautifier');

次にどのファイルをフォーマットするかの設定ですが、こんな感じに設定します。

// grunt-jsbeautifier の設定
jsbeautifier: {
    files: ["js/**/*.js", "test/**/*.js", "css/**/*.css", "*.html"],
    option: {}
}

見たままですが、次のファイルをフォーマット対象とした設定になっています。

  1. js ディレクトリにある拡張子が js のファイル
  2. test ディレクトリにある拡張子が js のファイル
  3. css ディレクトリにある拡張子が css のファイル
  4. Gruntfile.js と同じディレクトリに存在する拡張子が html のファイル

1, 2, 3 はサブディレクトリ以下のファイルも対象になっています。

以上で動かすための設定は終了です。

他にもインデントをタブにするとか、インデントの幅をいくつにするとかいくつかオプションはありますが、ちょっと多いので別の機会にでも一覧にしてみたいと思います。

4. grunt-jsbeautifier の実行

上記の通りに設定した場合ですが、次のコマンドで grunt-jsbeautifier によるフォーマットが実行されます。

$ grunt jsbeautifier

実行するとこんな感じに出力されます。

$ grunt jsbeautifier
Running "jsbeautifier:files" (jsbeautifier) task
Beautified 10 files, changed 1 files...OK

Running "jsbeautifier:option" (jsbeautifier) task

Done, without errors.

次はある JavaScript をフォーマットしたあとの diff になります。
デフォルトの設定だとこんな感じフォーマットしてくれます。

$ git diff test/inputstringparsertest.js
diff --git a/test/inputstringparsertest.js b/test/inputstringparsertest.js
index ab4f6fb..bf5536e 100644
--- a/test/inputstringparsertest.js
+++ b/test/inputstringparsertest.js
@@ -1,22 +1,22 @@
-module('緯度:経度の書式', { });
+module('緯度:経度の書式', {});
 test('10:10 と入力した場合', 1, function() {
-  strictEqual(InputStringParser.isLatLng("10:10"), true);
+    strictEqual(InputStringParser.isLatLng("10:10"), true);
 });
 
 
-module('住所や地名を', { });
+module('住所や地名を', {});
 test('名称を入力した場合', 1, function() {
-  strictEqual(InputStringParser.isLatLng("ハチ公"), false);
+    strictEqual(InputStringParser.isLatLng("ハチ公"), false);
 });
 
-module('コロンが複数ある場合', { });
+module('コロンが複数ある場合', {});
 test('コロンが2つある場合', 1, function() {
-  // throws(InputStringParser.isLatLng("10:10:10"), "緯度・経度指定の書式が異なります。");
-  // ↑ のように書けるはずなのだが、なぜか失敗してしまう。。。
-  try {
-    InputStringParser.isLatLng("10:10:10");
-    ok(false, "例外が投げられるのでここには来ない");
-  } catch(e) {
-    strictEqual(e.message, "緯度・経度指定の書式が異なります。");
-  }
+    // throws(InputStringParser.isLatLng("10:10:10"), "緯度・経度指定の書式が異なります。");
+    // ↑ のように書けるはずなのだが、なぜか失敗してしまう。。。
+    try {
+        InputStringParser.isLatLng("10:10:10");
+        ok(false, "例外が投げられるのでここには来ない");
+    } catch (e) {
+        strictEqual(e.message, "緯度・経度指定の書式が異なります。");
+    }
 })

5. まとめ

以上、Grunt のプラグイン grunt-jsbeautifier を使ったソースコードのフォーマットでした。

  • grunt-jsbeautifier で JavaScript, JSON, CSS, HTML などのソースコードがフォーマットできる
  • フォーマットはオプションである程度設定可能
  • フォーマットした結果を上書きしないなどの設定も可能

6. その他の Grunt に関する記事

その他の Grunt に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください!

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-googlemap_3384995399_mini-thumbnail

GoogleMap を使って住所から緯度・経度を計算する

先日も GoogleMpa のジオコーディングを使った地図を表示するメモをアップしましたが、今回も

記事を読む

icatch-automatic_2714993937_mini-thumbnail

Grunt + QUnit + PhantomJS でテストを自動実行してくれる環境を構築する

先日投稿した GoogleMap サンプルのプロジェクトに Grunt の LiveReload を

記事を読む

icatch-where

jQuery を使ってファイルアップロードフォームのファイルが選択されているかを確認する方法

HTML に設置したファイルアップロードフォームにファイルが選択されているかを確認する方法を調べまし

記事を読む

icatch-simcity_536954375_mini-thumbnail

GoogleMapsAPIを使ってMarkerを削除する方法

GoogleMaps API(v3) を使って地図上に表示されている Marker を削除する方法に

記事を読む

Head in Hands

JSON をオブジェクトに変換するときに注意したいこと

おそらくですが、これから書く内容は常識なんだと思います。 が、その常識を知らなかったためにかなりの

記事を読む

icatch-mist_mini

jQuery を使ってページの opacity を徐々に上げて fadeIn して見せる

仕事で HTML を使ってコンテンツをいくつか作成しました。 その際に他でも使い回しが効くスニペット

記事を読む

icatch-plug_8436280178_mini-thumbnail

TwitterBootstrap3 用のバリデーションチェックプラグイン BootstrapValidator の導入から Live チェックまでを試してみた

BootstrapValidator は、TwitterBootstrap3 で構築したサイト用の

記事を読む

icatch-disappear_7186028511_mini-thumbnail

GoogleMapsAPIを使ってMarkerの表示と非表示を切り替える方法

GoogleMaps API(v3) を使って地図上に表示されている Marker を非表示にする方

記事を読む

icatch-browser_3376956889_mini-thumbnail

GoogleMap サンプルのプロジェクトに Grunt の LiveReload を有効にする設定を追加しました

ウチのブログで公開している GoogleMaps API を使った GoogleMap のサンプルプ

記事を読む

icatch-flag_1395019914_mini-thumbnail

GoogleMaps の JavaScript API(v3) を使って、常に1つの InfoWindow だけ表示されるように制御する

前回アップした GoogleMaps の JavaScript API (v3) を使って地図上に複

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


二 + = 3

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑