How to create custom VS Code snippets ⌨️

Maxime Lefebvre — Thu, 31 Oct 2024 04:11:54 +0000

An enhanced version of this post is available here

As developers, we often find ourselves writing similar code patterns across different projects. Visual Studio Code offers many productivity features to address this, including snippets.

While built-in snippets are useful, creating custom snippets tailored to your needs can significantly enhance your coding efficiency.

In this tutorial, we'll introduce you to the basics of VS Code snippets. We'll cover what snippets are, how to create your first custom snippet, and explore some fundamental features like tab stops and default values.

What is a snippet ?

A code snippet is a small block of reusable code that you can quickly insert into your programs. In VS Code, snippets help developers avoid repetitive tasks by providing a quick way to generate common code structures.

They can be accessed through VS Code extensions (if you use React, i highly recommend installing this one) but you can also create your own personalized snippets, let's see how to do that !

Your first custom snippet

Now that we understand what snippets are, let's dive into creating your own. Let's break down the process into simple steps:

1. Set up a new snippets file

In VS Code, open your command palette with CMD / CTRL + SHIFT + P and search for "Snippets: Configure User Snippets"

Select "New Global Snippets file" and name it. (You can also create a snippet file especially for your project or for a specific language, feel free to choose an option that suits your needs)

2. Understand the structure

By generating the file, you will se a bunch of informations and a default example at the end, you can uncomment it.

Here, we have a snippet that prints a value to the console. Let's see how it is structured:

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

The scope defines where this snippet is applicable. In this case, the snippet works in javascript ans typescript files

The prefix is the acronym that you will type to invoke the snippet

The body contains the code that will be displayed

The description will show up in the autocomplete suggestions

3. Try it yourself

Save this file, and open a new one with the .js extension
by typing log you should see the vscode autocomplete suggestion for the snippet we just described

Tab stops

We now have the keys to create our custom snippets...
But did you notice the $1 and $2 ?

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

These are Tab Stops, they define where the cursor will be placed at:

$1 : initial position
$2 : second position (after pressing TAB)
$0 : last position

This is not mandatory, but very helpfull if you have multiple values to add to your snippet. By default, the cursor is placed at the end of the body

Default values

We can also define default values for tab stops that will automatically be highlighted.
Simply replace the $1 by ${1:Your default value},

If i take the previous example and replace the $1 by ${1:Hello world}, this will result to

the default value will be selected and so, easily replaceable 👍

Multiple values

It also works with multiple values, simply enclose the values between || chars :

For example:

console.${2|log,error,table|}(${1:Hello world}) will result to

Conclusion

That's all folks!

You now have the keys to create basic custom snippets in vscode !

If you're interested in going further, I highly recommend you take a look at the official documentation, which goes into more detail about custom snippets.

in the meantime, you can take a quizz to test your knowledge on the original post