Brackets拡張機能「Beautify」を設定し、ガイドラインに沿ったコーディングを行う

投稿日: 2016.09.30

コーディング

カポタストではコーディングの品質を高めるために、独自のガイドラインを設けています。
ただし常にガイドラインを準拠するのは結構骨のいることです。
そこで自動的にガイドラインを守った綺麗なコードを整形する方法をご紹介します！

まず弊社ではHTMLのコーディングのエディタに「 Brackets」を使用しています。
最近までDreamWeaverを使用していたのですが、軽量であること、そして拡張機能が豊富であることなどからこちらに乗り換えました。
その中でもまずダウンロードするのが自動でソースコードを綺麗にしてくれる「 Beautify」という拡張機能です。
以下にダウンロードから設定までを記載いたします。

Beautifyをダウンロードする

Bracketsの拡張機能は拡張機能マネージャーより検索し、インストールするのが一般的です。
ただし「Beautify」の場合、最新バージョンはGitHubにおいてあります。
現在の最新バージョンのZIPファイルのリンクは以下の通りです。

https://github.com/brackets-beautify/brackets-beautify/releases/download/v2.3.0/brackets-beautify.zip

こちらを「URLからインストール…」に貼り付け、インストールします。図1

これでインストールは無事完了です。
［編集］→ ［Beautify］にてソースコードが整形されることを確認してください。

Beautifyを設定する

次にBeautifyの細かな設定をしていきます。
デフォルトでも十分便利なのですが、可読性などを考慮して好みの設定にカスタマイズします。

設定ファイルは拡張機能のフォルダーの中に入っています。
［ヘルプ］→［拡張機能のフォルダーを開く］をクリックし、次に「user/brackets-beautify」フォルダ内の「default.jsbeautifyrc」を開きます。
ファイルはJSON形式となっており、値の変更やキーの追加を行うことで設定していきます。

HTMLの設定

デフォルトの設定

"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"
}

eol: 改行コードの設定を行います。このままでOK。

end_with_newline: trueで最終行に改行を自動挿入します。このままでOK。※単純なHTMLの場合、最終行の改行がなくても大丈夫ですが、PHPなどのプログラムはこれがないとうまく処理されない場合があるのでtrueが無難。

preserve_newlines: 空行の許可設定。falseで空行を全て削除します。trueで空行を許可します。

max_preserve_newlines: 許可する空行の最大値を設定します。
preserve_newlinesがtrueの場合に機能します。

indent_inner_html: trueで<html>タグ直下の<head>タグと<body>タグをインデントします。

brace_style: <script>タグ中のjavascriptの中カッコ"{}"の位置（字下げスタイル）を設定します。

indent_scripts: <script>タグ中のjavascriptのインデントを周りのHTMLに合わせるか、それとも独自のインデントを適用するかを設定します。

wrap_line_length: 一行あたりの最大文字数を設定します。この値を超えると自動的に改行されます。"0"で無効になります。

wrap_attributes: "force"とすることで、2つ目以降の属性で強制的に改行されるようになります。
通常は"auto"でOKです。

以下はデフォルトの設定には記述されていないオプションです。

indent_size: インデントのサイズ。デフォルトは4です。

indent_char: インデントに使用する文字を設定します。デフォルトはスペースです。

unformatted: フォーマットしないタグを指定します。デフォルトでは以下のようなタグ（インラインタグなど）が設定されています。
フォーマットしないタグを追加する、もしくは削除する場合に改めてそれらのタグを配列形式で設定します。

extra_liners: 設定したタグの前に改行を追加します。
デフォルトでは<head>タグ、<body>タグ、</html>タグの前に改行が入るようになっています。

indent_body_inner_html: <body>タグ直下をインデントするか設定します。デフォルトはtrueです。

indent_head_inner_html: <head>タグ直下をインデントするか設定します。デフォルトはtrueです。

このファイルに加えた変更はBracketsをリロードしないと反映されませんので気をつけてください。

弊社設定例

"html": {
    "eol": "\n",
    "end_with_newline": true,
    "preserve_newlines": true,
    "max_preserve_newlines": 0,
    "indent_inner_html": false,
    "brace_style": "collapse",
    "indent_scripts": "normal",
    "wrap_line_length": 0,
    "wrap_attributes": "auto",
    "extra_liners": "",
    "indent_body_inner_html": false,
    "indent_head_inner_html": false,
    "unformatted": [
        "a", "abbr", "area", "audio", "b", "bdi", "bdo", "br", "button", "canvas", "cite",
        "code", "data", "datalist", "del", "dfn", "em", "embed", "i", "iframe", "img",
        "input", "ins", "kbd", "keygen", "label", "map", "mark", "math", "meter", "noscript",
        "object", "output", "progress", "q", "ruby", "s", "samp", "select", "small",
        "span", "strong", "sub", "sup", "svg", "template", "textarea", "time", "u", "var",
        "video", "wbr", "text",
        "acronym", "address", "big", "ins", "small", "strike", "tt",
        "pre"
    ]
}

弊社では<html>や<head>,<body>要素にインデントは施さないようにしています。
これら必ず存在するタグにまでインデントを施すと、エディタ上の作業領域が狭まるためです。
また<dt>などいつくかの"unformatted"なタグの設定を変更しています。図2

Beautifyの設定をHTMLのみに絞ってお伝えしましたが、いかがでしたでしょうか？
このように細かく設定することで、一定のガイドラインに沿った綺麗なコードを楽に整形できます。

内部のコードはユーザーの目に触れる機会のない場所ですが、管理や保守の面からもきちんとコーディングしていきたいですね。