Creating VS Code Snippets

Any time you find yourself typing the same code, or copying and pasting the same code, it might be worth the small amount of time to set up a VS code snippet.

VS Code makes it very easy to create your own snippets. I'm going to show a couple examples for creating a snippet which will be used in a typescript file for an Angular project.

Creating a Snippet

To create a snippet, go to File -> Preferences -> User Snippets. You can also get to it using ctrl+shift+p and searching for Preferences: Configure User Snippets.

Once you do that, VS Code will ask you to select the language that the snippet will be used for. In my case, I'm going to select Typescript.

There will be an example snippet in the file that is completely commented out, showing you the structure of the snippet, and explaining how to use tab stops. All snippets for VS Code have the same structure: name, prefix, body, and description.

The prefix is what you need to type in your working file in order to populate the snippet. It's how VS Code identifies the snippet and searches based off the current file type you are editing.

The body contains the code you want to populate using your snippet. In a small one line snippet, the body can just be a string. However multi-line snippets must be an array of strings.

The description is…well it's a description.

A tab stop is a location in the snippet where your cursor will stop every time you hit tab, and is designated by a $ and a number. In some bigger snippets you may have quite a few tab stops. You can also add a placeholder, which is some text to explain what needs to go in that spot.

Creating VS Code Snippets

Tweet

Let's take a look at the example snippet currently commented out in the file and make a couple tweaks to it.

I made one small change, which is changing $1 to $\{1:name\}. $1 is a tab stop, and since it's number 1 it'll be the first place the cursor stops. Adding the name placeholder gives it a default value if you don't change anything, but also let's you know what should go in that spot.

Now if you type 'log' in a typescript file, you'll see this snippet as one of the options. Highlighting it will show you an example of the result. Clicking it, or even quicker, hitting tab or enter with it highlighted, will output your snippet and allow you to start typing in the tab stops. Here's our snippet in action:

Amazing right? Well, sort of, this isn't a very helpful snippet. Let's make a better one.

One thing I find myself creating a lot of on big projects is services to make HTTP calls to an API for CRUD calls. One small project I've been slowly working on is a very simple cookbook to record various recipes in, so I'm going to show the service I'm using in it since it's pretty simple.

Creating a bigger, more useful snippet

The one downside to creating large snippets is turning it into the correct string array format to go in the body of the snippet. To do this, I use a text editor like Notepad++.

Here are the steps I generally follow to convert the code to a usable string array:

1. Escape any double quotes with a backslash. For example, any " needs to be replaced with "
2. Add quotes and commas to all the lines. The easiest way to do this in most text editors is to replace new lines: \r\n with ",\r\n". When doing this, be sure the Search Mode is set to Extended.
   • Be sure to add a double quote at the beginning of the first line and the end of the last line, as the new line search and replace won't add those.

The new line text to search for may be slightly different on non-Windows environments.

Once that is done, it's time to set up all the tab stops. Using a text editor this is once again as simple as a few search and replaces.

In my service I have a few things I want to change to be tab stops. The name of the object this service is doing CRUD calls for, the object file name, a couple parameter names, the API URL endpoint, and part of an error message.

I've made those changes and created a new snippet object in our typescript.json file. I gave it a prefix of 'crud-service', copied in the body, and added a description. Here is the result, and you'll see I've got 5 different tab stops in it.

Our New Snippet In Action

Here's a gif utilizing this new snippet. You'll see the advantage of the tab stops and how all tab stops with the same number gets updated when you type the text for the first of that number. So even though I have 24 different tab stops, there's 5 unique, so we only need to tab and type 5 times.

All in all it's not too difficult to create a snippet, and if it's something you write in projects often it'll end up saving a lot of time.