Using Variables in Visual Studio Code Snippets

I have a few Gatsby sites that I contribute to for work. The frontmatter boilerplate has been a thorn in my side, and I figured there has to be better. For awhile, my process involved going to a past post’s frontmatter, copying it into my new post, and then editing it as needed. But that was a lot of editing. Then, I had a moment of clarity and realized I should just create a Markdown snippet in Visual Studio Code. Once I realized that, I had a moment of excitement when I realized that I could use variables in my Visual Studio Code snippets. Let’s go!

Note: Visual Studio Code supports both language snippets and project snippets. In this post, we are looking at language snippets.

Creating a Snippet in Visual Studio Code

These are the steps for creating a snippet in Visual Studio Code.

1. Open the Command Palette. The command palette can be accessed multiple ways:

• On Windows and Linux, use Ctrl + Shift + P.
• On Mac, use Command ⌘ + Shift ⇧ + P.
• From the View menu, select Command Palette.

2. Once you have the Command Palette open, then you can search for Configure User Snippets to create a snippet.
3. Select a language for your snippet.

If you have an empty file, don’t panic! Snippets are stored in JSON files. This is what the template of a snippet JSON file looks like:

{
    "First Snippet Name": {
        "prefix": ["first-snippet","snippet1"],
        "body": [
            "Your template"
        ],
        "description": "First Snippet Description"
    },
    "Second Snippet Name": {
        "prefix": ["second-snippet","snippet2"],
        "body": [
            "Your template"
        ],
        "description": "Second Snippet Description"
    }
}

Each snippet contains:

• a name
• a prefix or collection of prefixes
• a body
• a description

The prefix and description will be visible as part of the Insert Snippet command prompt. The body is the code that gets inserted.

The body supports many features, including tabstops, placeholders, choices, and variables. In this post, we’re going to look at variables.

Creating the Gatsby Frontmatter

This is what I need to include for the frontmatter for each of my blog posts:

---
title: 
author: sadukie
date: "2024-06-03T15:14:07.000Z"
description: 
featuredImage: 
category: 
---

Since I can prepopulate the author field, that saves me some time. The other pain point is remembering the date format. If I can get it for a date relatively close to when I want to publish my post, that would be even better!

I poked around the user-defined snippets document and was excited to see variables on the list. I was able to update my Markdown snippets (markdown.json) to include this snippet:

{
  "Generate Gatsby Blog Template": {
    "prefix" : "gatsby-blog",
    "body":[
        "---",
        "title: ",
        "author: ",
        "date: \"$CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T$CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND.000Z\"",
        "description: ",
        "featuredImage: ",
        "category: ",
        "---"
    `],
    "description": "Boilerplate for Gatsby blog post"
  }
}

A few things to note about this snippet:

• For the date format, the current date is in curly braces ${CURRENT_DATE} so it’s clear where the variable name ends and where the T is needed for the template.
• These fields are in local time. These are not in UTC.
• I call out some of the date and time variables. There are more variables supported in user-defined snippets - including files and paths, clipboard, workspace-related variables, random values, and comments.

Using the Snippet

When I create a new blog post, I can add the frontmatter thanks to this snippet.

1. Create a new file for the post.
2. From the Command Palette, find Insert Snippet.
3. Search for gatsby. This search functionality seems to work for both the prefix and the description.
4. Select the gatsby-blog snippet.
5. Fill in the frontmatter and blog!

See it in Action!

I recorded this process so that you could see it in action:

Conclusion

If you find yourself in a situation where you’re using Visual Studio Code and writing a lot of boilerplate, look into snippets. If you find yourself needing to do boilerplate around dates or file paths, know that Visual Studio Code has some variables available for working with fields like this.

Hope this inspires you to create snippets and make your coding lives easier in Visual Studio Code!

Happy coding!