Emmet入門

HTML/CSSを効率的にコーディングするためのEmmet記法について見ていきます。
0%
#01 Emmetを使ってみよう
2019年7月25日

このレッスンを理解するには以下も参考にしてみてください。

・詳解HTML 基礎文法編 (全30回)
https://dotinstall.com/lessons/basic_html_tags
・詳解CSS 基礎文法編 (全37回)
https://dotinstall.com/lessons/basic_css_styles
・Visual Studio Code入門 (全13回)
https://dotinstall.com/lessons/basic_vscode

#12 Emmet記法をカスタマイズしよう
2020年2月10日

動画中、1:42〜説明しているExtension Pathの指定方法ですが、現在(2020年2月)変更されているようです。

Emmetの設定を検索すると以下のような画面が出るので、「Edit in setting.json」をクリックします。そうすると設定ファイルを編集できるので、以下の一文を設定内に加えて保存、必要であればVS Codeの再起動をしてください。

{
   // その他の設定...
   "emmet.extensionsPath": "~/emmet",
}

これで VS Code に Emmet 設定ファイルの場所を伝えることができるので、snippets.json が読み込まれるようになります。