数字を連番で簡単に入れるVSCode拡張機能「Insert Sequences」
BLOG
Emmetはコードの入力を補完してくれる機能です。
HTMLやCSSを省略した記法で記述しEnter、Tabキーをクリックすると自動変換されるので、効率よくコーディングをすることができます。
この記事では、基本の記法やよく使う便利なEmmetをご紹介していきます。
※macの ⌘キーが出てきますが、Windowsの方は 「⌘ → Ctrlキー 」で読み変えてください!
h2
↓
<h2></h2>
#name
↓
<div id="name"></div>
p.name
↓
<p class="name"></p>
p.name1.name2
↓
<p class="name1 name2"></p>
div>p
↓
<div>
<p></p>
</div>
p+p
↓
<p></p>
<p></p>
ul>li*3
↓
<ul>
<li></li>
<li></li>
<li></li>
</ul>
dl>(dt+dd)*2
↓
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
div>p^p
↓
<div>
<p></p>
</div>
<p></p>
td[colspan=2]
↓
<td colspan="2"></td>
p{テキスト}
↓
<p>テキスト</p>
p.text$*3
↓
<p class="text1"></p>
<p class="text2"></p>
<p class="text3"></p>
p.text$$*3
↓
<p class="text01"></p>
<p class="text02"></p>
<p class="text03"></p>
テキスト、行をタグで囲める。
複数行を1行にまとめられる。
現在のカーソル位置から外側に拡大しながら、範囲選択できる(開始タグから閉じタグまで)。
カーソル位置から内側に縮小しながら、範囲選択できる(開始タグから閉じタグまで)。
※やり方は外側と同じ
開始タグ名を変更したとき、閉じタグ名も自動で変更する
開始タグ名を削除したとき、閉じタグ名も自動で削除する
数値を増加、減少できる
Emmet機能を任意のキーに設定することができます。
紹介した10〜14のEmmetは設定した方が使いやすいので、是非設定してみてください!
※キーボードショートカット一覧は「⌘K ⌘S」で開けます。
いかがでしたか?
ここで紹介したEmmetや、他にもショートカットキーなどを駆使してコーディングの効率を上げましょう!
▼ 参考 過去Blog