Custom snippets in VS Code

A few snippet extensions I’ve installed have inspired me to venture into creating my own custom ones. Turns out VS Code has a great system for doing this and can be a huge time saver for boilerplate code.

The Initial Annoyance

A snippet I’ve gotten a lot of use out of is testa which comes from the Jest Snippets extension (I think, I have a lot of extensions and its hard to tell at this point). This snippet scaffolds out an async jest test like this

This is very useful but each time I do it I need to go back, add a semi colon, and make the test description a template literal instead of single quotes. This comes from the ESLINT rules I’m using (the semi colon) and personal preference for easy, long, indented test names (the template literal). Sure would be nice if I didn’t have to make that edit every time right?

Creating the snippet

With CTRL+SHIFT+P (assuming Windows, use CMND instead if on Mac) open up the command pallet and search for “Configure User snippets”

Click that option at the top then click the javascript option

Once you’re in there you have a whole file to create your own custom snippets. I created the slightly modified version of the testa snippet like so

The one tricky bit here was those \n characters. Those are to create new lines in the resulting snippet automatically. Now when I type testa I get a second option (mine with my custom description) that scaffolds out an async test as per the standards in the repo I’m working in.

Syncing

The other great thing about this solution, is that the file for custom snippets is tracked as part of VS Code’s setting sync feature. So when you create custom snippets on one machine, you will have these on any other.

Happy snipping.

Written on March 10th, 2021 by RM Terrell Photo credit of RM Terrell