Search code examples
javascriptvisual-studioescapingcode-snippetscurly-braces

Visual Studio Code JS Snippet escape curly bracket


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?


Solution

  • 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.