Add Custom/User Snippets in Visual Studio Code (VS Code)

Add Custom/User Snippets in Visual Studio Code (VS Code)
Share this:

I am writing this article because of two reasons. First is that It can be asked in an interview on making manual snippet in your IDE and another is that this is my best part of the privilege that IDE provide in development.

Though I stated two reasons, I believe that being able to find fun ways of making workflow more efficient should hold prominent reason for learning.

If you haven’t known about this earlier, I am sure you are going to like them and use them from now onward in development.

There are so many snippets and this is always a topic of discussion which one is best. I am a personally big fan and long time user of Sublime but I have moved to VSCode. Believe me, I love it though I miss sublime for its lightweight.

Here, we are going to make our snippet on VSCode.

Let’s Begin:

On a Mac,

Go to the top left side and click on Code and go to “preference” and then click on “User Snippets“.

On the windows,

On a Windows or Linux, you will have a similar interface but with a slightly different user interface. In windows go to the top left corner and click File and go to “Preference” and then click on “User Snippets”.

When you click on UserSnippets, the input element for language preference must appear. Here, select your language on which you want to make snippets.

I selected HTML because I am going to develop a snippet on HTML. You choose your preference.

Now, the JSON file on the user snippet for that language will appear. In that JSON file, there will be multiple lines of comments with sample code in it. We will follow that example to develop our own snippet.

Explanation:

Snippets are stored on the JSON file where snippet code is stored inside array inside body property with each line of code as a string element of the array.

This code may look odd to you if you have never used it before. Don’t worry, we will not need to know this in detail.

Here snippet description is HTML Boilerplate and the prefix is html5template means it is a key that you are going to use this snippet. So when you want to use this snippet, you are gonna need to type this – html5template. You can have this anything except the reserved keyword of your language of preference which in the current case is HTML.

Inside body tag, enter your snippet code as I said earlier in structure. Look through the body carefully, we have a value of the body in an array with every line of code as a string element.

Save this and write prefix in your HTML file. When you use it, you get a boilerplate of HTML Structure which is in your body.

This is not a limit on the number of snippets, you can add another snippet. For that, you have to write in the same file.

After the curly brackets after the description and add another snippet with the same syntax as earlier. Here I added another snippet with prefix bulletitem to create the list.

Now you have two snippets one for a template for HTML skeleton and another for list item.

if you watch carefully in code above there is $0 in code (line number 16 and 28). What is that number after the dollar signifies?

That is to place the position of the cursor in your snippet. In the snippet, when you use it, the cursor will move to line number 16 for the HTML template and 28 on the list template.

I hope you learned a new thing and enjoyed learning.

If you have any problem doing this, leave your comment down here.

Stay Safe !!! Take Care

Happy Coding !!! Happy Learning

1

Related posts

Leave a Reply