Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VSCode Emmet doesn't work with Vue #147665

Closed
onurusluca opened this issue Apr 19, 2022 · 1 comment
Closed

VSCode Emmet doesn't work with Vue #147665

onurusluca opened this issue Apr 19, 2022 · 1 comment
Assignees

Comments

@onurusluca
Copy link

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
Copy link
Author

onurusluca commented Apr 19, 2022

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.

@github-actions github-actions bot locked and limited conversation to collaborators Jun 3, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants