もし不明なところや、間違いとかがあればご指摘頂けると幸いです。

やること

vscodeのEmmet Snippetsとは？

vscodeは、基本的にemmetのauto-completionを提供している。

ul>li*3>span.hello$

を書くと

<ul>
    <li><span class="hello1"></span></li>
    <li><span class="hello2"></span></li>
    <li><span class="hello3"></span></li>
</ul>

こういうふうに、HTMLを自動で完成してくれる。

p10

を書くと

padding: 10px;

こういうふうに、css属性を自動で完成してくれる。

Emmetは既定形式の入力補完機能によりHTML、XML、XSL等を素早く編集できる、テキストエディタ用プラグイン
vscodeは、このプラグインを基本搭載している。

html, css, xslのauto-completion

Cheat Sheetsのいくつかを覚えておくと便利

● Cheat Sheets(html, css, xsl)
https://docs.emmet.io/cheat-sheet/

reactなどで便利

設定▶拡張機能▶emmet項目でsetting.jsonを開き、以下の設定を追加

setting.json

{
  "emmet.includeLanguages": {
     "javascript": "javascriptreact"
  }
}