Enable the use of the new emmet feature in vscode 1.13

[MWallin]

With the new emmet configured I lose the feature completley in template sections in .vue files. It would be super awesome to get this back!

Link to the new feature in the update post:
https://code.visualstudio.com/updates/v1_13#_emmet-abbreviation-expansion-in-suggestion-list

[octref]

I'm interested in doing that too.

@ramya-rao-a Wondering if I need to extract extensions/emmet (hope not, I don't want to keep manually updating it), or will new emmet continue to support syntaxProfiles.
I do have vue file regions marked correctly with their embedded lang.

Previously this worked fine:

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

[octref]

@ramya-rao-a NVM didn't see it on the May iteration issue, but saw on microsoft/vscode#27697.

To all others: syntax profile seem to be on the agenda for VSCode June release.

[ramya-rao-a]

Yes, actually supporting syntaxProfiles was the next thing in my list of to-dos for emmet. You will see this in the next few days in the Insiders.

[octref]

If you get it before 22nd I can demo its awesomeness at VueConf 😉

[ramya-rao-a]

haha, sure I'll try

[ramya-rao-a]

@octref I just pushed in the changes required to support this. It didn't make it to Tuesday's Insiders build though. Can you test from master and see if it works as expected for you?

I need a second pair of eyes for testing :)

[octref]

👍 👍 👍

[octref]

Closing since this will be available in VSCode's June release.

[octref]

@ramya-rao-a

I'll just report issues here instead of opening new ones at VSCode.

[ramya-rao-a]

Logged microsoft/vscode#29114
Cant guarantee this one by the 22nd :)

[octref]

Reopen to keep track of integrating https://www.npmjs.com/package/vscode-emmet-helper

[octref]

@ramya-rao-a
Took a look but the helper presumes access to vscode which Vetur can't include in its LS.
To make it usable by other LS, it should take types from vscode-languageserver-types.

[ramya-rao-a]

@octref Good point.

I am out for the week at a conference, won't have time to make the change.
If you don't mind, can you send a PR to the helper?

[ramya-rao-a]

@octref I have updated the helper.

Language servers can now call doComplete(document, position, syntax, emmetConfig);
where emmetConfig is an object following the interface. I'll add types soon

export interface EmmetConfiguration {
	useNewEmmet: string;
	showExpandedAbbreviation: string;
	showAbbreviationSuggestions: boolean;
	syntaxProfiles: object;
	variables: object;
}

Can you give it a try?

[octref]

Thanks a lot. Just landed in China from Warsaw -- I'll give it a try soon.

[ramya-rao-a]

@octref On second thoughts, it would be much better if we include this completion provider in html and css language service. That way vue and other languages that already have html/css completions using the built-in html/css extensions get it for free.

Let me know if you want to collaborate on that

[octref]

I'd want to collaborate on that. But OTOH our plan is to rewrite / extend on the html LS for supporting Vue's js-in-template like <div v-if="this.foo > 5">, instead of keep depending on html LS.

Believe that's the same case for ember / angular templates, so I don't know if it's worth it.

It's just China internet gives me a hard time + I'm busy traveling...I'll give it a shot tonight.

[HerringtonDarkholme]

I found this works.

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

Strangely, style tag in vue file doesn't have emmet completion as that in html file.

@ramya-rao-a Would you like kindly tell us something about embedded language support in emmet2?

[ramya-rao-a]

@octref What happens when users have mapped vue-html to html and are getting emmet suggestions out of the box?

[octref]

That works partially. vue-html is only for the template region, so they wouldn't have it for css/less/scss/stylus emmet, which I already added and will release soon.

[ramya-rao-a]

I get that, I am wondering if they will get double suggestions in the vue-html region

[octref]

Just tested microsoft/vscode#22585 (comment), for includeLanguages,

• vue-html to html: no effect at all. dunno why he added this
• vue to html: works fine in template. With my new change, having this setting will have double suggestions in template but not in other regions

[yyx990803]

With a fresh install of everything from yesterday, the following seems to be working without double suggestions:

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

