20200703 ①VS code emmet

emmetについて

！+Tabキーを入力するだけで基本構造が自動で入力される便利ツール。

 ・上記以外の機能

◎要素名を記述して展開する
img＋Tabキー→<img alt="" />

◎入れ子構造を作る
ul>li＋Tabキー
↓
<ul>
<li></li>
</ul>

◎同じ要素を複数作る

ul>li*3＋Tabキー
↓
<ul>
<li></li>
<li></li>
<li></li>
</ul>

◎グループ化する

「（ ）」がグループ化の記号

ul>(li>a)*3＋Tabキー

↓
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

◎id属性を指定する
「#」がid属性指定の記号

ul#nav>(li>a)*3＋Tabキー

↓
<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

◎ctr+D＝同じ項目を同時に選択
→同時に文字の追記、編集ができるようになる

今までdivタブにidやclassを手打ちで入力していたがemmet機能を使うことで作業時間が短縮されるのでコーティングが捗る。