VSCode Custom Snippets: Powerful Feature That Boosts Your Productivity (Basic)
Tags: vscode, productivity
Published: 2022-06-21 11:55:52

Custom snippets are a powerful feature of VSCode. Inspired by [James Q Quick](https://www.jamesqquick.com/)'s great introduction in [this video](https://www.youtube.com/watch?v=WPqXP_kLzpo&t=3528s) 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](#table-of-contents)
- [What Is a Snippet](#what-is-a-snippet)
- [Why You Need Snippets](#why-you-need-snippets)
- [How to Define a Custom Snippet](#how-to-define-a-custom-snippet)
  - [Example 1: The Basics](#example-1-the-basics)
  - [Example 2: For Loop Snippet](#example-2-for-loop-snippet)
- [Conclusion](#conclusion)

---

## What Is a Snippet

According to [VSCode's official documentation](https://code.visualstudio.com/docs/editor/userdefinedsnippets),

> 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,

```js
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](#how-to-define-a-custom-snippet)).

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](https://dev.to/jessewei/vscode-custom-snippets-powerful-feature-that-boosts-your-productivity-basic-35f7-temp-slug-8398679).

---

## 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.

```json
"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.

![use for loop snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74kyytezpuj9vatgf06c.gif) 

---

## Conclusion

Today, we learned,

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

In [Part2](https://dev.to/jessewei/vscode-custom-snippets-powerful-feature-that-boosts-your-productivity-basic-35f7-temp-slug-8398679), we will look at a more sophisticated example which leverages *placeholder-transform* feature.

---

### References

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