How to create powerful custom snippets in VS Code

VS Code has a fantastic custom snippet system built right in, which I've recently started using extensively.

You can create global snippets which are stored in your VS Code config and are available across all of your projects or, what I prefer, are project-specific snippets. These are stored in a config file within each project which means they're scoped only to that project and can be checked into your git repo, so you can always be sure they're available when you (or a team member) are making updates.

A simple example use-case

I use markdown with yaml front matter to author content for this website. When I want to create a new post, I could memorise and type out all of the meta data keys each time, or I could copy and paste an old post and delete all of the pre-existing content. Neither of these are really optimal.

Instead, with my snippet in place I simply create a file new-post.md, type /btemplate, hit enter and the meta data keys are generated for me. VS Code actually has very good autocomplete as you probably know, so I actually only need to type /bt and it's already picked up what I want to do.

Better still, because I've configured the snippet with tab stop placeholder variables, I can tab through each key as I type in my data without needing to click or arrow-key into each one. It turns the editor into a mini CMS.

---
title: ''
date: ''
tag: ''
ogImage: ''
---

The code to generate this snippet is as follows:

"Post Template": {
  "scope": "markdown",
  "prefix": "/btemplate",
  "body": [
    "---\ntitle: '${1}'\ndate: '${2}'\ntag: '${3}'\nogImage: '${4}'\n---"
  ],
  "description": "Meta data template for posts"
}

Project-specific snippets

To get started, you need to create a snippets file. You can add this manually to your project by creating a .vscode folder in your project root and a [yourFileName].code-snippets file inside. Or, even better, open the command palette, run Snippets: Configure User Snippets and select New Snippets File for [your project] to have VS Code generate this for you.

Inside this file, you'll create single object containing all of your snippets (each of which is an object of its own). Have a look at the example below to see how this works.

{
  "Post Image Markup": {
    "scope": "markdown",
    "prefix": "/bimg",
    "body": [
      "<img src=\"/postassets/${1}.jpg\" alt=\"${2}\" loading=\"lazy\" width=\"${3}\" height=\"${4}\">"
    ],
    "description": "Image markup for posts"
  },
  "Post Template": {
    "scope": "markdown",
    "prefix": "/btemplate",
    "body": [
      "---\ntitle: '${1}'\ndate: '${2}'\ntag: '${3}'\nogImage: '${4}'\n---"
    ],
    "description": "Meta data template for posts"
  }
}

Within each snippet object you can define:

• scope A comma-separated list of the file types which should be able to trigger this snippet
• prefix What you type to trigger your snippet. I like to start my snippets with a forward-slash as I use Notion and this is the same kind of behaviour as inserting blocks there, but this can be whatever you like
• body The snippet you want to output. Use \n for new lines and use ${1} (with any number) to create tab stops. You can even label your tab stops like so ${1:title}
• description A description of what your snippet does, particularly useful if you're sharing snippets in a repo to share understanding with your team

Once this is all set up, you'll be able to access these snippets throughout your project, scoped to whatever file types you define in each snippet's scope.

Global snippets

If you work primarily with the same languages, and on the same types of projects, it may make sense for you to have some global snippets set up. Maybe a boiler-plate React component set up how you like it, or a PHP class.

To do this, follow the exact same instructions as the project-specific guide above, but select New Global Snippets File instead of a project specific one.

The downside here is that these snippets won't be checked into your git repo, but depending on your use case that may not matter.