2020/7/12 vscode・Emmet Snippetでhtml, css, jsxを手っ取り早くかく（備忘録）

この記事は2020年07月12日に聞きました。

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

やること

• vscodeに基本提供されているemmet snippetsを使い、手っ取り早くhtml, css,jsxを書くことを試みる
• emmetはどういうものかをざっくり目を通す

vscodeのEmmet Snippetsとは？

https://code.visualstudio.com/docs/languages/html#_emmet-snippets

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

htmlの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を自動で完成してくれる。

cssのauto-completion例

p10

を書くと

padding: 10px;

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

Emmetとは

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

Emmetでできること

html, css, xslのauto-completion

Emmet Documents

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

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

● Syntax & Documentation
https://docs.emmet.io/abbreviations/syntax/

jsxでも使えるように設定

reactなどで便利

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

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