Create VSCode Snippets for Markdown Blog Workflows
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
description: Utilize VSCode snippets to simplify the creation of new posts
tags: ["markdown", "vscode"]
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.
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
1. Create a snippet file
- Open VSCode
- Open the repository of your choice, if any
- My blog is contained in a folder called
blogging, so I will open…