vscode snippets: How to link a position in the snippet to a tabstop?

Question

I want to create a snippet that prints the value of a variable for debugging purposes. this is what I came up with:

{
  "Debug": {
    "prefix": ["db"],
    "body": ["console.log(\"$1 :\", $1)"]
  }
}

When I use this snippet cursor goes between the quotes ( | is the cursor position):

console.log("| :",)

And after I typed the name of a variable it copies the name to the second parameter:

console.log("name :", name)

But I can't use autocompletion in strings. sometimes the variable is an object and auto-completion helps me pick a specific key of the object. I want the cursor to stop in the second parameter so I can use autocompletion:

console.log(" :", |)

And whatever I type should be copied inside the double-quotes:

console.log("name :", name)

just like the previous example but backward.

How can I do that?

UPDATE: I created an issue: https://github.com/microsoft/vscode/issues/142327

Answer 1

I assume you have Editor > Suggest: Snippets Prevent Quick Suggestions disabled and

"editor.quickSuggestions": {
  "other": true,
  "comments": true,
  "strings": true       // the important one here
},

In my testing even with those settings it still doesn't work. That does look like a bug. It fails even on the simpler case "\"$1\" $1". So something about being in a string is preventing intellisense despite the settings above.

But there is a workaround:

"Debug": {
  "prefix": ["db"],
  "body": [
        // select everything you want to surround with quotes
    "console.log(${2:$1 :}, $1)"   // you will get intellisense
  ]
}

The ${2:...} will select the result of tabstop 1 + : and then you can hit " to surround that selection with quotes. You just have to hit one more tab then you might be expecting.

Answer 2

I tried with the following version:

{
  "Debug": {
    "prefix": ["db"],
    "body": ["console.log(\"${2:$1} :\", $1);$0"]
  }
}

It starts at $1, but immediately also shows the text for $2, with TAB I can change the text between double quotes but I do not get auto-completion for $1.

I think this should be asked in an issue on the repo. $2 should copy text of $1 after the TAB and $1 should have auto-completion like it does when using

{
  "Debug": {
    "prefix": ["db"],
    "body": ["console.log(\"$2 :\", $1);$0"]
  }
}