今になってEmmetの便利さに気づきましたので紹介です。
例えば
html
<li data-id="archive_001">/archive/movie/2014/mov_001.mp4</li>
<li data-id="archive_002">/archive/movie/2014/mov_002.mp4</li>
<li data-id="archive_003">/archive/movie/2014/mov_003.mp4</li>
<li data-id="archive_004">/archive/movie/2014/mov_004.mp4</li>
<li data-id="archive_005">/archive/movie/2014/mov_005.mp4</li>
<li data-id="archive_006">/archive/movie/2014/mov_006.mp4</li>
<li data-id="archive_007">/archive/movie/2014/mov_007.mp4</li>
<li data-id="archive_008">/archive/movie/2014/mov_008.mp4</li>
<li data-id="archive_009">/archive/movie/2014/mov_009.mp4</li>
<li data-id="archive_010">/archive/movie/2014/mov_010.mp4</li>
みたいな連番のタグをバーーーっと書きたいとき、
愚かな私は今まで、同じ行を複製した後に一個一個手打ちで直したり、
また時にはExcelで
↓
みたいなことをやって生きてきました。
Emmet を使えば
Emmet はZen-codingのように簡略化した入力でHTMLやCSSを書くためのツールキットです。WebstormなどのIDEには標準搭載されていますし、色々なエディタ用にプラグインが出ています。
さきほどの例に戻ります。
Webstorm上で、
emmet
li[data-id="archive_$$$"]{/archive/movie/2014/mov_$$$.mp4}*10
と入力し、行末でtabキーをパシーン
html
<li data-id="archive_001">/archive/movie/2014/mov_001.mp4</li>
<li data-id="archive_002">/archive/movie/2014/mov_002.mp4</li>
<li data-id="archive_003">/archive/movie/2014/mov_003.mp4</li>
<li data-id="archive_004">/archive/movie/2014/mov_004.mp4</li>
<li data-id="archive_005">/archive/movie/2014/mov_005.mp4</li>
<li data-id="archive_006">/archive/movie/2014/mov_006.mp4</li>
<li data-id="archive_007">/archive/movie/2014/mov_007.mp4</li>
<li data-id="archive_008">/archive/movie/2014/mov_008.mp4</li>
<li data-id="archive_009">/archive/movie/2014/mov_009.mp4</li>
<li data-id="archive_010">/archive/movie/2014/mov_010.mp4</li>
タグが展開されます。
Emmet の基本的な使い方
これらはごく基本的な使い方ですが、これらを使うだけでもかなり効率あがりますよね。
タグ展開
emmet
ul
html
<ul></ul>
テキストは{}
emmet
p{こんにちは}
html
<p>こんにちは</p>
classは. idは#
emmet
ul#movies.column
html
<ul id="movies" class="column"></ul>
classやid以外の属性は[attr=val]
emmet
ul[data-id=movies][role=main]
html
<ul data-id="movies" role="main"></ul>
タグの入れ子は> 隣接は+
emmet
ul#movies.column>li>a>span+img
html
<ul id="movies" class="column">
<li><a href=""><span></span><img src="" alt=""/></a></li>
</ul>
タグの複製は*n
emmet
ul>li*5>a
html
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
連番は$
emmet
ul>li.mov_$$*5>a{動画その$}
html
<ul>
<li class="mov_01"><a href="">動画その1</a></li>
<li class="mov_02"><a href="">動画その2</a></li>
<li class="mov_03"><a href="">動画その3</a></li>
<li class="mov_04"><a href="">動画その4</a></li>
<li class="mov_05"><a href="">動画その5</a></li>
</ul>
ゼロ埋めしたい桁数だけ$を書きます
最後に
HTMLだけではなくCSSの簡略化入力もかなり便利とのことです。
「簡略化した入力だけ覚えればよい」となってしまう側面もあるかなと思うと、
もうHTMLやCSSの文法を十分理解している人が使うのがいいのだと思いました。
Emmetから展開したHTMLは非可逆的である点と、
もっとも自分は、HTMLタグを省略せずに書くのは苦ではないので、
連番複製など無意味に時間がかかる作業のアシストに使いたいと思いました。
読んでいただきありがとうございました。
参考
お手持ちの環境にEmmetを導入するやり方から、CSSでのEmmetの便利っぷりにいたるまで、下記の記事に詳しく紹介されていました。