VSCode Emmet doesn't work with Vue (but works with .css or .scss files)

[onurusluca]

Version

3.2.33

Reproduction link

github.com

Steps to reproduce

Create a standart Vue project from: https://vuejs.org/guide/quick-start.html#with-build-tools
Settings or versions don't matter.
Open the project with VSCode latest(v1.66.1)
Edit the CSS(between style tags) of .vue file.

What is expected?

Writing "ml10px" should give "margin-left: 10px;" but it doesn't.
Or "fdc" should give "flex-direction: center;"

What is actually happening?

Emmet abbreviation auto complete isn't working for CSS in a Vue(2 and 3 both).

---

Hi everyone! I am not sure if this is a problem of Vue but just wanted to ask.

Emmet abbreviation auto complete for CSS isn't working for CSS in a Vue(2 and 3 both) isn't working for me.
For example: ml10px should give 'margin-left: 10px;' but it doesn't.

Emmet works fine with css or scss by itself(in a .css or .scss file) but in a .vue file it doesn't.
I think this is a Volar problem as VsCode doesn't understand .vue files style. Here is the discussion: vuejs/language-tools#1211

Even though I hated it and knew it wasn't gonna work, I deleted Vscode, all it's settings etc. Reinstalled and tried without any plugins etc, still doesn't work.

This problem persist with Vue 2 or Vue 3.

I have tried VsCode emmet settings too, like emmet.triggerExpansionOnTab , emmet.includeLanguages
I have tried everything mentioned here

[onurusluca]

Just confirmed. It is a Volar problem. With Vetur it is fine. Volar is becoming default though. Hope this will be fixed soon. I looked at the code. I will try to fix and request a pull.

Update
FIX :For now anyone with the same problem:

• Add these to your VSCode settings.json:
• Restart all VsCode instances.

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

I had "vue-html": "html" but it is not enough, had to add both.