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(' ')

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?

Answer 1

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

1. Create a Snippet

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

   This will prompt you to create a snippets file.

2. Name the new Snippet file whatever, I'll name mine "global"

   This will create a file called global.code-snippets

3. Create your snippet

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

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

1. File > Preferences > Keyboard Shortcuts

   This will open your Keyboard Shortcuts menu

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

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

4. 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"
        }
    }
]

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

   "command": "editor.action.insertSnippet",

2. 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": {}

3. 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": "" }

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

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

Answer 2

It's actually much easier in VSCode since 1.9:

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

Answer 3

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
    }
}

```