Visual Studio Code JS Snippet escape curly bracket

Question

I want to create a Snippet for Javascript in Visual Studio Code, with a placeholder that includes curly brackets, but Visual Studio doesn't seem to track bracket nesting.

My Snippet looks something like this:

"MySnippet": {
    "prefix": "snippet",
    "body": [
        "OuterFunction(() => {",
        "   //code",
        "   ${1:InnerFunction(() =>{",
        "       $2",
        "   },timeout);}",
        "});"
    ],
    "description": "create a thing"
}

and I expect this output:

OuterFunction(() => {
       //code
       InnerFunction(() => {

       },timeout);
    });

with the setTimeout Syntax as a placeholder.

Instead I get this:

OuterFunction(() => {
   //code
   InnerFunction(() => {

   ,timeout)};
});

which obviously doesn't work.

I have tried escaping the curly bracket like this \{and this {{ but it doesn't seem to work. Is there a simple way to do this or do I simply have to go with two seperate snippets for the outer and the inner function?

Skyrocket

Answer 1

Could this work?:

"MySnippet": {
    "prefix": "snippet",
    "body": [
        "OuterFunction(() => {",
        "   //code",
        "   ${1:InnerFunction(() => { $2 \\}, timeout);}",
        "});"
    ],
    "description": "create a thing"
}

Produces:

OuterFunction(() => {
   //code
   InnerFunction(() => {  }, timeout);
});

Where InnerFunction(() => { }, timeout); is selected, then inside the brackets after tabbing.

Apperceive

This produces working code, but only the name of the inner function is selected as a placeholder. My goal is to have the whole code block from line 3-5 selected. – Skyrocket

See updated answer, seems it can be done if it's in one line, using \\}. – Apperceive