Emmetで爆速コーディング(HTML編)

皆さんコーディングライフ楽しんでますか？

VSCodeには、標準でEmmetというプラグインがあります✨
(atomやSublime TextはEmmetというパッケージを入れると使用できます)

Emmetとは

HTMLやCSSを省略記法で簡潔に記述するためのツールです。
呪文を唱えるとタグが展開されるという代物です🧙
歴長めのエンジニアにはZen-Codingといえば通じるみたいです。
私にとってEmmetは無いと生きていけないくらい便利なヤツです😭
この魅力を知ったらEmmetなしでは生きてはいけないでしょう……

ということで今回は、私がよく使うEmmetの省略記法を紹介したいと思います！

まず先に

VSCodeの設定でemmet.triggerExpansionOnTabにチェックを入れておきましょう。
VSCodeは他にもデフォルトで色々打っているときに候補を出してくるのでそれらと競合を避けるためです。
↑の設定でチェックを入れると、Emmetの発動コマンドがtabキーになります。
ここから先のコマンドでは、全て最後にTabキーを押してEmmetコマンドを発動してください✨

基本的には

CSSのセレクタがベースになります。
なので、事前知識としてCSSセレクタは勉強しておきましょう📝

コマンド一覧

!

【!】を押すと、
ポーンとHTMLの基本要素で構成されたテンプレートを召喚することができます✨
もう一々過去のHTMLソースからHTMLパクって切り貼りする必要はないのです😌
ただ、デフォルトのlang属性の値がenなので、
VSCodeの方はsettings.jsonに↓を追加しておきましょう。

settings.json

"emmet.variables": {
    "lang": "ja"
 }

タグ名

すべての要素を閉じタグとセットで召喚してくれます。
しかもbrタグは閉じタグ無しで召喚してくれる！便利！
aタグはhrefをデフォルトでつけてくれたりととにかく気が利きます👍🏻
ただ、存在しないタグに対しても同じく召喚するので(カスタムタグを考慮してるからかもしれないですが)文中で間違ってTabキー押してしまったときは慌てず【command + z】しましょう〜！

.クラス名

クラス名付きのdivを召喚してくれます。
他のタグを使いたい方は【タグ名.クラス名】と打ちましょう
IDは#で召喚できます。(CSSと同じ考え方ですね)

>

親子関係を保持したタグを生成してくれます。

ul>li

だと

result.html

<ul>
  <li></li>
</ul>

こう出力される

*数字

Emmetでのアスタリスクは四則演算の掛け算を意味します。
CSSだとユニバーサルセレクタという意味になるのでご注意ください。
同じタグを複数召喚したいときに、【タグ名*数字】で数字の数だけタグが召喚されます。

ul>li*4

だと

result.html

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

ちなみに、もっと階層を深くしたり(aタグを入れたり)
文字を入れたりすることもできるのですが、
Emmetでそれやると結構頭使って召喚魔法を唱えないといけなく……
私の脳みそのスペックだとちょっとキャパオーバーだったので 笑
別の方法を紹介しますね😘

こういうヤツ召喚したいとき

result.html

<nav class="main_menu">
  <ul class="menu-top_menu">
    <li class="menu-item">
      <a href="#news">
        <span>News</span>
      </a>
    </li>
    <li class="menu-item">
      <a href="#works">
        <span>Works</span>
      </a>
    </li>
    <li class="menu-item">
      <a href="#contact">
        <span>Contact</span>
      </a>
    </li>
  </ul>
</nav>

通常Emmetで骨組みを出すとなると

nav.main_menu>ul.menu-top_menu>li.menu-item*3>a[href=#]>span{text}

と打ってから一個ずつ名前とID名を入れていくのですが……

私はまず

ul>li*3>a

と打ってから、

1. 1つ目のliタグのみ作り込む
2. 作り込んだliタグをコピー
3. ２つ目のliタグを選択
4. command + d で他のliタグも選択
5. command + p で整形したliタグに全部置き換え
6. navタグとか必要であれば追加する

で、構造を作ったりしています。

お好みでどうぞ😊

+

CSSでいう隣接セレクタですね。
お隣さん同士のタグを召喚するときに使います！
tableタグとか定義リスト(dl>dt+dd)に使ったりします。

table>tr*3>th+td

と打つと

result.html

<table>
  <tr>
    <th></th>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
  </tr>
</table>

いい感じのテーブルをサクッと作れるので便利ですよ💕

ここまで使いこなせたら

あなたも爆速コーディング(HTML編)をマスターしたと言っても過言ではないでしょう😘

最初は全部打ったほうが速いと思うかもしれませんが、地道に呪文を唱え続けることによって
体が無意識に呪文を唱えてくれるようになるので是非覚えてみてください🔮

おまけ

コードの召喚に失敗したときに役に立つVSCodeのパッケージに
Auto Rename Tag
というものがあります。
開始タグを修正すると自動的に終了タグも直してくれる優れものなので
是非こちらもご活用ください🌟