Emmet doesn't work with vue files

[ppasieka]

• VSCode Version: 1.14.0
• OS Version: Windows 10

Steps to Reproduce:

1. set in settings

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

2. open vue file
3. start typing ul>li [press TAB]
   nothing happens.
   But if I use Ctrl+Shift+P and select Emmet: Expand Abbreviation then it works

Also in HTML file I have this nice intellisense with preview how tags will be expanded. In vue file nothing like that appears

Reproduces without extensions: Can reproduce with only vetur extension enabled

[Fred-Vatin]

@ppasieka

Could you try with these settings, please, and feedback. I didn't try specifically for vue but set "emmet.showExpandedAbbreviation": "always" seems to do the trick by design for the languages I set in "emmet.includeLanguages" in VSCode 1.14.0.

    "emmet.useNewEmmet": true,
    "emmet.showAbbreviationSuggestions": true,
    "emmet.showExpandedAbbreviation": "always", // required to work with "emmet.includeLanguages"
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "vue-html": "html"
    }

[ramya-rao-a]

From https://code.visualstudio.com/updates/v1_14#_emmet-abbreviation-improvements

What @freMea said is right.
To get emmet in the suggestion list for any files that are not supported by default, you need to set "emmet.showExpandedAbbreviation": "always" or have an extension that implements the emmet completion provider

[ramya-rao-a]

Also note that emmet.triggerExpansionOnTab does nothing in the new emmet model

[ppasieka]

Still does not work. Even with @freMea setting. But its probably vetur-extension fault.

I've created new untitled file with code like this:

<template>
  ul>li  // <--- this is what I want to expand
</template>

2. I changed language modes
   HTML -> it worked 👍
   vue-html -> it worked 👍
   vue -> it does not worked 👎

[ramya-rao-a]

@ppasieka When you say "it worked" do you mean the command Emmet: Expand Abbreviation worked or that emmet expansion appears in suggestion list?

[ppasieka]

@ramya-rao-a by 'it worked' I meant that I had full experience with intellisence - with this nice preview how abbreviation will expand. Also TAB key worked

vue -> it does not worked : here intellisence does't show and TAB does not work. But Emmet: Expand Abbreviation from command palette works

EDIT:
In summary I have settings like the one suggested by @freMea and i change language modes in one file
from HTML through Vue-html to vue. and Emmet works only in HTML and vue-html

[Fred-Vatin]

@ppasieka
Could you try to do this when writing in your problematic file:
ul>li or whatever HTML code then press CTRL+Space to force suggestion to show. Does the suggestion tooltip display then? If yes, do you see emmet expansion there?

It seems that this extra step is necessary (at least tested in markdown files here) for some file type even with these settings:

    "emmet.useNewEmmet": true,
    "emmet.showAbbreviationSuggestions": true,
    "emmet.showExpandedAbbreviation": "always"

[ppasieka]

@freMea
unfortunately Ctrl+Space also does't work in vue files. But @octref added today extra note about emmet support in Vetur documentation, and it says:

New Emmet support is not available

I just have to wait... and for now useNewEmmet must be set to false :)

[Fred-Vatin]

@ppasieka If there is an open issue somewhere in vue repo or else to follow, feel free to share.

[ramya-rao-a]

In VS Code 1.15, add the setting

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

and you will see emmet suggestions for html as you type.

But you wont get css emmet suggestions in the <style> tag.

That is tracked in vuejs/vetur#232