microsoft/vscode

VSCode Emmet doesn't work with Vue

onurusluca opened this issue · 1 comments

onurusluca commented

Does this issue occur when all extensions are disabled?: Yes

  • VS Code Version: v1.66.1
  • OS Version: Windows 10 x64 Latest(Version 10.0.19044 Build 19044)

Same Issue in Vue official Github: vuejs/core#5749
The problem may occur because of Vue but to confirm I am opening an Issue here as well.

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 VsCode 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. Also it still doesn't work without or with Volar. I think it's just a Vue thing. I desperately need Emmet abbreviation, I use it all the time.

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
2.

onurusluca commented

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.