Zenn
🐈

[VScode]EmmetによるHTML自動補完機能

2021/05/03に公開
VS Code
#
emmet
tech

emmetって何ができるの？

HTMLやCSSのコードを補完してくれます。途中まで書いたら勝手に対応するタグを書いてくれる機能を提供してくれます。

emmetの設定方法

emmetの設定をします。

  1. vscodeを起動する
  2. 左下の歯車マークをクリックして(ctrl+,でも可)、「settings」をクリックする
  3. 上の検索バーに「emmet」と入れる
  4. 「Trigger Expansion on Tab」という項目にチェックを入れる
  5. 「Edit in settings.json」をクリックして、設定を書き換える。

settings.jsonの中身

{
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.variables": {
        "lang": "ja"
     }
}

ここまでできれば完了です。

使ってみる

作ったindex.htmlに「!」と入力して、Tabを押してみてください。

すると画像のように一気に補完してくれます。

ぜひ試して欲しいコマンド

私自身emmetを使いこなせているわけではないので、そこまでコマンド紹介はできませんが、以下はぜひ試してみてください！感じがつかめると思います。
それぞれ入力したあとEnterキーを押してください。

!  (TabかEnterを押す)

.header-left  (TabかEnterを押す)

h1{title}  (TabかEnterを押す)

link:css  (TabかEnterを押す)

ul>li*3  (TabかEnterを押す)

h1+h2  (TabかEnterを押す)

Discussion