Search code examples
visual-studio-codecode-snippetstabstopvscode-snippets

In a vscode snippet, is it possible to delete both open curly brace and close curly brace just by one key press?


I have this VSCode JavaScript snippet which is used to create an arrow function.

{
    "test1": {
        "scope": "javascript",
        "prefix": [
            "test1"
        ],
        "body": [
            "(${10:}) => ${20:{}${40:}${30:\\}}"
        ],
        "description": "test1"
    }
}

As you can see, I created separate tab stops for both the open curly brace and the close curly brace. This is because when there is only a single statement in the body of the arrow function, I don't want the curly braces and I have a chance to delete them. The problem is that, I have to delete them by pressing the delete key twice, since they are in different tab stop. See below image.

Is there a way to change the snippet so that when the tab stop is on ${20:{}, after I press the delete key once, the matching close curly brace ${30:\}} will also get deleted?


Solution

  • This works

    "test1": {
        "scope": "javascript",
        "prefix": [
            "test1"
        ],
        "body": [
            //"(${10:}) => ${20:{}$40${30:\\}}"
            "(${1:}) => ${2:{$3\\}}"
        ],
        "description": "test1"
    },
    

    Now the third tabstop $3 is inside the $2 placeholder. If you want the {} just tab to the next tabstop $3. If you don't want the ${} just delete them and tab to the last tabstop. Then as always you will have to tab to accept what you wrote in the last tabstop.