Beautify のオプション設定 [Brackets]
Brackets は超便利
Adobe が無料で提供してくれている、Web や Cordova(PhoneGap) の制作に便利なIDE、
『Brackets』( http://brackets.io/ ) で人気のプラグイン『Beautify』は、コードを整形してくれる人気のプラグインです。
このブログで扱うのは初めてですので簡単に Brackets の便利な点について触れておくと、
HTMLやCSSの編集が即座に反映される『ライブプレビュー機能』、
JetBrains系や ATOMなどみたく、かんたんにプラグインのインストール・無効化が可能、
この IDE 自体が ATOM 同様、HTML+JS をベースに作られており、プラグインも同様のためわりと改造しやすい。
……などの良い点があります。
ATOM でも同様のことができちゃう部分もありますが、
Brackets だけの機能もありますので、一度見てみることをお勧めします。
Beautify のデフォルトは時々ビミョー
↑なんと約40万ダウンロード！
さて、大人気プラグインの Beautify は、ショートカット一発、もしくは保存時にオート整形をしてくれる
なかなか便利なプラグインなのですが、デフォルト設定だと「う～ん」と思うところがあります。
例えば……
/* これを… */ h1, h2, h3, h4, h5 { color: #222; } /* Beautify はこうします */ h1, h2, h3, h4, h5 { color: #222; }
縦に長い！！
これが読みやすい人もいるかと思いますし、コードによっては読みやすくなるのですが、
まあ、どちらかといえばこれは無効にしたいです。
Beautify の設定ファイルを探そう！
Brackets-Beautify 製作者の GitHub ページにそのやり方は書いてありました。
どうやら、default.jsbeautifyrc の設定を変えればよいとのこと。
そういうわけで、
C:\Users\USERNAME\AppData\Roaming\Brackets\extensions\user\brackets-beautify
（↑ USERNAME の部分は適宜変えてください）
のフォルダを見てみるのですが、「あれれ？」
default.jsbeautifyrc というファイルはありません。
実は、Brackets 内の拡張機能マネージャー（プラグイン管理）でインストールできる Beautify は ver.1.2.0 なのですが、
そのバージョンの Beautify には default.jsbeautifyrc がないのです。
そんなわけで、手動でのアップデートが必要になります。
Brackets の拡張機能マネージャ―にて、
『.zipをここにドラッグするか、URL からインストール...』
と書かれている『URL からインストール...』の部分をクリック。
入力ボックスが表示されたら
https://github.com/brackets-beautify/brackets-beautify/archive/master.zip
と入力します。
そしてインストールすると、（2016/2/11現在の最新である）ver.2.0.0 にアップデートされるはずです。
さて、これでようやく設定ファイルと戦えます。
Beautify の設定を自分好みに
さて、今度こそ
C:\Users\USERNAME\AppData\Roaming\Brackets\extensions\user\brackets-beautify
には default.jsbeautifyrc がありますので、（ありますよね？）設定を自分好みにしていきます。
元々はこうなっています。
{ "js": { "eol": "\n", "preserve_newlines": true, "max_preserve_newlines": 10, "space_after_anon_function": true, "brace_style": "collapse", "keep_array_indentation": true, "keep_function_indentation": false, "space_before_conditional": true, "break_chained_methods": false, "eval_code": false, "unescape_strings": false, "wrap_line_length": 0, "wrap_attributes": "auto", "end_with_newline": true }, "css": { "eol": "\n", "end_with_newline": true, "selector_separator_newline": true, "newline_between_rules": true }, "html": { "eol": "\n", "end_with_newline": true, "preserve_newlines": true, "max_preserve_newlines": 10, "indent_inner_html": false, "brace_style": "collapse", "indent_scripts": "normal", "wrap_line_length": 0, "wrap_attributes": "auto" } }
それを、私はこう変えました。
{ "js": { "eol": "\n", "indent_size": 4, "indent_with_tabs": true, "preserve_newlines": true, "max_preserve_newlines": 3, "space_in_paren": false, "space_after_anon_function": false, "brace_style": "expand", "keep_array_indentation": true, "keep_function_indentation": false, "space_before_conditional": false, "break_chained_methods": false, "eval_code": false, "unescape_strings": false, "wrap_line_length": 0, "wrap_attributes": "auto", "end_with_newline": true, "comma_first": false }, "css": { "eol": "\n", "indent_size": 4, "indent_with_tabs": true, "end_with_newline": true, "selector_separator_newline": false, "newline_between_rules": true }, "html": { "eol": "\n", "indent_size": 2, "indent_char": " ", "indent_with_tabs": false, "end_with_newline": true, "preserve_newlines": true, "max_preserve_newlines": 3, "indent_inner_html": true, "brace_style": "collapse", "indent_scripts": "normal", "wrap_line_length": 0, "wrap_attributes": "auto" } }
設定については、
「js-beautify と同じ設定が使えるからそこ見てね」
とだいぶ雑に書かれてるので、読んだものの、設定項目の示す意味が分からず苦労しました。
ですので、理解できたものだけでも日本語でここに説明を記しておきます。
js-beauty の設定項目を日本語解説！
"indent_size"
Indentation size [4]
インデント幅（文字数）です、数字を指定。デフォルトは 4 。ふつうは 2 か 4 だと思います。
"indent_char"
Indentation character [" "]
インデントに使う文字。デフォルトは半角スペース。" " か "\t" （タブ文字）以外の選択肢は浮かびませんね。
"eol"
character(s) to use as line terminators.
改行コード。デフォルトは "\n"。CRLFじゃなきゃダメなんだ～！ という人はいないと思いますので、デフォでいいですね。
"indent_level"
Initial indentation level [0]
最初の行のインデントレベル。デフォルトは 0 。これもデフォでいいですね。
"indent_with_tabs"
Indent with tabs, overrides -s and -c
インデントにタブ文字を使いたい方はこちら。デフォルトは false 。 true にすると、indent_size, indent_char の設定は無視されます
"preserve_newlines"
Preserve line-breaks
改行を予約……？ ちょっとわかんないですが、下の項目に関連します。デフォルトは true
"max_preserve_newlines"
Number of line-breaks to be preserved in one chunk
空行をどのくらい許すか、数値で指定します。デフォルトは 10 。1 ～ 4 あたりが、個人的にはおすすめですかね。
/* 例えば 2 と設定すると、これが…… */ console.log("以下、無駄な改行４つ"); console.log("ここまで"); /* こう修正されます（空行が最大２行に制限されます） */ console.log("以下、無駄な改行４つ"); console.log("ここまで");
"space_in_paren"
Add padding spaces within paren, ie. f( a, b )
カッコの中の文字とカッコの間にスペースを置くかの設定です。
if (foo === true) が if ( foo === true ) と整形されるようになります。
説明がないのですが、おそらくデフォルトは false です。
"jslint_happy"
Enable jslint-stricter mode
おそらく jslint 準拠で整形するよ！ ということなのでしょうが、詳細は不明です。デフォルトは false 。
"space_after_anon_function"
Add a space before an anonymous function's parens, ie. function ()
無名関数 function と、そのあとの引数を示すカッコの間にスペースを置くかの設定。デフォルトは false 。
function somethingDo(){} というふうに名前のある関数には関係ありません。
無名関数である function(){} が function (){} になるという仕組み。
"brace_style"
[collapse-preserve-inline|collapse|expand|end-expand|none]
デフォルトは "collapse" 。中カッコ {} の改行に関する設定ですね。
/* "collapse" */ function isReadable(flag) { if (flag === true) { return true; } else { return false; } } /* "expand" */ function isReadable(flag) { if (flag === true) { return true; } else { return false; } } /* これはおそらく文字通りなにもしない "none" */ function isReadable(flag) { if(flag === true){ return true; }else{ return false; } } /* 試していないので憶測ですが… "end-expand" */ function isReadable(flag) { if (flag === true) { return true; } else { return false; } } /* 試していないので憶測ですが… "collapse-preserve-inline" */ function isReadable(flag) { if (flag === true) { return true; } else { return false; } }
ふつうは "collapse" か "expand" でしょうね。
"space_before_conditional"
デフォルトは true 。
false にすると、if (flag === true) が if(flag === true) というふうに、
if のあとの半角スペースが無くなります。私は false がおすすめ。
"break-chained-methods"
Break chained method calls across subsequent lines
デフォルトは false 。
true にすると、チェーンメソッドは必ず改行されます。
false にしていても改行が消されることはありませんので、
おもに true にするのは、minify 済みのコードを読み取りたいときくらいでしょうかね。
/* true のとき、以下のものが */ something.firstDo().secondDo(); /* こう整形される */ something.firstDo() .secondDo();
"keep_array_indentation"
Preserve array indentation
配列要素のインデントに関する設定です。デフォルトは false 。
試したところ、以下の違いがありました。迷いどころですね。
/* false */ var array = ["こぶた", "たぬき", "きつね"]; /* true */ var array = ["こぶた", "たぬき", "きつね"];
"keep_function_indentation"
デフォルトは false 。
試してみたのですが、違いはわかりませんでした。
"eval_code"
なぞです。情報求む。デフォは false 。
"unescape_strings"
Decode printable characters encoded in xNN notation
説明書きはありますがこれも謎。 デフォは false 。
"wrap_line_length"
強制改行を行う文字数を設定します。デフォルトは 0 。（強制改行しない）
横に長くなりすぎないよう、 70 など適当な値を設定しておくと良いでしょう。
"end_with_newline"
End output with newline
文書の最後に空行を用意するかどうか。デフォルトは false 。
"comma_first"
Put commas at the beginning of new line instead of end
配列の要素を並べるなどで途中に改行が入った際のコンマの位置についての設定。デフォルトは false 。
/* false */ var array = ["りんご", "ごりら", "らっぱ"]; /* true */ var array = ["りんご" , "ごりら" , "らっぱ"];
以上です！！ （まだ説明していないものもいくつかありますが…）
CSS, HTML についても、設定項目数が少ないですが同様に設定可能
JS ( JavaScript ) の設定のほかに HTML や CSS の設定も、
同様に同じページに載っています。
JS の設定項目よりはすこし少ないですね。
一点、HTML の設定項目についてひとつ書いておきたいので書いておきますと、
"indent_inner_html"
Indent <head> and <body> sections. Default is false.
<html> 全体から見たときに、<head> や <body> をインデントするかの設定。デフォルトでは false です。
個人的には true のほうが一般的かなあ、と思います。
<!------ false ------> <html> <head> <title>タイトル</title> </head> <body> <p>本文</p> </body> </html> <!------ true ------> <html> <head> <title>タイトル</title> </head> <body> <p>本文</p> </body> </html>
以上ですかね。
ふう、疲れたぁ。。。
わからない部分も多いですが、
日本語での設定解説が見つからなかったので、
理解できた範囲で記しておきました。
参考サイト
Online JavaScript beautifier
js-beauty の挙動を手軽に見るための参考として使わせていただきました。
