Cecelia MartinezMany modern blogging platforms and frameworks for content-focused web apps use Markdown to manage individual content files. Markdown front matter makes it easy to add metadata to your content with information like tags, publish date, title, description, and more. Dev.to for example, uses Jekyll front matter for blog posts written on the platform.
If you're using a framework like Nuxt for Vue or Gatsby for React, you may have very specific properties you need in you front matter to ensure content renders the right way on your site. There are likely many ways to do this, but I've found that using VS Code snippets to store the block of front matter is an easy way to generate markdown files that are consistent with what my front end expects.
Here is an example of the front matter for an event markdown file for my personal website, built with Nuxt:
---
title: Effective Testing Approaches for your Application
org: Refactr.TECH
date: 2021-10-03T00:00:00
type: Talk
description: In this talk, we'll define the different types of testing and cover their use cases, as well as provide some guidelines for deciding which approach to use for your application.
link:
embed: -MUqhmhjt1I
slides: https://slides.com/ceceliamartinez/effective-testing-approaches
tags: [testing, conference, test strategy]
---
This would be a lot of properties to remember every time I want to add an event to my site. This is why I let snippets remember for me.
VS Code Snippets
Snippets in VS Code are templates for repeated code that you can use throughout files in your code editor.
This great video by Juri Strumpflohner walks through the process of creating a VS Code snippet using a snippet generator. This is the process I'll use to create my markdown front matter snippets.
Setting up your VS Code snippets file
First we need to create the file to store our snippets.
- Press
cmd+shift+p(Mac) orctrl+shift+p(Windows) to open the Command Palette in VS Code. Type 'snippet' and select 'Preferences: Configure User Snippets.' You can also click Code > Preferences > User Snippets from the menu bar. - You can either create a global snippets file, or one specific to the workspace for your project. I'd recommend creating a local file unless you have multiple projects that need the same front matter snippets.
- Select which option you prefer to create the file. It will prompt you to name the file, then click Save. This creates a file with a .code-snippets suffix within the .vscode directory for your project.
The generated file will have instructions for creating snippets, as well as an example of the syntax. You can use this documentation to write your own, but we'll make things easier and use a snippet generator.
Creating a snippet
The snippet generator app converts the snippet information and body and converts it to the syntax needed by VS Code.
The Description... field is the name of the snippet. Following the example of the event front matter above, I'll name mine 'event frontmatter'.
The Tab trigger... field corresponds to the prefix property in the VS Code snippet syntax. This is the name that will show up in VS Code when you open the snippet menu and select which one to use, like in the screenshot below.
I named mine eventFrontmatter, but the format is up to you.
The Your snippet... field is where you enter the front matter you'd like to generate with the snippet. This is my example:
---
title:
date:
type:
description:
link:
embed:
video:
slides:
tags: []
---
Adding tabstops and placeholders
So far, this snippet saves me some typing, but does not provide the best experience because I'll have to click through each line to update the values for these fields.
Tabstops to the rescue! Tabstops are stopping points in your snippet where you can enter text and then tab to the next location. Use a $n to enter them in your snippet.
---
title: $1
date: $2
type: $3
description: $4
link: $5
embed: $6
video: $7
slides: $8
tags: [$9]
---
I can also add default values at a tabstop with a placeholder. A placeholder is auto-set and highlighted when tabbed so you can update easily if needed. You can even set multiple choices for a placeholder. Because I have only a few set event types, I'm going to use placeholder choices for that field in my snippet.
---
title: $1
date: $2
type: ${3|Workshop,Talk,Interview,Podcast,Stream|}
description: $4
link: $5
embed: $6
video: $7
slides: $8
tags: [$9]
---
Now when I go to use my snippet, I can tab through these options. Neat!
Now that we have our snippet, we can copy it from the generator and add to our .code-snippets file back in VS Code.
Make sure you paste your snippet inside the object in the file. Multiple snippets should be comma separated just like with JSON.
Snippets for front matter
Snippets can be used for any type of code, but there are a few things to keep in mind when using for front matter specifically.
- Triple dashes. Don't forget to add these at the beginning and end of your snippet so the front matter is parsed correctly.
- Be careful with quotes. If you use quotes, make sure not to mix single and double quotes in your placeholder values, otherwise you'll get errors. For most frameworks or platforms you don't need them, so leave them out unless you do.
- Escape characters. The snippet generator will automatically escape quotes in your placeholders, but be careful not to remove them when editing.
Using the snippet
Now that our snippet is saved, we can use it in any file in VS Code either globally or in our project, depending on which type of snippets file you created.
To open the snippets menu, type ctrl+spacebar in your editor. This will bring up the available snippets. You can arrow down to select and then Enter to insert the snippet in your file. Now you can tab through your tabstops and enter the values for your file.
No more manually generating front matter for your content!
I hope you found this a helpful introduction to using snippets in VS Code. For more information, check out the official documentation.
