Is there a way to add a blank option with VS Code snippets placeholder choices? - visual-studio-code

Question

I am trying to create a snippet that gives me choices for optional attributes. I have used this approach in the past where I just put a blank space as a choice in the placeholder. That works when there is only one option between other parts of the snippet but like in the following example if I wanted to skip both placeholders (optional attributes on the adorn) there would be multiple spaces in the generated code which I would have to delete manually.
"Adorn":
"prefix": ["adorn"],
"body": [
"<%= adorn${1| , color: :blue, color: :white|}${2| , inline: true|} do |a| %>",
"\t$0",
"\t<%= a.adornment %>",
"\t\t",
"\t<% end %>",
"<% end %>"
],
"description": "An adorn"
},
From what I can see in the documentation it doesn't seem possible to do what I want using placeholders and choices. I thought I could use a variable and just have it resolve to empty string but the grammar doesn't seem to allow for that.
Is there any other way to accomplish what I am trying to do?

Answer 1

You can use some unicode characters in snippets, so I tried backspace (did not work) but \u200B which is a "zero-width space" does. So you can do this in your choices:
{1|\u200B, color: :blue, color: :white|}${2|\u200B, inline: true|}
and if you choose the blanks (i.e., the \u200B's) a zero-width space will be inserted. And you get what you want - no spaces to be deleted.
But I leave it to you to see if there are any parsing or other problems with having that character in your code. Maybe it is or isn't a problem in your language. See the open issue (which I found after posting this answer initially) https://github.com/microsoft/vscode/issues/34368 ("Allow "empty" as a choice in snippets
") where the zero-width space option is warned against and may cause problems - so test it. It doesn't look like there is any other option but a regular space which you have tried.
I tried "null" \u0000 and it wasn't recognized by vscode.

Answer 2

if a blank space is all you need, then all is needed is an '$1' that the placeholder.
but first let's see if you have errthing
First
at the root of yow project you need a new dir call .vscode
in side yow dir add a new file NOTE name is very important yow new file's must have this pattern any.code-snippets
in side yow new file add this
{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
"Print to console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}
To finish I recommend you to remove the scope attribute. and do not use the file for more than one language, bcuz if you do so it may not work at all.

Answer 3

The best way to get an empty value for a placeholder with choices is to add a choice of 1 character and remove this with Delete or Backspace (depending where the cursor is, it differs for the 2 placeholders) and then TAB to the next placeholder.
To get the choice list for placeholder 2 press TAB when you are at placeholder 2.
Watch the location of the separating spaces, they are at the end of the choice.
"Adorn": {
"prefix": ["adorn"],
"body": [
"<%= adorn ${1|e,color: :blue ,color: :white |}${2|e,inline: true |}do |a| %>",
"\t$0",
"\t<%= a.adornment %>",
"\t\t",
"\t<% end %>",
"<% end %>"
],
"description": "An adorn"
}