VSCodeを使用する際、
- マルチカーソル
- Emmet
- Snippet
の3つを使うか使わないかで、全然効率が違うと思う。
前回、Snippetの書き方をまとめたので（こちら）、
私はブログの記事作成に、しばらくWordPressのエディタを使っていたのですが、 特定の条件で動作が遅くなったり、自動フォーマットの修正に時間をとられたり、マルチカーソルが使えなかったりと、少々使いにくいところがあった …
今回はEmmetの備忘録。
Emmetとは
Emmetは、Syntax, HTML, CSSなどを省略記法で簡潔に記述するためのコード。
指定された形式で記入すれば、VSCodeが判断して補完してくれる。
私はHTMLしか覚えていない……けど十分役立つ！
Emmetのいろいろ
要素名
単純に要素名だけかけば、タグに展開してくれる。
入力: p
出力: <p></p>
ネスト「>」
要素をネストさせるためには、間に
>
をはさむ。
入力: ul>li
出力:
<ul>
<li></li>
</ul>
同じ要素の繰返し「*」
要素を繰り返すときは、
*
のあとに繰り返したい数を入れる。
入力: ul>li*3
出力:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
兄弟要素にする「+」
兄弟要素にするときは、
+
でつなげる。
入力: ul>li*2+ul>li*3
出力:
<ul>
<li></li>
<li></li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</ul>
ひとつ上の要素の戻る「^」
ひとつ上の要素に戻るときは、
^
を使う。
入力: table>tbody>tr>th*2^tr>td*2^tr>td*2
出力:
<table>
<tbody>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
グループ化する「( )」
各要素は
( )
でグループとしてまとめることができる。
繰り返したい場合などに便利。
入力: table>tbody>tr>th*2^(tr>td*2)*2
出力:
<table>
<tbody>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
要素にIDをつける「#」
#
の後ろにID名を入れればOK。
入力: h2#mom1
出力:
<h2 id="mom1"></h2>
要素にクラスをつける「.」
.
の後ろにクラス名を入れればOK。
入力: div.marker-yellow
出力: <div class="marker-yellow"></div>
連番をつける「$」
IDやクラス名などで連番をつけたいときは、
$
を使う。
入力: div.mom-$*4
出力: <div class="mom-1"></div> <div class="mom-2"></div> <div class="mom-3"></div> <div class="mom-4"></div>
要素に属性をつける「[]」
IDやクラス以外の属性ををつけたいときは、
[ ]
を使う。
入力: img[title="test" alt="image" height="324px" width="100%"]
出力: <img src="" alt="image" height="324px" width="100%" title="test">
要素にテキストを入れる「{ }」
要素荷テキストを入れる場合は、
{ }
を使う。
入力:
a{リンク}
出力: <a href="">リンク</a>
Emmet Cheat Sheet
EmmetのCheat Sheet もたくさん公開されている。
個人的に見やすいのはコレ ▼
One-page guide to Emmet: usage, examples, and more. Emmet is a markup language for expanding CSS rules into HTML
Udemy の講座で紹介されていたのはコレ ▼
コレも詳しい ▼
