Vscode: Emmet snippets -> to the TOP of snippets list

[user3323]

• VSCode Version: 1.15.0
• OS Version: win7x64

Well, now "Tab" and it's double-action for tabing and Emmet expand cannot do it anymore, as I see.
So, what about setting, that will put Emmet snippets TO THE TOP of the common snippets list?

We have nice setting called "editor.snippetSuggestions" and one of its value called "top"
But it works only for snippets, written in "[language].json" files.

So, what about Emmet snippets? It also should have settings like this!

[ramya-rao-a]

Emmet is now an extension.

The editor.snippetSuggestions setting applies to suggestions from extensions that are snippets.

Currently emmet doesn't return the suggestions as snippet, because I was concerned about users who might have set editor.snippetSuggestions to none or bottom will never be able to see the real time preview or get emmet suggestions up top.

But you raise a good point.

When users have set editor.snippetSuggestions to top, emmet suggestion now goes down. Which is not good either.

One hacky way around this is for the emmet extension to use the "snippet" type on the emmet suggestions when editor.snippetSuggestions is set to top.

This way, when editor.snippetSuggestions is set to top, emmet will be the first in the list.
In all other times, in html, it already is the first in the list
In css, it is sorted among other suggestions.

[ianjmacintosh]

It took me a minute to find this issue, but I'm glad I did.

I downloaded 1.15.1 today and agree it would be even better if I could bubble Emmet's CSS suggestions to the top.

EDIT: Oops, bad screenshot -- I was trying to include an example of me trying to add text-align: center; to a rule and being presented with some much less popular properties... but the one I want is already there on line 96. You get the idea though. 😁

[ramya-rao-a]

Added a new setting emmet.showSuggestionsAsSnippets. When this is enabled, emmet suggestions will show up as snippets (with the snippet icon), grouped with rest of the snippets and will honor the ordering as configured in the setting editor.snippetSuggestions

With emmet.showSuggestionsAsSnippets enabled and editor.snippetSuggestions set to top, you can be assured to have emmet suggestions always show up at the top.

I am adding a setting and not making this the default due to the concern I explained before. Which is that users who have editor.snippetSuggestions set to bottom or none will be at a loss

@user3323, @ianjmacintosh, @vvs, @dimondevs
This feature will be out in tonight's (Aug 31) Insiders build. You can get the Insiders from https://code.visualstudio.com/insiders. Can you give it a try?

[vvs]

WHOA, this is great! Now I could add all my quick Emmet snippets, like p for padding, m for margin, b for border, c for color etc, and they all are at the top the suggestion list, so they finally work as expected! :)

[dimondevs]

Thank you @ramya-rao-a , everything works as expected.

[ramya-rao-a]

@vvs When you say "my quick Emmet snippets" do you mean your custom ones or the default ones from emmet?

[ianjmacintosh]

@ramya-rao-a Awesome work, thank you for addressing. I can confirm in a clean install of 1.16.0-insider with settings:

{
    "emmet.showSuggestionsAsSnippets": true,
    "editor.snippetSuggestions": "top"
} 

After typing tac in a CSS file:

[vvs]

@ramya-rao-a,

When you say "my quick Emmet snippets" do you mean your custom ones or the default ones from emmet?

I meant my custom emmet snippets. But it looks like I don't need to create those custom snippets at all, since the default ones work great when I set Emmet suggestions to be treated as snippets and put them on top.

So, all those p, m, c and bd now work as expected with no extra work to create custom emmet snippets. Well done! :)

[ramya-rao-a]

@vvs Yup, that was what I was hoping for, that you wouldn't have to create custom snippets for things which have default ones set up.

@ianjmacintosh @vvs @dimondevs Thanks for verifying and Happy Coding!