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

3672 ワード
HTML emmet CSS VSCode JSX HTML テキストリンク

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

やること

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

vscodeの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を開き、以下の設定を追加

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