How to Create Custom User Snippets in VS Code

Howdy Techie,

You are going to read something cool in this article. We all know Visual Studio is a great IDE for programming. You can use the VS code for programming in multiple languages like HTML, CSS, Javascript, Python, C++, etc. And If you are using the VS code you might have already heard and used snippets in it. Some snippets are pre-built and some you can create for yourself. In this article, I am going to show you the exact path so that you can also able to create custom user snippets in the VS Code.

There is always some code which you need to write again and again and you are tired of writing it. Therefore snippets help you to use the reusable code with a simple click and you don’t need to write it so many times from yourself.

I write lots of code in VS Code and seriously I am loving it because I am used to it and I use the feature of creating and using snippets.

You can create snippets for various languages but In this article, I am going to create some snippets for C++. My advice is that read this article up to the end because if you read it then you can create snippets for any languages which you want.

Also Read: Google Chrome Developer Tool

#Pre-built snippets

There are lots of snippets available in the VS Code in the form of emmet. Emmet is a plugin or you can say extension in the VS Code which enables you to use lots of snippets in HTML, CSS, etc. If you have done coding in the HTML then you must have to use the boilerplate of HTML. Every time writing the same boilerplate is very irritating. Isn’t it? But if you have emmet install in your VS Code then simply type ‘!” and press enter or tab then it will automatically insert the boilerplate in your file.

This is the power of emmet. If emmet is not installed then simply search how to install emmet on youtube and you will find a lot of videos related to it.

#Create our first snippet in Visual Studio Code

In VS Code, if you want to create the snippets then you need to write the snippets in the language.json file. For example, if you want to create snippets for the C++ language then you have to write the snippets in the cpp.json file. Don’t worry I will guide you on how to do this.

Open the Visual Studio code and type ctrl+shift+P in windows or cmd+shift+P in mac to then select preference > cpp.json for open the JSON file for creating snippets in C++ language you can same for c or Javascript language.

Another method is on the bottom left corner of the VS Code screen you will see the setting icon, click on it and then select the user snippets option from here and select your preferred language for writing the snippets.

Now read carefully, there are two methods to create snippets, the first one is by writing it manually and the second one is by using the online snippet generator tool. I will teach you both methods to create snippets.

Writing the snippets manually

Let’s start by creating some snippets for a better understanding of how to deal with it.

Boilerplate of c++

See the above figure I have created a boilerplate for c++ language which you type every time when you have to do the coding in c++ language. Since we write the code in JSON file therefore I have written the above code in JSON format.

Now let me clarify what I have written above. Everything in the above snippet is an object and its properties. You need to follow some rules for this.

1. Snippet Name: You have to give the name of the snippet as I have given above and the name of my snippet is c++ boilerplate.
2. Prefix: Prefix is that word which you will type in the file for invoking the snippet. For e.g. my prefix is “include “ as soon as I will start writing include IntelliSense of VS Code will give me a suggestion of my snippet and when I will hit the “enter” button then the above snippet will be inserted into my code.
3. body: Inside the body, you have to write the logic of the snippet.
4. description: When you will write the prefix then you will see the description related to the prefix. Description of the snippet you to identify the right snippet for yourself.

snippet of for loop

The above snippet will insert the structure of for loop when you will type loop in your program and hit the enter button because as I explained above, the prefix of the above snippet is the “loop”.

Creating snippet by online snippet editor

As I said, you can also generate snippet by online snippet generator. Click here for creating your snippet now.

When you will go to the snippet generator website you will see the above interface. This website provides an option for you to create a snippet for VS Code, Sublime Text, and Atom. And you will be able to create custom user snippets in the VS Code.

As you can see in the above here you have to also give the snippet name, prefix, and body but not description because the snippet name will become the description.

You may also like 5 Best free tools for compressing and resizing images.

#Tabstops, Placeholder, and Choices

In all of the above example, you can see that I have used $1 and ${1:example} many times. And I am sure you must have thought that what is it?

$1 is the tabstop and ${1:example} is the placeholder.

A tab stop is used to define the position where you want to move the cursor when you hit the Tab button. Suppose you have written $1, $2, and $3 in your snippet then the cursor will start from position 1 and when you hit the tab button it will go to position 2 and finally on position 3. You can also define the endpoint of the tab stop by writing $0.

In the example of for loop above you can see that I have written something like this ${1:index}, it is a placeholder means when you will invoke this snippet cursor will start from this point and you can name the variable which you use many times and when you will press tab button cursor will jump to the next placeholder.

Similarly, you can also give choices and for doing that you need to follow the syntax ${1|option1,option2,option3|}. See the below example of creating the console snippet in Javascript.

When you will type clog in your file then you will see something like in the above picture in your file and from here you can select what you want to include with the console statements.

Conclusion

I have covered all the points which you need to create custom user snippets in vs code. Now it’s your turn to learn all the steps and implement them in your life and make your life easier than before.

Originally published at https://tecgiant.org on August 29, 2020.