// Emmetの候補を表示"emmet.showSuggestionsAsSnippets": true,// TAB キーで Emmet を展開できるようにする  "emmet.triggerExpansionOnTab": true, 

HTMLでのemmet記法

１つの要素の展開

h1↓<h1></h1>

ネストした要素の展開

div>a↓<div><a href=""></a></div>

同じ要素の繰り返し

ul>li*3↓<ul> <li></li> <li></li> <li></li></ul>

きょうだい要素の連続展開

h1+p↓<h1></h1><p></p>

要素へのID付与

div#thisIsId↓<div id="thisIsId"></div>

要素へのクラス付与

div.thisIsClass.content↓<div class="thisIsClass content"></div>

IDなどを連番にする

p.hoge$*3↓<p class="hoge1"></p><p class="hoge2"></p><p class="hoge3"></p>

要素にテキストを挿入する

a{this is link}↓<a href="">this is link</a>

CSSでのemmet記法

w100+h200+m10-0-10-10+tac↓width: 100px;height: 200px;margin: 10px 0 10px 10px;text-align: center;

単位を指定しない場合、デフォルトでは「px」が指定されます。明示的に単位を指定すると他の単位にできます。

参考

• [Emmetで素早くHTML/CSSコーディング！書き方と対応ツールの紹介]()https://tracpath.com/works/development/emmet-for-web-developers/#i-8:title