画像解説:タグの補完機能 "Emmet" が使えない場合の対処方法(Visual Studio Code)

Visual Studio CodeVS Code)を使用してコーディングをされている方向けの記事となります。

ある時、VS CodeでHTMLコードを記述している時に

あれ、何か使いにくいぞ。

機能名はわからないけど、タグの補完機能?が効かない。。。

と言う事態に陥りました。こう言う些細な部分でも結構、メンタルの影響があるものです。

原因を調べると、Visual Studio CodeEmmet と言う補完機能が働いていないことが分かりました。

現状:

画像のように、「 . 」や 「 ! 」+ [.tabキー ] で HTML要素を補完作成されていたはずが、効かない。。

解決方法:

PC : Mac

  • VS Code を開いた状態で、PC画面左上 [Code] > [Preference] > [Settings]
  • VS Code 上部に出現する検索窓へ [.emmet ] と入力

  • [.emmet ] の設定画面が出現するので、下の方へスクロールすると、
    [ Emmet : Trigger Expantion On Tab ] を発見!

  • あとは、そこへチェックを付けてあげて完了です!



以上、VS Codeで補完機能を使えるようにする方法のご紹介でした。
タグ補完機能の詳細な使い方はこちらを参考にどんどん効率化を進めていきたいところです!

参考:

Emmet in Visual Studio Code