✨

[Vue & VS Code] Emmetの補完のやつがでてこない問題と解決策

に公開
HTML
VS Code
Vue.js
Emmet
補完
tech

Emmetの補完のやつがでてこない

Emmet abbreviationが正式名称ですかね？
vscodeのhtmlの補完のやつと呼んでいて正式名称がわかんない...
何はともあれ出てこない...

普通、vscodedivとかaとかhとか入れるとリストで補完が出てくると思うんですが、
vueで久々開発しようとしたら出てこなくて発狂しました。

試したこと

ネットの情報を漁っていると以下のような設定をsettings.jsonに書けば良いと書いてあるんですが、それでも動かず...

  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
  },
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
  },

うまくいった解決策

Vue 3から推奨されているVolarの拡張機能の設定の問題でした。

拡張機能の設定に入って...

下の方までいって...

Vue › Server › Petite Vue: Support HTML Fileにチェックをいれる

動くようになりました！

!とかdiv.containerみたいなEmmetは普通に効くので、多分Volar的にはEmmetを制限したほうが書きやすいということなんでしょうね。

自分的にはあれが出ないとしっくりこないので、出てほしいです。

実はそんなに使ってないのですが笑

settings.jsonに直書きする場合

下の一文をsettings.jsonに追記するだけでもいけると思います。

"vue.server.petiteVue.supportHtmlFile": true,

以上です。

Discussion