Atomの自動インデント

Atomの自動インデントのメニュー

Atomには、メニューから自動で一括インデントできる機能がある。これにショートカットを割り当ててもっと便利に使えないか。

[Edit] > [Lines] > [Auto Indent]

例としてインデントの全くかかっていないHTML

<ul class="clearfix">
<li>
<a href="http://example.com/navi01.html">
<img src="http://example.com//images/topnavi_01.gif" alt="アクセスマップ01" />
</a>
</li>
<li>
<a href="http://example.com/navi02.html">
<img src="http://example.com//images/topnavi_02.gif" alt="アクセスマップ02" />
</a>
</li>
</ul>

自動インデントをかけると...

<ul class="clearfix">
  <li>
    <a href="http://example.com/navi01.html">
      <img src="http://example.com//images/topnavi_01.gif" alt="アクセスマップ01" />
    </a>
  </li>
  <li>
    <a href="http://example.com/navi02.html">
      <img src="http://example.com//images/topnavi_02.gif" alt="アクセスマップ02" />
    </a>
  </li>
</ul>

自動インデントにショートカットを割り当てる

初期設定では自動インデントにショートカットが割り当てられていない。ショートカットで使えればもっと便利なので設定する。

まずショートカットが重複しないように調べておく。

[Edit] > [Preferences] で環境設定に入る。 [Keybindings] で上部のインプット欄に適当にキーの組合せを書いてみて、空いているキーを探す。

ここでは [Auto Indent] に 'ctrl-alt-enter' を割り当てた。

[File] > [Keymap] から keymap.cson を開いて編集、以下を記述に加える。

# インデントの自動整形
'atom-text-editor':
  'ctrl-alt-enter': 'editor:auto-indent'

これで Ctrl+Alt+Enter で自動インデントが簡単に使えるようになる。

自動インデントの幅

デフォルトでは [Auto Indent] を使った整形はインデント幅半角２つ分になる。これは、どうも [Editor] > [Tab Length] に設定してある数値で変えられるようだ。試しにデフォルトの数値２を４にしてみるとこうなった。

<ul class="clearfix">
    <li>
        <a href="http://example.com/navi01.html">
            <img src="http://example.com//images/topnavi_01.gif" alt="アクセスマップ01" />
        </a>
    </li>
    <li>
        <a href="http://example.com/navi02.html">
            <img src="http://example.com//images/topnavi_02.gif" alt="アクセスマップ02" />
        </a>
    </li>
</ul>

ただし環境設定で変えると普通のテキスト文書で使うタブもスペース４個分に変わってしまうので、そうしたくない場合は変えないほうがよいだろう。

自動インデントでごく基本的な構文チェック

手書きのHTMLなどで自動インデントをかけたとき、もしどこかの閉じタグなどを忘れているとインデントの位置がおかしくなる。

例えば次の例では a タグの閉じが抜けているので、 li タグの開始と閉じの位置が揃わないのがひと目で分かる。

<li>
    <a href="http://example.com/navi02.html">
        <img src="http://example.com//images/topnavi_02.gif" alt="アクセスマップ02" />
    </li>