VSCode Custom Snippets: Powerful Feature That Boosts Your Productivity (Basic)

Custom snippets are a powerful feature of VSCode. Inspired by James Q Quick's great introduction in this video of this feature, I created this series to deep a bit deeper into the concept.

In part 1 (this post) of the series, I'll introduce the basic usage of custom snippets and then in part 2, I want to show you a couple of advanced usage scenarios that will make your life even easier.

Table of Contents

• Table of Contents
• What Is a Snippet
• Why You Need Snippets
• How to Define a Custom Snippet
  • Example 1: The Basics
  • Example 2: For Loop Snippet
• Conclusion

What Is a Snippet

According to VSCode's official documentation,

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

Imagine writing a for loop in Javascript. One of the frequently used syntax is this,

for (let i = 0; i < 10; i++) {
  // some code
}

Instead of writing this code every time by hand, we can leverage VSCode's custom snippets feature by defining one ourselves (jump to see how to do it).

With the snippet, we can just input f or for (depending on the shortcut you defined) then press Tab key, the code above will be entered automatically for us.

Why You Need Snippets

The above is just one tiny example. We can make snippets for virtually EVERY piece of code that is repeated frequently enough.

What's more, VSCode's snippets feature also allows you to set scopes for your snippets, to define variables, to transform those variable values before inserting and so on. More on that in part 2.

How to Define a Custom Snippet

Without further ado, let's look at a couple of examples so you get an idea on how to actually define your own custom snippets.

Example 1: The Basics

Follow these steps to define a snippet for Javascript's console.log method.

1. Press Command + Shift + P on Mac or Ctrl + Shift + P on Windows
2. Search for Preferences: Configure User Snippets and select it from the dropdown
3. Select javascript.json
4. The file opens and you can find a Print to console example that is commented out
5. Uncomment the example or copy and paste it below the comment
6. Save and close the file
7. Play with your newly created snippet by typing log and press Tab in a javascript file. The method should be autocompleted and your cursor should be between the parentheses.

Example 2: For Loop Snippet

At the end of javascript.json file, add the following code.

"My For Loop": {
  "prefix": "for",
  "body": [
   "for(let ${1:index}; ${1:index} < ${2:value}; ${1:index}++) {",
   "\t$3",
   "}",
    "$0"
  ],
  "description": "This is my for loop snippet"
 }

prefix is the shortcut that triggers the snippet. Here, we set it to for so when we type for, the for loop snippet suggestion will pop up and we can select it from the list or just press Tab if it appears at the top of the list. Note that you are not limited to provide just one prefix. Instead, you can provide an array of prefixes, any member of which will trigger the snippet.

body is the code that we trigger and that is autocompleted. We can pass a single string or an array of strings to it, each of which represents a line of code.

$1, $2, etc. represent the order of tab stops with $1 being the first position of cursor when the snippet is autocompleted, $2 being the seconde and so on. $0 represents the final position of cursor.

Tab stops can have placeholders which are displayed at cursor positions so that instead of seeing only a cursor blinking, user sees temporary variables or values at the positions.

Note that we can have multiple tab stops with the same number and placeholder which can be modified all at once. In the example above, we can edit all positions with ${1:index} at once.

description shows a useful message informing the user what this snippet does. It is optional but is recommended.

Here is a live demo of how the for loop snippet we created is used.

Conclusion

Today, we learned,

• What snippets are in VSCode and why we need them
• How to create simple snippets

In Part2, we will look at a more sophisticated example which leverages placeholder-transform feature.

References

https://www.youtube.com/watch?v=WPqXP_kLzpo&t=3528s
[VSCode's official documentation]](https://code.visualstudio.com/docs/editor/userdefinedsnippets)