How to Create Custom Key Binded Snippets in VS Code

Question

I am a huge Sublime Text user, and learned ways to improve my productivity using customizations in Sublime text. But as VScode is becoming popular day by day, wanted to check if there is any way which I can bind the shortcut keys to the custom actions.

For example, I select a word ABC in any file in VSCode and hit CTRL+B, and it places my own defined values around it like it should become

<b>ABC</b>

I had created the following snippet in Sublime Text, which when I wrote in Visual Studio Code - keybindings.json nothing worked.

{
    "keys": [
        "ctrl+b"
    ],
    "command": "insert_snippet",
    "args": {
        "contents": "<b>${0:$SELECTION}</b>"
    }
}

Mark · Accepted Answer · 2019-06-25 02:54:18Z

1

This will work in your keybindings.json:

{
    "key": "ctrl+b",
    "command": "editor.action.insertSnippet",
    "when": "resourceExtname == .html",         // this is optional
    "args": {
      "snippet": "<b>${TM_SELECTED_TEXT}</b>"
    }
},

The optional when clause is if you want to limit the snippet's operation to .html files.

More general though is to use the emmet command which is built-in: Emmet: Wrap with Abbreviation in the command palette. Select your text, open the command palette, find that command and trigger it - type b or whatever your element is and it will wrap the selected text with the opening and closing elements.

[Note that there is a command workbench.action.toggleSidebarVisibility already bound to Ctrl-B, but the snippet above version seems to take precedence - meaning you lose the toggleSidebarVisibility keybinding functionality - that may be acceptable to you?]

edited Jun 25, 2019 at 2:54

answered Jun 25, 2019 at 2:43

Mark

191k32 gold badges556 silver badges579 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thompson Over a year ago

Can we also use the multi cursor functionality in this like I just created a snippet. jsfiddle.net/d2xekn0w but i need to have the cursor placed after function and within if function exists i.imgur.com/KLmqqGn.png so that i can write a function name without writing it 2 times

Mark Over a year ago

Yes, see tabstops: code.visualstudio.com/docs/editor/userdefinedsnippets#_tabstops. Just use the same tabstop - like $1 in both places and you will get two cursors. If I understand you correctly...

Collectives™ on Stack Overflow

How to Create Custom Key Binded Snippets in VS Code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related