Support custom snippets in new Emmet

[ramya-rao-a]

With ac60143 the snippets.json file from emmet.extensionsPath is now read and used by new emmet

But since the new emmet modules do not use old style snippets, only the variables section of the snippets.json file is used.

This issue is to track the possibility of having custom snippets in the new emmet as well

[Fred-Vatin]

VS Code version	OS
1.14.0	Win 10 x64 pro (french) 14393

Yes with v1.14.0, there is improvements but as you said, our custom emmet snippets are not honored with "emmet.useNewEmmet": true, only variables are loaded.

Example:

	"css": {
		"snippets": {
			"!": "!important;",
			"bxsh:h": "box-shadow:${1:inset }${2:hoff} ${3:voff} ${4:blur} ${5:spread }hsl(${6:0}, ${7:100}%, ${8:50}%);",
			"bxsh:ha": "box-shadow:${1:inset }${2:h} ${3:v} ${4:blur} ${5:spread }hsla(${6:0}, ${7:100}%, ${8:50}%, ${9:1});",
			"c:h": "color:hsl(${1:0}, ${2:100}%, ${3:50}%);",
			"c:ha": "color:hsla(${1:0}, ${2:100}%, ${3:50}%, ${4:1});",
			"tsh:h": "text-shadow:${1:h} ${2:v} ${3:blur} hsl(${4:0}, ${5:100}%, ${6:50}%);"
         }
     }

One can not use c:h then tab key to expand our custom expansion that are ignored. It is the same for some old default one that are still not implemented in the new emmet module such as

"c:r": "color:rgb(${1:0}, ${2:0}, ${3:0});",
"c:ra": "color:rgba(${1:0}, ${2:0}, ${3:0}, .${4:5});"

But we can still use Code built-in snippets feature for that 😉 Maybe it's time to convert my emmet snippets to the built-in one.

[ramya-rao-a]

Maybe it's time to convert my emmet snippets to the built-in one.

Yes please.

There is no good way to do this in the new emmet model until @sergeche comes up with a plan on how he wants to do this.

So chances are we are going to ask our users to use vscode custom snippets instead of the emmet custom snippets

[sergeche]

Old CSS snippets are mostly the same as new ones: https://github.com/emmetio/snippets/blob/master/css.json Except that : is not allowed in snippet name since it’s used to explicilty separate property name and value and use value part for further completions. I guess you can safely load css.snippets config as snippets for new Emmet but remove : from names

[Fred-Vatin]

@ramya-rao-a

The limitations I see with vscode custom snippets are: how can we share a common snippets file across multiple language instead of duplicating snippets for each one? (php, html, etc.) Am I clear about this issue?

[ramya-rao-a]

@freMea I believe there is an open issue for that
@sergeche I'll give that a try

[ramya-rao-a]

Done!

It needed a little work as in we can't simply pass the snippets json directly as we did before.

@freMea You will have to update the abbreviation for your snippets in the following way

• no : in the abbreviation like @sergeche mentioned above
• the abbreviation should fuzzy match with the expanded value. As in you cannot have {"xyz": "margin"} This will work when you explicitly use Emmet: Expand Abbreviation but in the autocompletion it will get filtered out as there is no x or y or z in margin

[ramya-rao-a]

@sergeche When expand takes in the options, the snippet registry being passed is just for current syntax.

Say user has configured snippets for css. The editor creates a registry for "css" with these snippets and passes to expand when user is in a css file.
Now if the user goes to a scss file, they would expect their css snippets here as well.

For this to work, editor needs to maintain the inheritance hierarchy.

Anyway, we can have this logic in the expand-abbreviation module?