WebStorm使いはEmmetでHTMLコーディングを高速化しよう

WebStormにはEmmetが標準搭載されています。
以前はZen-codingと呼ばれていたフロントコーディングの入力支援です。

たとえば

img

とだけ打ってtabを押すと

<img src="" alt=""/>

ここまで出してくれます。

.className

とクラス名だけ打ってtabすると

<div class="className"></div>

クラス名の入ったレイヤーを作ってくれます。

複数階層を一行で書く

.className>p>a>

↓

<div class="className">
    <p><a href=""></a></p>
</div>

>で入れ子の中に収まります。

属性値を加える

.className>p>a[href=index.html][target=_blank]

↓

<div class="className">
    <p><a target="_blank" href="index.html"></a></p>
</div>

[]の中に属性値を入れられます。
属性ひとつごとに[]で区切る必要があります。

テキストを加える

.className>p>a[href=index.html][target=_blank]>{リンク}

↓

<div class="className">
    <p><a target="_blank" href="index.html">リンク</a></p>
</div>

{}で囲ったものはテキストとして出力されます。

ループさせる。

ul.className>li*3>a>{メニュー$}

↓

<ul class="className">
    <li><a href="">メニュー1</a></li>
    <li><a href="">メニュー2</a></li>
    <li><a href="">メニュー3</a></li>
</ul>

li*3のように指定することで数値分ループします。

またループ内での$はその回数が出力されます。

p*3>{メニュー$@5}

上記のように$@5とした場合、指定した数値から出力されていきます。

<p>メニュー5</p>
<p>メニュー6</p>
<p>メニュー7</p>

ループが使えるだけでもグッと楽になるので手癖にしましょう。