How To Create VS Code Snippets

October 16, 2020 • Coding, Tools • Published By Josh • 3 minute read

Visual Studio Code Snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional statements. Let’s learn how to create our own code snippets!

User Snippets
Code Snippet Scope
Build A Code Snippet
Body Syntax
Example Code Snippet
Use a Code Snippet

User Snippets

To get started, navigate to File > Preferences > User Snippets. You can also find User Snippets under the Manage icon.

Code Snippet Scope

You probably don’t want a PHP snippet to appear as a suggestion when you’re writing Javascript! Snippets are suggested based on their scope.

Snippets can be created for specific programming languages by selecting the programming language from the list. For example, if you only want the snippet to be suggested for Typescript, select Typescript from the list.

If you want the snippet to be suggested for any programming language, select New Global Snippets file.

Snippets can also be created per project by selecting New Snippets file for PROJECT_NAME_HERE. It will be located in the root of the project in a .vscode folder. This is helpful to share with all team members working in the project.

Build A Code Snippet

"snippetName": {
    "prefix": string or array,
    "body": string or array,
    "description": string
}

The snippetName is the name of the snippet.
The prefix defines one or more trigger words. It’s what you type into the code editor to trigger the code to appear.
The body is one or more lines of code you want to output.
The description defines an optional description for the snippet.

Body Syntax

The body of the snippet has some special syntax you can use to provide an even better user experience.

Tabstops allow the cursor to stop at that location. Use $1, $2, etc to specify the cursor locations. The number is the order of the tab locations. Use $0 if you want a final cursor location.
Placeholders are tabstops with values. For example, ${1: foo}. The placeholder text will be inserted and selected so it can be easily changed.
Choices prompt the user to select from a list of values. For example, ${1|one, two, three|}.
Variables can be used to enter specific values. For example, TM_FILEPATH is the full file path of the current document.

Example Code Snippet

In one of my projects, there’s a specific json object needed for a common api request. The cursor will start at the uri property. Selecting tab will move you to the id property. The text typed here will also update the extract section. Selecting tab once more puts the cursor at the end of the first object in the imports property to easily add more.

"viewApiJson": {
    "prefix": "view",
    "body": [
        "const json = {",
        "\tresource: 'v1/resource/view/_version/1/',",
        "\timports: [",
        "\t\t{",
        "\t\t\turi: '$1',",
        "\t\t\tid: '$property'",
        "\t\t}$0",
        "\t],",
        "\textract: {",
        "\t\t$property: {",
        "\t\t\tselect: '$property'",
        "\t\t}",
        "\t}",
        "};"
    ],
    "description": "Create json object for view api request."
}

Use a Code Snippet

In your code editor, start typing the snippet prefix and you will see it displaying as a suggestion. Select the enter or tab key and the snippet code will appear in your code editor! Enter text at each tab stop!