Create a Custom VS Code Snippet

Introduction

As Developers, we always prefer not to write the same code again and again. Snippets solve this problem by making repetitive tasks simpler and quicker.

There are thousands of pre-built snippets on VS code to make our work easy. We can also create our own custom Snippet according to our preferences. In this article, we'll discuss How to create our own custom VS Code snippet.

So, Without delaying further, Let's START!!!

What is Sippets?

A snippet is a template that can be inserted into a document. It is inserted by a command or through some trigger text.

In simple words, with snippets we create a boilerplate file, and insert commonly used blocks of text.

Types of Code Snippets in VS Code:

In VS Code Snippets are scoped into 3 types. They are:

1. Language Specific (Only specific language can access).
2. Global Snippets (Every language can access).
3. Project Scoped (Restricted to project).

Why to use Snippets?

Before creating our custom snippets, let's see why we need snippets.

• It reduces repetitive work.
• Adds more reusability by allowing you to reuse the same code in multiple places.
• Reduces the chances of errors when copy-pasting.
• Increase the speed of your development.
• It makes your code consistent

Creating Snippets:

Now we have an understanding of what is snippets and why we need them. So let's start creating our own custom VS Code Snippets.

1. At first, click on the settings icon at the bottom left of the VS code. It will open this kind of pop-up.

1. Now Click on User Snippets. Now we can choose which kind of snippets we want to create. For this example, we'll choose the Global Snippets file.

1. Now we have to give the name of that file. Here, we'll be giving the name as custom_snippets.json .

1. After that, It should look something like this if you have not set up any snippets yet.

1. We'll be creating a console.log snippet for logging a string. Here's the code for that:

{
    "console.log string": {
        "prefix": "cls",
        "body": "console.log(\"$1\");",
        "description": "Custom snippet for logging a string"
    }
}

If you would prefer to write a snippet in a GUI, you can use the snippet generator web app.

If you want to know more about the Syntax,Check this.

1. Now we have created our Snippet! Let's see if it works or not!

Yay! It works!

Now we have created our first custom VS Code snippets.

Amazing! Now you can create your own custom snippets according to your requirements!

Conclusion:

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more content on Javascript, React, and other web Development topics.

For Paid collaboration mail me at : arindammajumder2020@gmail.com

Connect with me on Twitter, LinkedIn, Youtube and GitHub.

Thank you for Reading :)