VScodeでEmmetを使ったコーディング

Emmetとは？

VScodeではEmmetを使うことでHTML、CSSのコードを短縮して書くことができます。

• 隣接

h1+pと入力すれば

<h1></h1>
<p><p>

• 親要素、子要素

ul>li*5と入力すれば

<ul>
   <li>
   <li>
   <li>
   <li>
   <li>
</ul>

• 要素＋ID

p#textと入力すれば

<p id="text"></p>

• クラス名をつける

p.textと入力すれば

<p class="text"></p>

• 連番

li.number$*5と入力すれば

<li class="number1"></li>
<li class="number2"></li>
<li class="number3"></li>
<li class="number4"></li>
<li class="number5"></li>

• グループ化する

div>dl>(dt+dd)*3と入力すれば

<div>
    <dl>
      <dt></dt>
      <dd></dd>
      <dt></dt>
      <dd></dd>
      <dt></dt>
      <dd></dd>
    </dl>
 </div>

• 要素にテキストを入れる

p{テキスト}

<p>テキスト</p>

1. CSSの場合

db+m0-a++w100pと入力すれば

display: block;
margin: 0 auto;
width: 100%;

Emmetのチートシート

emmet.io

公式サイトのチートシートです。参考にして下さい。

まとめ

emmetを使えば効率的なコーディングができるようになります。はじめはチートシートをみながら学んでいきましょう。