Visual Studio Code | Custom User Snippets

This week’s blog is going to be short but sweet. I’m going to walk you through an invaluable feature of VS Code: the ability to create custom user snippets. This is really incredibly simple to do and it will greatly enhance your workflow. If you’re unfamiliar with VS Code it’s an IDE that in my opinion puts the likes of Atom and Sublime in the shade. It has a ton of easy to install extensions and customizations that’ll make your life easier and maximize your efficiency.
What is a Snippet?
A snippet is a chunk of code that can be auto-completed to take the legwork out of having to write common code patterns. The simple example below illustrates how you can just type for
and then press tab
. This will then create the for
loop code block. Once it’s created you press tab
once to change the iterator variable name and then press it again to change the array name.

Let’s Create Our Own Snippet
In order to access user snippets go to Code -> Preferences -> User Snippets
. Then pick the appropriate programming language.

The general syntax is shown below.
{
"For_Loop": {
"prefix": "for",
"body": [
"for (const ${2:element} of ${1:array}) {",
"\t$0",
"}"
],
"description": "For Loop"
}
}
For Loop
is the snippet name.prefix
defines how this snippet is selected from IntelliSense and tab completion. In this casefor
.body
is the content and either a single string or an array of strings of which each element will be inserted as separate line.description
is the description used in the IntelliSense drop down.
When you see a $
it’s called a tabstop. It’s pretty self-explanatory, it indicates where the cursor will skip to when pressing tab. You tell VS Code the order of the tabbing in sequential order starting at 1, i.e. $1
,$2
,$3
,… $0
is used to define the final tabstop. The syntax to add a placeholder is ${position:placeholder}
, e.g. ${1:array}
.
You also have access to the following variables (added using ${var}
):
TM_SELECTED_TEXT
The currently selected text or the empty stringTM_CURRENT_LINE
The contents of the current lineTM_CURRENT_WORD
The contents of the word under cursor or the empty stringTM_LINE_INDEX
The zero-index based line numberTM_LINE_NUMBER
The one-index based line numberTM_FILENAME
The filename of the current documentTM_FILENAME_BASE
The filename of the current document without its extensionsTM_DIRECTORY
The directory of the current documentTM_FILEPATH
The full file path of the current documentCLIPBOARD
The contents of your clipboard
As well as these for inserting the current date and time:
CURRENT_YEAR
The current yearCURRENT_YEAR_SHORT
The current year's last two digitsCURRENT_MONTH
The month as two digits (example '02')CURRENT_MONTH_NAME
The full name of the month (example 'July')CURRENT_MONTH_NAME_SHORT
The short name of the month (example 'Jul')CURRENT_DATE
The day of the monthCURRENT_DAY_NAME
The name of day (example 'Monday')CURRENT_DAY_NAME_SHORT
The short name of the day (example 'Mon')CURRENT_HOUR
The current hour in 24-hour clock formatCURRENT_MINUTE
The current minuteCURRENT_SECOND
The current second
Putting it all Together
I created this code snippet to create a React Native functional component. If that’s meaningless to you don’t worry — it’s still a solid example of how this works.
I’ve given the component the same name as the filename using ${TM_FILENAME_BASE}
. This snippet is called up with the prefix rnf
. Two useful insertions into your strings are \n
for new line and \t
for tab indent.
"React Native Functional Component": { "prefix": "rnf", "body": ["import React from 'react'", "import { Text, View, StyleSheet } from 'react-native'", "\nexport const ${TM_FILENAME_BASE} = (props) => {\n\t$0\n}"
], "description": "React Native Functional Component"},
Here’s a preview of our code snippet in action. That’s all there is to it — happy coding!
