もし不明なところや、間違いとかがあればご指摘頂けると幸いです。
やること
- 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><spanclass="hello1"></span></li><li><spanclass="hello2"></span></li><li><spanclass="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"}}