VS Code -- emmet 2.0 -- syntax, placeholders, tabstops, ${cursor}, | , $0, $1, $2, etc.

[user3323]

Damn.. There are so many problems with all these $1, $2, $0, ${}, | , ${cursor}, etc...
No offence, but it seems like the keystone method of their work is Math.random() 😐

Well, here are some bugs, that I found:

---

---

the vertical symbol | (that should be responsible for the caret position after snippet expansion)

in the beginning of the value:

makes this snippet disappear

---

---

and at the same time everything OK, when we put this symbol | - to the end of snippet:

⬇️

---

---

if we put it in the property:

it goes out as is:

or in the property and in the value:

as is:

---

---

if it will be in the middle of the value - it would chop off a half of it:

⬇️

---

---

https://docs.emmet.io/customization/snippets/ says:

... ${cursor} or | are synonyms to $0 and used as caret position in generated output.

OK, let's check the ${cursor} thing...

... at the first glance:

... and then

So, no placeholder where we put it, nothing happened. (and BTW no focus on the "none", bug from here https://github.com/emmetio/css-snippets-resolver/issues/2 is "fixed" 😄)

---

---

well, actually no matter what you will write in the curly braces, cursor, or something else:

will give the same effect - nothing will happen:

---

---

$0 $1 - in the property
$2 - in the value

almost everything is fine:

why almost? there is no semicolon in the end.

@ramya-rao-a, btw is that ok, that emmet's snippets syntax about $0 (the first placeholder) goes upstream against VS Code snippets syntax, where $0 - the final placeholder? It makes a little confusion.

---

---

$0 $1 - in the property

the same as above... placeholders works fine, and no semicolon in the end

---

---

but, if we will try to put a placeholder just in the value
$0 - in the value

emmet will output it as is:

... with semicolon in the end

---

---

and if zero would be wrapped in curly braces, it will work as it should:

---

---

And one more thing - about mentioned semicolons.
The good old emmet module, as I remember, was absorbing semicolon in the end of user's custom snippets, if there was one.
The new emmet (ver 2.0) does not. It just adds one more.

so this:

becomes this:

---

---

[ramya-rao-a]

Caret position

Use ${1} as per Textmate snippet syntax. I don't believe Emmet 2.0 supports the | or $cursor

Text inside ${....} disappearing

As per text mate syntax, this gets treated as a snippet variable. Since there are no values defined for those variables inside Emmet 2.0 they get replaced with empty string

Using multiple tab stops results in the one defined as ${0} to be the first one instead of the final one

This is definitely a bug in the css-snippet-resolver module. When you have a snippet like
"lsn": "hello ${0} there${1} ok ${2}", the resolved snippet turns out as hello ${1} there${2} ok ${3}

$0 $1 in property name resulting in missing ;

Taking your example of "lsn": "li$0st-st$1yle: none". In this case li$0st-st$1yle isn't deemed a valid property and so the snippet gets treated as simple text rather than a property-value pair. If it were identified as valid property, then you would have gotten the ; at the end. See https://github.com/emmetio/css-snippets-resolver/blob/master/index.js#L64

This can be avoided if when checking whether snippet is a property, the $0, $1 were ignored. That I will leave to @sergeche to decide

Double semicolon
The idea here I believe was not to have user add the ;. Based on the syntax (css vs sass vs less vs stylus etc) and the customizations of css/sass/stylus.propertyEnd via emmet.preferences, the Emmet 2.0 adds the right ending.

Now should Emmet 2.0 be as forgiving as old emmet and absorb the extra semi-colon, I'll let @sergeche decide.

[ramya-rao-a]

Now, given all of the above, one pattern that emerges is that not all of the existing documentation for emmet in https://emmet.io applies to Emmet 2.0

We need to come up with a good plan to give users a source of truth.

Since VS Code is the only editor at the moment using Emmet 2.0, I guess the onus falls on us.
I'll work on updating https://code.visualstudio.com/docs/editor/emmet with all of the information on custom snippets and how it differs from the old Emmet.

@sergeche If we can have link from your website to the vscode doc saying something like "If you are using VS Code, then you are using Emmet 2.0 and most of the below doesn't apply. Please read... ", that can be helpful

[user3323]

@ramya-rao-a , here is one more thing. About the devil, that's hiding in annoying details :)

basic emmet snippet expansion for "content" looks like this:

with tabstop in the quotemarks and NO tabstop in the end.
so user should cllick at the end of the line, or find key "End" on the keyboard.
too many movements!

I decided to create my custom snippet:
"cn": "content: '${0}'${1}"

and this second tabstop, as you see, goes BEFORE semicolon
so the question is - how can user make tabstop appear AFTER the semicolon?

So my point is, that every basic and custom emmet snippet must have a final tabstop by default in the end (after semicolon), no matter would it be the only one, or would it be 2nd, 3rd, etc.

PS: it also would be good if VS Code could inform user, that comments are forbidden in snippets.json
cause, I think you already know, that if you add any - it will crash all snippets
or what would be great - to learn emmet extension to absorb comments, how it's implemented in VS Code custom user (language.json) snippets
It really confuses. When you work for a while in language.json file, leave there some comments, it works fine, and then you write some snippets in snippets.json and leave some comments there, and it crashes, with no information at all what happened. You try to use snippets, but they are gone andd you cannot figure out what the hell happened. That's what happened to me, and I think other people face to this problem as well.

[ramya-rao-a]

every basic and custom emmet snippet must have a final tabstop by default in the end (after semicolon)

VS Code adds the final tab stop if there is not already defined in the snippet. But it doesn't do so if there are no placeholders in the snippet for some reason. I have logged microsoft/vscode#33761 to track this particular issue.

[ramya-rao-a]

@user3323 Revisiting your points again and logging separate issues so that @sergeche doesn't have to wade through this long one

Using multiple tab stops results in the one defined as ${0} to be ${1}
Logged #4

$0 $1 in property name resulting in missing ;
This is related to your example of "lsn": "li$0st-st$1yle: none". Logged #5

Double semicolon if one is provided in the snippet
I have submitted a PR for this. emmetio/stylesheet-formatters#3

VS Code not adding a final tabstop at the end of the snippet
Logged microsoft/vscode#33761. This is fixed in the latest VS Code Insiders now. Please give it a try.

The snippets.json file should be tolerant towards comments
Logged microsoft/vscode#33818

@user3323 That should cover everything. Can you close this current issue?

[user3323]

@ramya-rao-a, nice! You are rigorous problem-solver! =)

[ramya-rao-a]

Thanks @user3323, and you are rigorous problem-finder :) I appreciate the time you have taken to find these issues and working with us to solve it.