How to Insert a Snippet after Pressing a Keyboard Shortcut in VS Code

There is a pretty high chance that you are using either keyboard shortcuts or snippets (or even both) while using your favorite IDE or editor. What if we can combine these two functionalities and make our life easier? Let's explore this topic more deeply within VS Code editor.

Let's explore keyboard shortcuts. But first, what is the keyboard shortcut?

A keyboard shortcut combines one or several keys that invoke a program to perform a specific action.

To open the keyboard shortcuts JSON file, open "Command Palette" by pressing Command+Shift+P (Ctrl+Shift+P on windows) and type Preferences: Open Keyboard Shortcuts (JSON). What you will see depends on if you have custom shortcuts or not; worry not if your file looks like this (we will get to the syntax):

1// Place your key bindings in this file to override the defaults
2[]

Each keyboard shortcut must have a key (pressed keys) and command (identifier of the command that should be executed) keys. Still, it can have when (a boolean clause that will be evaluated on the current context) and args (command arguments) keys. Other than that, it is a regular JSON object. To give a simple example, this is a "Select All" keyboard shortcut:

1{
2  "key": "cmd+a",
3  "command": "editor.action.selectAll"
4}

Alternatively, we can implement when clause to make the shortcut only available when the editor is focused:

1{
2  "key": "cmd+a",
3  "command": "editor.action.selectAll",
4  "when": "editorTextFocus"
5}

Read more about conditional operators and available contexts.

I assume that most of my readers know what a snippet is, but it is always nice to be more exclusive and explain the term.

The snippet is a template that makes writing repeating code patterns easier.

Snippets within VS Code could be invoked with Control+Space keyboard shortcuts, and they will appear within IntelliSense.

To create a new snippet, open "Command Palette" by pressing Command+Shift+P (Ctrl+Shift+P on windows) and type Preferences: Configure User Snippets. Then select New Global Snippets file... (or open global snippet file, or any other snippet file) and give it a name (for example global-snippet.code-snippets). Snippets, same as Keyboard Shortcuts, are JSON objects which have name object key (snippet name), prefix (trigger words that will trigger the snippet), body (snippet content), and description (snippet description). So let's create our first snippet:

1{
2  // object key `const` is a snippet name
3  "const": {
4    "prefix": "const", // object value `const` is a trigger
5    "body": ["const $1 = $2"],
6    "description": "Create a constant"
7  }
8}

In the snippet body, you may notice that we are using $1 and $2 placeholders. These placeholders will be replaced with the actual values when the snippet is invoked.

By default, after confirming the snippet, VS Code will place your cursor at the place of the $1 placeholder. Your cursor will be moved into the $2 placeholder by pressing the Tab key, and if you want to go back to the $1 placeholder, you can press the Shift+Tab keys

Great! Now we have an idea of how to create a snippet. But what if we want to create a snippet that will be invoked with a keyboard shortcut?

To create a snippet that will be invoked after pressing a keyboard shortcut, we need to create a new keyboard shortcut that will have command key with "editor.action.insertSnippet" value, and optional but convenient when clause:

1{
2  "key": "cmd+shift+c",
3  "command": "editor.action.insertSnippet",
4  "when": "editorTextFocus"
5}

Next, we need to add an args object that will contain the snippet key with the snippet we want to use.

1{
2  "key": "cmd+shift+c",
3  "command": "editor.action.insertSnippet",
4  "when": "editorTextFocus",
5  "args": {
6    "snippet": "const $1 = $2"
7  }
8}

After pressing the cmd+shift+c keyboard shortcut, we will see the same snippet as with the const snippet trigger we created earlier.

We've learned how to create snippets and keyboard shortcuts and even how to combine them! It would be better to use existing snippets for our keyboard shortcuts, but currently, it is not possible. If you know some other tricks write or how to make our snippets/keyboard shortcuts more powerful, please let me know on Twitter!

Share this post on Twitter