EmmetでHTMLを書こう
履歴HTML書いてますか?
HTMLとCSSを書くのに支援してくれるEmmetというものがあります。 HTMLのタグを全部手で打つの面倒だから簡略化しようというやつです。
HTMLそのまま書くと
<div>
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
ですがEmmetを使えば
div>table>(tr>th*2)+(tr>td*2)*2
って書けば上のHTMLに展開される感じ。
タイプ量がかなり減りますね
CSS書くのにも使えるみたいです。
私はほとんど書かないHTML書かないので使い方忘れがちなので一旦ここでまとめておこうと思います。
プラグインを入れる
Vimで使うならmattnさんのemmet-vimをインストールしましょう。
voltを使うなら
$ volt get mattn/emmet-vim
で終わり。
これでHTML編集中に<C-y>,を押せば、Emmetで書いたものがHTMLに展開されます。
行ごとに展開されるので注意してください。
Vim以外を使うならEmmetの公式サイトから辿って適宜インストールなりしてください。
記法
ドキュメント読みながらちょっと並べておきます。
子階層
>を使います。
div>span
<div><span></span></div>
並べる
+を使います。emmet-vimなら,でもいけるみたいです。
div+span
<div></div>
<span></span>
複数個
*を使います。
同じタグを何度も書かなくてよくなります。
ol>li*5
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
親階層に追加
>を使って子階層まで書いたあとに、親階層に要素を並べるときに^を使います。
div>span^footer
<div><span></span></div>
<footer></footer>
グルーピング
()でグルーピングもできます。^を使わずに親子セットで複数個とか書くのに使えます。
div>(ol>li*2)+ul>li*2
<div>
<ol>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<li></li>
</ul>
</div>
IDとかクラスとか属性
IDやクラス、属性を指定することもできます。書き方はCSSのセレクタと一緒。
a#link.button[href='https://eivy.github.io' style]
<a id="link" class="button" href="https://eivy.github.io" style=""></a>
テキスト
ドキュメントを読んでて初めて知ったんですが、タグの中の文字も指定できます。
{}を使います。
div{text}+{text2}
<div>text</div>
text2
HTMLのひな型
HTMLのひな型用のものも用意されています。
html:5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
最後に
まとめてみたけどまた忘れそう・・・。
今回は書いてませんが、編集位置(タグの中)に移動するショートカットとか、タグ削除のショートカットとか他にも機能があるようなので、各プラグインの説明を読むことをお勧めします。
とりあえず、一番最初に書いた例div>table>(tr>th*2)+(tr>td*2)*2がemmet-vimだと
<div>
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<!-- ここから -->
<tr>
<th></th>
<th></th>
</tr>
<!-- ここまでがいらないはず -->
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
って展開されちゃうので、PRかIssueか書かないといけない。