Nick Lewis

How to create a frontmatter snippet in VS Code

How to create snippets for your markdown in Visual Studio Code to save time and reduce typographic errors

5 Sep, 2022 ยท 1 min read

I needed to speed up the way in which I start a new article on this blog as I always find myself referring to an old article to copy and paste the frontmatter across, which has become a bit annoying and tedious. Snippets are an excellent feature in VSC and I don't use them enough, so that was that, time to set at least one up.

  1. CMD+SHIFT+P / CTRL+SHIFT+P
  2. Type in snippets when the drop-down appears
  3. Select markdown.json
  4. Paste the code below, in to the file
{
	"frontmatter": {
		"prefix": "frt",
		"body": [
			"---",
			"layout: ../../layouts/Post.astro",
			"title: $1",
			"metaTitle: $2",
			"metaDesc: $3",
			"image: /images/$4.jpg",
			"date: $5",
			"tags: $6",
			"- hampshire",
			"top: false",	
			"---"
		]
	}
}

So the next time I create a markdown file in my posts folder, type in "frt" and hit enter. You can tab through the entries and type in the field data nice and easy!

Spread the word with everyone on Twitter
Tweet this post
Powered by Webmentions

You may also like to read ๐Ÿ“–

Adding Vue to your Astro based site

6 Sep, 2022 ยท 3 min read

Adding Vue to your Astro based site

Deep Selectors in Vue

9 Sep, 2022 ยท 1 min read

Deep Selectors in Vue