The caveat being that emmet suggestions also show up in <script> and <style> sections, which can be annoying when using <style lang="stylus"> as hitting enter after typing a selector expands the emmet suggestion.

[octref]

@yyx990803 Got u sir.

0.9.4 should work with html/css/scss/less/stylus, without includeLanguages.
(With your current setting there will be duplicate emmet suggestions in <template>.)

[yyx990803]

Just tested and it works perfectly now (without any emmet settings)! 💯

[wernerm]

It now works for me too in Vue template, however I can only seem to complete valid HTML5 elements - custom element names do not get completed, eg: <my-element> does not get completed, but <div> does.

[ramya-rao-a]

@wernerm That is intentional. Emmet has no way of differentiation custom element names from text that are not meant to be abbreviations. We needed to avoid suggesting every word ever typed as a tag.

So we maintain a white list for commonly used HTML5 elements (So div, span etc will trigger emmet suggestions)

Keep in mind my-element.my-class will expand as expected

To expand just the custom element, use Emmet: Expand Abbreviation command directly or via a key binding or set emmet.triggerExpansionOnTab to true to expand on tab

[wernerm]

@ramya-rao-a Thanks for the information.

Since custom element names are quite common in Vue it would be nice if we could somehow add to the white-list of element names. (One of the main purposes of Emmet is to save keystrokes after all.)

[ramya-rao-a]

You can add it to your custom snippets. See Custom Snippets in Emmet on how to have custom snippets in Emmet.

In your case it would look like

{
    "html":
         "snippets": {
                     "my-element": "my-element"
          }
}

Which feels a little silly actually....

Or we could have a new setting emmet.suggestions.additionalHtmlElements where you can provide tags that should be considered in suggestions

[wernerm]

@ramya-rao-a Thanks. Having a setting available would be a nice way to address the issue.

[alexsasharegan]

It might be ideal for various contexts to customize emmet expansion by language setting to either utilize a whitelist of tag names or enable some kind of tag regex. In the vue context, custom tags almost contain a namespace prefix, so it could be something like match: [/^el-*/, /^b-*/].

[ramya-rao-a]

@alexsasharegan Can you try the latest Insiders? You can get it from https://code.visualstudio.com/insiders

There I have enabled emmet suggestions for tag completion when the tag contains a single - or : in between text. That should help

[alexsasharegan]

Whoa... fancy new insiders icon! I like it 😉

So, it's sort of working. Basic tag names are functioning:

Here we have a more verbose component name that is failing to suggest tag completion:

UPDATE
Potentially relevant info... I've been using this settings config:

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

[ramya-rao-a]

@alexsasharegan added support for tags with multiple - in them with microsoft/vscode-emmet-helper@8517fe7

Tomorrow's Insiders will have the fix

[alexsasharegan]

I'll give it a whirl tomorrow. Thank you!

[ramya-rao-a]

@alexsasharegan The vetur extension will need to use the latest version(1.0.22) for the emmet helper though.

[HerringtonDarkholme]

Thank @ramya-rao-a for continuous support!

[lucaskatayama]

@yyx990803 Thanks!!! That solved my TAB problem with those last versions!

[YinanZhaoXometry]

the css emmet expansion in *.vue file works perfectly!
But the user CSS snippets for emmet in *.vue file not working ( user HTML snippets works fine!)
Could you please have a look?

i define a css snippet:

it works fine in *.styl file:

but the user snippets now shown in *.vue file:

[mreduar]

@alexsasharegan Can you try the latest Insiders? You can get it from https://code.visualstudio.com/insiders

There I have enabled emmet suggestions for tag completion when the tag contains a single - or : in between text. That should help

Greetings! I know this is an old topic, but I would like to know if there is a way that this behavior can be used for components that have neither - nor : Since Vue in its standards recommends the use of PascalCase for Single-File Components (SFCs) it would be great to be able to expand the custom elements.

In SFCs, it's recommended to use PascalCase tag names for child components to differentiate from native HTML elements. Although native HTML tag names are case-insensitive, Vue SFC is a compiled format so we are able to use case-sensitive tag names in it. We are also able to use /> to close a tag.

More info here