How to create a custom snippet in Visual Studio Code

Using snippets code saves you time and brings you a good mood. So in this post we will find out how to do that.

Step 1:

Open your VSCode IDE and type CTRL+SHIFT+P , search the term “user snippets”, then choose which language would you like to create snippet. In this post we will choose Typescript.

Step 2:

If everything is ok VSCode will open the following file for you.

Typescript.json snippet config file

Step 3:

Here is an example for a function in typescript

The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:

• $1, $2 for tab stops,
• $0 for the final cursor position,
• ${1:label}, ${2:another} for placeholders. Placeholders with the same ids are connected.

Let’s watch it in action!

Demo

Voilà!!!

More info:

You can use the following tool to generate snippet code automatically:

snippet generator

Yahooo! 🎉

If you enjoyed this article, please give it a few claps — you can leave up to 50 — or you can comment if you have any questions, I’ll do my best to answer them!