Emmet doesn't work properly

[aantipov]

In raw html files typing abbreviations invokes emmet suggestions and live-preview:

In <template> section of Vue file there is not emmet suggestions nor live-preview:

I believe such "non-full" support of emmet is the cause of emmet not working properly together with VSCodeVim extension.
Whenever an abbreviation is expanded, VSCodeVim goes into "Normal" mode => the following typing doesn't work as expected

[sethidden]

I can't reproduce this with and without vscodevim — emmet completions appear normally in both.

See also #692

Can you disable all extensions but Volar and Vscodevim then try Emmet in a yarn create vite project (as mentioned in the discussion linked above)?

[johnsoncodehk]

This may be related to your VSCode settings. Could you backup and completely clear your VSCode settings and try again?

You can use Preferences: Open Settings (JSON) and Preferences: Open Workspace Settings (JSON) commands to check your settings.

[aantipov]

I just tried github.dev in incognito window with a freshly created Github account and the problem is still there.
Could you try this file https://github.dev/vuejs/blog/blob/master/.vitepress/theme/Layout.vue ?

So it seems to me not the problem with settings or extensions.
Maybe I need to specify some Emmet settings to properly treat Vue files?

[johnsoncodehk]

We only support syntax highlight in web IDE for now, please track #612.

[geirmarius]

@aantipov I had the same problem just now, but it somehow solved itself when I downgraded one version, then upgraded back to the newest. Removing and reinstalling would probably have the same effect.

No idea what the issue was tho, as it worked before the weekend, and when I came back today it didn't.

[johnsoncodehk]

@geirmarius Can you always reproduce it based on some steps?

[geirmarius]

Not sure what I can do to reproduce it sorry. Seems whatever I try it works now.
When it happened, it also didn't detect any tsconfig (at least according to the status bar on the bottom right of vs code), if that helps.

[aantipov]

I created an new mac account, installed a fresh VSCode+Volar
Tried Vue files - the problem is the same.

but it somehow solved itself when I downgraded one version, then upgraded back to the newest.

I tried different versions of the extension. It didn't help unfortunately

it also didn't detect any tsconfig

Confirm. Same to me

I also tried the following Emmet settings. Didn't help either

[johnsoncodehk]

I tried delete tsconfig.json in https://github.com/johnsoncodehk/volar-starter to make No tsconfig status but can't reproduce.

@aantipov did you also tried clear your settings?

[aantipov]

Ok, it works in Volar starter.
And now I see that it works in some vue files and doesn't work in others.

If you clone my repo https://github.com/aantipov/moiva, then you most probably will notice the same:

1. Emmet works in Vue files under src/ folder and tsconfig is found
2. Emmet doesn't work under blog folder and has No tsconfig

If you clone https://github.com/vuejs/blog, then Emmet won't work under .vitepress folder

Hope that helps

[johnsoncodehk]

@aantipov thanks for your repro case, this is expected behavior consistent with TS, you need to add "blog/**/*.vue", "blog/.vitepress/**/*.vue" to the tsconfig's include option.

[aantipov]

Didn't know that tsconfig could affect the way emmet works.
The problem is fixed now. Thanks 🙏

[daguitosama]

Still dosen't work for me, turn off Vetur and turn on Volar, Emmet goes away, turn off Volar and turn on Vetur, and Emmet is back.

[abitwhy]

@aantipov

Didn't know that tsconfig could affect the way emmet works. The problem is fixed now. Thanks 🙏

This is a wrong conclusion. I will give the real solution in next comment.

And as you see, you miss the solution because you missed the update.

[abitwhy]

Solution

• Setting UI

1. Search emmet.includeLanguages
2. Add vue:html
   official example vue-html:html didn't work, don't knwon why.

OR

• Setting File

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