VS Code : variables in custom snippet

Question

How do I create a custom snippet that will automatically enter a variable's value that I type into its prefix?

I want a snippet that will create a html start-end tag comment block. For example if I type /se hello I want the result to be

<!-- $var start-->
<!-- $var end-->

Where $var is replaced with "hello". Thank you for reading!

Answer 1

As the VSCode snippet docs says, it uses TextMate to power its snippets. TextMate uses variables of the form $name and ${name:default}, and luckily supplies $TM_CURRENT_WORD which may be sufficient for your needs. However there is no built in variable to get multiple arguments directly after the snippet name i.e. $arg1 and $arg2 as variables. Thought you could do a similar effect with interpolated shell code, but unfortunately:

The snippet syntax follows the TextMate snippet syntax with the exceptions of 'interpolated shell code' and the use of \u; both are not supported.

^{Emphasis mine}

However for this simple example, the following indexed variable example is probably sufficient.

<!-- 1ドル start-->
 0ドル
<!-- 1ドル end-->

$i gives you a value to fill in, you can go between each one with tabbing. The 0ドル is where the cursor goes at the end(the end of the snippet by default). Optionally you can do something like:

<!-- ${1: default text} start-->
 0ドル
<!-- 1ドル end-->

and it'll start looking like:

<!-- default text start-->
<!-- default text end-->

with both of the defaults selected to edit.

This all put together would look like this together in the snippets.json file:

{
 "se": {
 "scope": "html",
 "prefix": "se",
 "body": [
 "<!-- ${1:default text} start-->",
 "\t0ドル",
 "<!--1ドル end-->"
 ]
 }
}

As @Mark pointed out, if you want it to work for more than just HTML you can use $BLOCK_COMMENT_START and $BLOCK_COMMENT_END which will vary for each language. The snippet would then look like this:

{
 "se": {
 // Leaving scope off will make it a global snippet
 "prefix": "se",
 "body": [
 "$BLOCK_COMMENT_START ${1:default text} start $BLOCK_COMMENT_END",
 "\t0ドル",
 "$BLOCK_COMMENT_START1ドル end $BLOCK_COMMENT_END"
 ]
 }
}

• Mark: I suggest "$BLOCK_COMMENT_START 1ドル start $BLOCK_COMMENT_END", and "$BLOCK_COMMENT_START 1ドル end $BLOCK_COMMENT_END", - it'll work in more file types than just html. And with the 0ドル in the middle line. It'll insert the proper comment types automatically.
• David Archibald: I hadn't been thinking about making it language agnostic, and since it's an important point I've incorporated it into my answer now to give it more visibility, thanks!