Visual Studio Code lets you perform most tasks directly from your keyboard as well as utilize code templates, known as snippets, to drastically increase the speed of your work. In this article, I will outline how to modify and create your own shortcuts and Visual Studio Code snippets to suit your workflow and save you some time spent on repetitive tasks.

To familiarize yourself with Visual Studio Code capabilities, try the Interactive Playground (Help -> Interactive Playground).

VS Code Snippets

VS Code snippets are pieces of code or templates that can be reused for faster coding.

Many extensions on the VS Code Marketplace include snippets. For instance, AL Language extension contains snippets for creating different Dynamics 365 Business Central objects.

To make your own VS Code snippet, type Preferences: Configure User Snippets in the Command Palette and open (or create) the appropriate file for the purpose of your snippet (project, global, or modify an existing extension snippet).

Available VS Code Snippet properties:

• “name”
• “prefix” – Used to call a snippet (default snippet prefixes start with a ‘t’);
• “body” – Describes the content of a snippet;
• (optional) “description” – Displayed when calling a snippet. If not defined, the name will be displayed;
• (optional, only for global and project snippets) “scope” – Limits the scope where a snippet can be used based on the language identifiers.

VS Code Snippet syntax:

The output of the snippet is defined under the “body” property in the form of a string for each line of the output. You can control the position of the Cursor and Format the text that the User chooses to insert, using special constructs:

•  Tabstops. Used to create changeable elements or place your cursor in different positions within the snippet.

$1, $2, $3, $0 – First, second, third, and last cursor positions respectively. You can use the ‘Tab’ key to move from one tabstop to the next.

Tabstops can have:

-Placeholders. Pre-defined values you can modify.

${1:defaultValue}

-Choice. Pre-defined choice of values.

${1|choice1,choice2,choice3}

-Modifications. Formats user input with the help of Regular Expressions, following this template:

${<Variable>/<RegEx>/<Format String>/Options}

${TM_FILENAME/[^0-9^a-z]//gi} – Removes non-alphanumeric characters.

• Variables. Returns values related to your system, your file, selected text, etc. A list of available variables can be found here.

VS Code User Snippet Example:

This snippet is used for documenting changes made to code. It comments out the old code, lets you add the code to replace it with and adds tags for where the changes start and end. Here’s how it’s implemented:

1. Highlight some code you want to modify

2. Call the snippet. Either using the Command Palette (F1 -> Insert Snippet -> SPLN_Code_Comment) or you can bind the snippet to a keyboard shortcut (more on that later):

3. Edit the changeable elements:

4. You’re brought to the final position, where you can write the code to replace the commented old code.

Keybinding

To accomplish tasks quickly, you can use keyboard shortcuts. To find a shortcut for a specific command go to File -> Preferences -> Keyboard Shortcuts (or Ctrl+K Ctrl+S). You can search by the Command name (and When expression) or its Keybindings (by hitting Record Keys).

Right-click on any command to Change its Keybinding, ‘When’ expression, or Remove it entirely. If you’re already used to keyboard shortcuts from another editor, you can download its Keymap, by going to File -> Preferences -> Keymap Extensions to see a list of popular keymap extensions.

Any modifications made to Keybindings are recorded in the keybinding.json file (F1 -> Preferences: Open Keyboard Shortcuts (JSON)) which overrides the default options.

Removed keyboard binding (keybindings.json):

In this file, you can also define your custom commands and bind them to a keyboard shortcut.

A custom command that inserts the “SPLN_Code_Comment” snippet when ‘ctrl + 9’ is pressed:

A more detailed look into defining your custom tasks on keybinding.json can be found here.

We hope that this blog post gave you the basic understanding of creating VS Code snippets and binding them to keyboard commands so that you can implement these features into your workflow and lighten your burden on everyday tasks.