リズムのじかん

javascript、typescriptなど中心に書きます。

webstormでjs-beautifyを使ってコードをフォーマットする

あらすじ

webstormのフォーマッタは自分的には貧弱な気がしてました。 だってメソッドチェーンを自動改行してくれない。

sublimeだとjs-beautifyがいい感じにしてくれるのに。。

webstormのpluginにはそれっぽいのはありません。 gruntだったらできるけど、オーバーヘッドかかるし。

それならfile watcherでやったらできるかも。=>できました!

file watcherの設定

※下に追記していますが、file watcherよりexternal toolでやったほうが良い気がします。

js-beautifyをインストールする

npmでインストールします。 js-beautifyはグローバルインストール推奨だそうです。

npm install js-beautify -g

file watcherの設定

こんな感じです。

f:id:chords:20141018013146p:plain

  • typescriptでコーディングしているので、File Typeがtypescriptになっていますが、必要に応じてjavascriptなどに変えてください。
  • immediate file syncronizationのチェックを外すと、ファイル保存時に本タスクが実行されます。
  • js-beautifyのオプションはjs-beautifyを参考にしてください。
  • jsbeautify.jsonはこんな感じです。jsbeautify.jsonはプロジェクトルート直下に置いてます。
{
    "indent_size": 2,
    "indent_char": " ",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 10,
    "jslint_happy": false,
    "space_after_anon_function": false,
    "brace_style": "collapse",
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "space_before_conditional": true,
    "break_chained_methods": true,
    "eval_code": false,
    "unescape_strings": false,
    "wrap_line_length": 0
}

これで快適!

(追記) external toolの設定

file watcherよりexternal toolでやったほうが良い気がします。 file watcherだと、js-beautifyがファイルを上書きしたタイミングでもう一度file watcherが走るので。。

js-beautifyをインストールする

上に同じです。

external toolの設定

external toolにjs-beautifyを追加します。

f:id:chords:20141018124640p:plain

これで右クリックメニュー等に追加されます。

f:id:chords:20141018124726p:plain

ショートカットキーの設定

keymapでショートカットキーを設定します。

f:id:chords:20141018124804p:plain

これで今度こそ快適!