TIL: Creating a VSCode Snippet For Skeleton Blog Posts

Today I learned a pretty neat trick inside of VSCode to speed up the time I spend when creating new blog posts.

I’ve been a big fan of vscode for years now. For some reason everyone at my office seems to scoff at it (I guess the name Visual Studio carries a lot of baggage…), but I find that it’s really plesant to work in. There’s a health community of addons and it’s constantly being updated. It runs smoothly, alows for lots of customization. It’s become my go to for development for things not overly complex.

One great feature that it provides out of the box is the ability to create new snippets to speed up your productivity. You can streamline your workflow for things that you commonly use. In my case, it was a perfect reason to use for my blog post skeletons.

For the last… year plus, my work flow has looked something like this:

1. Scroll to folder with last post
2. Copy post
3. Paste post
4. Change the name of file
5. Change all of the header information in the file
6. Delete out all of the text body
7. Start writing

For those that are not familiar with Jekyll, the headers of every blog post end up looking something like this:

1
2
3
4
5
6
7
8
9

---
layout: post
title:  "TIL: Creating a VSCode Snippet For Skeleton Blog Posts"
date:   2019-03-26 06:00:00 -0400
categories:
- Tools
tags:
- vscode
---

One of those gets added to the top of every file, and as you can see, most of that has to be changed every single time.

There are a few big benefits that snippets will allow for this scenario:

1. I can get that template created for me up front, including my signature
2. I can get the publish date auto filled with the current date
3. I can have the tool walk the cursor through the places where I need to change things

To do this, I basically followed along with the tutorial that the vscode folks have created for getting started with snippets. The format of the snippets is done completely in a JSON file, which uses a specific set of keywords to define how the snippet will show up in the program.

I created a new global snippet that is available specifically for markdown files. This snippet ended up looking something like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

{
    "Blog post skeleton": {
		"scope": "markdown",
		"prefix": "new",
		"body": [
			"---",
			"layout: post",
			"title:  \"TIL: $1\"",
			"date:   $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $2:00:00 -0000",
			"categories:",
			"- $3",
			"tags:",
			"- $4",
			"---",
			"$0",
			"",
			"💚 Always. Be. Learning."
		],
		"description": "Create a new skeleton blog post"
    }
}

Now when I use this snippet on a new post, the application will insert all of this text, and then walk my cursor up from the first insert point (denoted by $1) through the last ($4) and then finish up by placing the cursor at $0.

Now any time I want to make a new blog, my workflow looks something like this:

1. Click new file
2. Type file name
3. Hit ^ {spacebar}, select “new”
4. Type post title, tab
5. Type publish hour, tab
6. Type category, tab
7. Type tag

While it ends up being the same amount of steps, it’s FAR LESS places for me to make a mistake. The number of times where I’ve forgotten to change a date or time…

Applying elsewhere

Now that I’ve gone through the process of creaing a snippet, I’ll probably start using it more often in my daily work flows. It’s a lot easier than I thought it was going to be, so much so that I regret not looking into it until now. Many times you can grab an extension that will already have what you need. But for the times when they don’t, this is a good way to handle it on your own.

💚 Always. Be. Learning.