Today I will show you how to create custom code snippets in vs code yeah custom code snippets in vs code you don’t need to install any extension to create this code snippets. It is very easy to create your own custom snippets in vs code.
You may have used many code snippets extensions in vs code which provide you short snippets while coding than it autocompletes the code you may want to create your own snippet and today it will become true.
If you don’t know what exactly is a code snippet than if you have ever written html in vs code you may know this snippet ! this autocompletes a html template for us like this in the video
So this is how snippets work they are very useful for writing fast code and now I will show you how to create your own snippet of any programming language you want and it will automatically write the code for you.
If you want to know the best vs code extensions you should install than read this guide – Best vs code extension you need to install.
How To Create Custom Code Snippets in VS Code
Contents
So now I will tell you step by step how to create a custom code snippet in vs code for any programming language. As I have told you it is very easy and simple don’t need any extensions for it.
So before we start if you don’t have vs code than you can download it from here – DOWNLOAD VS CODE this is the best code editor you should use.
1. Open code snippets
The first step is to open vs code you can open it anywhere then go to the file tab which is at the top and under file there will be preference click on that it will show more tabs than click on User Snippets button.
2. Choose a programming language
Now you will see something like above image now you have to choose a programming language for which you want to create the snippet for the snippet will only work for that programming language.
So choose the programming language you are using and you want to create snippet for and click on it it will create a snippet file I will be creating a snippet for HTML language.
3. Create and clean file
Now you should see a json file opened mine is html.json your’s would according to your programming language. You could see that the whole code is commented out now we need to uncomment some code and delete the rest commented code.
After deleting and uncommenting your file will become clean and will look like the below image
4. Create a code snippet
Now we are ready to create our snippet so first see all the atributes in the file mean and how to use them.
Print to the console – Now you could see that word you can add anything over there it is the name of your code snippet add something meaningful there.
Prefix – This is the shortcode which will be used to create the snippet like in html we used “!” to create a code like that you need to add shortname inside the prefix by default it says log change it to whatever name you want but keep it short.
Body – then we have the body inside body is the code which will be automatically generated when you type the prefix while writing code put all the code you want to generate if you want to add a extra line add a comma and add.
Description – Description is the description of the code snippet add a good description so that you understand what is the snippet doing.
5. Example code snippet
Now you can create your own snippet and I have also created a short code snippet which is creating a div and inside it there will h1 which will saying hello coders below is the output.
Summary
So this was a short article on how to create a custom code snippets in vs code if you have created your first custom vs code snippet than congratulations do comment below that you have done it.
This is why I love vs code it gives a lot of benefits if you want to know more about vs code than read this article – Best code editor for coders in 2021.
I hope you found what you were looking for and if you liked this article than do subscribe to our newsletter so that you can get the mail when we post a new awesome guide like this.
Thank you for reading Have a nice day 🙂