VSCode: Assign key command to a snippet?

Question

In previous editors I've users, notably SublimeText and Atom, I was able to create a simple command to add a character like   when I type option-space.

In Atom, for example, I created the command in init.coffee:

atom.commands.add 'atom-text-editor',
 'editor:insert-nbsp': (event) ->
   editor = @getModel()
   editor.insertText('&nbsp;')

and then the easy part, a keybinding to call the custom command:

  'alt-enter': 'editor:insert-br'

In vscode, I know how to do the latter (create a keybinding) but how to create the command.

I realize I can create a snippet, which I have made several of, but I want to essentially trigger the   snippet with a keybinding.

How can I do this?

Steve · Accepted Answer · 2017-03-24 17:20:17Z

6

It's actually much easier in VSCode since 1.9:

{
 "key": "alt+space",
 "command": "type",
 "args": {
   "text": "&nbsp;"
 },
 "when": "editorTextFocus"
},

answered Mar 24, 2017 at 17:20

Steve

15k39 gold badges141 silver badges247 bronze badges

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

Comments

Travis Heeter · Accepted Answer · 2019-05-15 15:33:28Z

I had trouble with this, so here's the whole process of creating a keybinding, snippet, and linking them together:

1. Create a Snippet

File > Preferences > User Snippets > New Global Snippets file...

This will prompt you to create a snippets file.
Name the new Snippet file whatever, I'll name mine "global"

This will create a file called global.code-snippets
Create your snippet

The new snippet file will have an example commented out. Just uncomment that to follow along.
Save The file

You now have a global file with a single snippet. Typically snippet files will have many snippets, and are divided according to workspace, environment or something else - this is outside of this scope, but you'll get the hang of it once you start creating more advanced snippets.

2. Create a Key Binding

File > Preferences > Keyboard Shortcuts

This will open your Keyboard Shortcuts menu
In the upper-right corner of the editor window, find the button that looks like brackets => {} => click it

This will open keybindings.json, a file where you can store your custom keyboard shortcuts.
In the bottom of the editor pane, you will see a button that says "Define Keybinding (Ctrl+K Ctrl+K)" Click that

This will prompt you to enter a key combination.
Push CtrlShiftc, then Enter

Ctrl+Shift+c is recorded, and Enter creates a new keybinding for that key combination automatically.

3. Link the Keybinding to the Snippet

In case you don't need the deeper explanation, here's what your new key binding should look like at the end:

[
    {
        "key":"ctrl+shift+c",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "name": "Print to console"
        }
    }
]

In the keybinding, change the command to "editor.action.insertSnippet"

"command": "editor.action.insertSnippet",
Add an args key, it's value is an object

*When you start typing args VSCode will pick up on it and suggest a code completion, go ahead and press tab or enter, and it will automatically put quotes and build an empty object for you.

"args": {}
Inside the args object, add name.

*Same things as before, just type name, VSC will suggest a code completion, accept it, and it will build out the necessary syntax.

"args": { "name": "" }
The name refers to the snippet name, which is the first element of the snippet object. For our example, this will be "Print to console".

"args": { "name": "Print to console" }

4. Make sure it works

Create or open a javascript file (any file that ends with .js)
Press CtrlShiftc
console.log('') sould be printed in your file
If it doesn't work make sure the names match exactly - capitalization matters!

alefragnani · Accepted Answer · 2017-03-24 13:47:03Z

4

You can create a Keybinding and assign a Snippet to it.

To to that you must use editor.action.insertSnippet as command, and your snippet name in args attribute.

Follow this example:

```

{
    "key": "ctrl+shift+alt+i",
    "command": "editor.action.insertSnippet",
    "args": {
        "name": "YourSnippetName" // name of a snippet defined by an extension or user
    }
}

```

answered Mar 24, 2017 at 13:47

alefragnani

3,39314 silver badges22 bronze badges

Collectives™ on Stack Overflow

VSCode: Assign key command to a snippet?

3 Answers 3

Comments

1. Create a Snippet

2. Create a Key Binding

3. Link the Keybinding to the Snippet

4. Make sure it works

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1. Create a Snippet

2. Create a Key Binding

3. Link the Keybinding to the Snippet

4. Make sure it works

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related