How to create custom VS Code snippets
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:
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)
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
- Save this file, and open a new one with the
.jsextension - by typing
logyou 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 this quiz to test your knowledge ↓