Create VSCode Snippets for Markdown Blog Workflows

Utilize VSCode snippets to simplify the creation of new posts

4 min readJan 3

Motivation

I write my blog posts in Markdown and my personal site is powered by Gatbsy.js. Within a Markdown file, there are frontmatter and content.

Frontmatter is a YAML block that contains the post’s metadata such as title, date and description. It will be parsed and used by the site generator to generate the post’s page.
The content is simply Markdown-styled text.

For example, this post will look something like this in the source code:

---
title: Create VSCode Snippets for Markdown Blog Workflows
date: 2023-01-03T15:09:34Z
description: Utilize VSCode snippets to simplify the creation of new posts
tags: ["markdown", "vscode"]
---

## Motivation
I write my blog posts in Markdown and...
And the rest of the body text...

For the past year, what I had to do when creating a new post was to copy the frontmatter from an existing post and then manually update it. This was not particularly pleasant. I am ashamed to admit that I just let laziness take over and did not do anything about it.

Let’s fix this with VSCode snippets.

Create a snippet

A VSCode snippet is a pre-defined text that can be inserted on a trigger. You can specify:

the triggering word or phrase
what should be inserted
can be a simple text
can have placeholders
can use variables

The details can be found in the VSCode documentation.

Let’s go through my use case as a concrete example.

Steps

What I want to achieve:

insert a frontmatter block with the key-value pairs required
auto-populate the date field with the current date-time in ISO 8601 format (this is the format that my parser expects)
insert some boilerplate headings for the content