Visual Studio Code snippet as keyboard shortcut key

Question

I know how to modify and create code snippets and I know how to modify shortcut keys, but how does one bring those 2 together?

Answer 1

Note that the line below will open a list of snippets defined for the language you are currently using (and you don't want that)

"args": { "snippet": "'$TM_SELECTED_TEXT'" }

Whereas with the below line the snippet given as argument will be executed right away

"args": { "name": "your_snippets_name" }

Here's how I defined a snippet for HTML where I wanted to select a text and when pressing CTRL+B the text to become enclosed in <strong></strong> tags:

"make_strong": {
    "prefix": "strong",
    "body": [
        "<strong>$TM_SELECTED_TEXT${1:}</strong>"
    ],
    "description": "Encloses selected text in <strong></strong> tags"
}

Note the ${1:} above - what this does is that it places the cursor there. This enables you to press CTRL+B at cursor and then have the cursor placed inside the <strong></strong> tags. When selecting a string and pressing CTRL+B, the selected string will be enclosed in <strong> tags and the cursor will be placed before the closing </strong> tag. Pressing TAB at this point, will put your cursor after the closing </strong> tag.

And added in my keybindings.json the following:

{
    "key": "ctrl+b",
    "command": "editor.action.insertSnippet",
    "args": { "name": "make_strong" }
}

UPDATE JUNE 2nd, 2021

Since this is getting lots of views, I am posting some of the snippets I use, maybe it will be useful to someone

{
    "key": "ctrl+alt+u",
    "command": "editor.action.transformToUppercase"
},
{
    "key": "ctrl+alt+l",
    "command": "editor.action.transformToLowercase"
},
{
    "key": "ctrl+b",
    "command": "editor.action.insertSnippet",
    "args": { "name": "insert_strong" }
},
{
    "key": "ctrl+i",
    "command": "editor.action.insertSnippet",
    "args": { "name": "insert_italic" }
},
{
    "key": "ctrl+u",
    "command": "editor.action.insertSnippet",
    "args": { "name": "insert_underline" }
},
{
    "key": "ctrl+alt+p",
    "command": "editor.action.insertSnippet",
    "args": { "name": "insert_paragraph" }
},
{
    "key": "ctrl+shift+space",
    "command": "editor.action.insertSnippet",
    "args": { "name": "insert_nbsp" }
},
{
    "key": "ctrl+enter",
    "command": "editor.action.insertSnippet",
    "args": { "name": "insert_br" }
},

Answer 2

1. Call Command Palette in View menu

2. Hit "shortcuts json" and OK

3. Then append under code blocks

   {
     "key": "shift+alt+l",
     "command": "editor.action.insertSnippet",
     "when": "editorTextFocus && editorLangId == 'js'",
       "args": {
       "snippet": "console.log($1);$0",
       }
   },
   {
     "key": "shift+alt+l",
     "command": "editor.action.insertSnippet",
     "when": "editorTextFocus && editorLangId == 'dart'",
     "args": {
       "snippet": "print($1);$0",
     }
   },
   

If you press Shift+Alt+L in JavaScript then put "console.log();" to your editor,

And press Shift+Alt+L in Dart then put "print();" to your editor,

with the same shortcut.

Answer 3

Here are 3 steps to create a code snippet along with a shortcut.

1. Code -> Preferences -> Keyboard Shortcuts

2. Click on icon for keybindings.json file

3. Add JavaScript objects for Code Snippet/Shortcuts

For example i have created snippets for logging purposes as I mostly work with JavaScript Frameworks.

1.console.log('') with shortcut Control (or Ctrl) ⌃ + l

2.console.warn('') with Control (or Ctrl) ⌃ + w

3.console.error('') with Control (or Ctrl) ⌃ + e

Code:

{
    "key": "ctrl+l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2"
    }
},
{
    "key": "ctrl+w",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "snippet": "console.warn('${TM_SELECTED_TEXT}$1')$2"
    }
},
{
    "key": "ctrl+e",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "snippet": "console.error('${TM_SELECTED_TEXT}$1')$2"
    }
}

Answer 4

It would seem that, as of version 1.9, Visual Studio Code can do what you are looking for, no other extensions necessary.

From https://code.visualstudio.com/updates/v1_9#_insert-snippets

"You can now bind your favorite snippets to key bindings. A sample that encloses a selection with single quotes looks like this:"

Add the snippet below to keybindings.json (open Keyboard Shortcuts editor and click on the For advanced customizations open and edit keybindings.json link)

{
    "key": "cmd+k",
    "command": "editor.action.insertSnippet",
    "args": { "snippet": "'$TM_SELECTED_TEXT'" }
}