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 case for.
• 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 string
• TM_CURRENT_LINE The contents of the current line
• TM_CURRENT_WORD The contents of the word under cursor or the empty string
• TM_LINE_INDEX The zero-index based line number
• TM_LINE_NUMBER The one-index based line number
• TM_FILENAME The filename of the current document
• TM_FILENAME_BASE The filename of the current document without its extensions
• TM_DIRECTORY The directory of the current document
• TM_FILEPATH The full file path of the current document
• CLIPBOARD The contents of your clipboard

As well as these for inserting the current date and time:

• CURRENT_YEAR The current year
• CURRENT_YEAR_SHORT The current year's last two digits
• CURRENT_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 month
• CURRENT_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 format
• CURRENT_MINUTE The current minute
• CURRENT_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!