VS Code Custom Snippets: Boost Your Productivity (Part 1)

11/30/2024

VSCode is packed with handy features, many of which remain underutilized by developers. In this article, I’ll show you how to leverage the custom snippets feature to drastically improve your productivity.

What Are Custom Snippets?

Custom snippets are reusable code templates that you define in configuration files. A typical snippet object contains the following fields:

  • prefix: The trigger keyword for the snippet.
  • body: A string or array of strings representing the generated code.
  • description: A short explanation of what the snippet does.

Although the snippet object supports additional fields like scope, they are rarely used and won’t be covered in this article.

How to Create Custom Snippets

Creating custom snippets is easy. Open the Command Palette with Cmd + Shift + P on Mac or Ctrl + Shift + P on Windows and type “custom snippets” in the search bar. Select Snippets: Configure Snippets from the menu. Next, choose the appropriate configuration file for your target file type. For example, to define snippets for .tsx files, select typescriptreact.json.

Here’s an example of a basic custom snippet defined in typescriptreact.json:

"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
},

Notice that the body field is an array of strings. This allows the snippet to span multiple lines, with each line as a separate string in the array.

Now, open a .tsx file and start typing log. A menu will appear, showing the snippet’s description (“Print to console”). Select it, input your message, hit Tab, and you’re done!

using the basic snippet
Using the basic snippet

Placeholders

In the body of the snippet above, you might have noticed some numbers preceded by dollar signs, like $1 and $2. These are called placeholders, and they are the key to the magic of custom snippets. With a bit of creativity, placeholders can turn your snippets into powerful productivity boosters.

A placeholder can take one of two forms:

  1. Simple Placeholders: A dollar sign followed by a number, e.g., $1 or $2. These mark the spots where the cursor will stop for input during snippet expansion.
  2. Placeholders with Default Text: A dollar sign followed by curly braces containing a number and some default text separated by a colon, e.g., ${1:ComponentName}.
    • The number still acts as the index (as with simple placeholders).
    • The text (e.g., ComponentName) provides a pre-filled value or a helpful hint for users of the snippet. This text can be overwritten, and any changes will automatically update mirrored placeholders with the same index.

The number in a placeholder defines its index. When you expand the snippet, the cursor automatically navigates through placeholders in order, starting with $1, then $2, and so on.

For example, in the animation:

  • After the snippet expanded, the cursor was positioned in the parentheses ($1), ready for input.
  • Pressing the Tab key moved the cursor to the next placeholder ($2), enabling you to edit the next part of the code.

This seamless navigation is one of the key reasons custom snippets can save so much time!

Conclusion

In this part, we explored the basics of custom snippets, including how to define and use them to speed up your workflow. In the next part, we’ll dive into advanced usage, uncovering tricks to make this feature even more powerful.