HTML や CSS を書くのがめっちゃ捗る Emmet を Atom でも使う

Emmet という HTML や CSS の記述がめっちゃ楽になるツールがあります。以前は Zen Coding と呼ばれてたのだけどいつのまにか名前が変わったみたいですね。

Emmet Documentation

例えばエディタ上で

nav#menu>ul>li*3

という文字列を

<nav id="menu">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

と展開できます。簡単なとこでも覚えておくと HTML 書くのがはかどります。

Zen-Coding は Vim では使ってたのですがもちろん Atom でも使えます。

emmet

使い方は簡単、html や PHP ファイルを開いている状態で HTML へ展開する用の文字列を打ち込んだら tab を押すだけです。

Tab キーは keymap.cson ファイルで以下のように設定可能です。

'atom-text-editor[data-grammar="YOUR GRAMMAR HERE"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

HTML 書く機会が多ければかなり便利ですねこれ。