VSCode Snippets-(VSCode Series)

Microsoft VSCode (Pic :Microsoft)

Hello everyone, I hope you all are doing well!

Here in this article, I’ll try to explain you how you can use the vs-code snippets and gain some added productivity in your workflow. I know many of you might be already using this functionality but, I do find many people who are still not either aware of this feature or they find it confusing or they don’t want to spend time to learn something new just to have an autocomplete.
(I’ll happily admit that I was no exception to them before I actually started using it. 😅)

So lets start,

Open VS-code and type “CTRL + P” or on Mac “CMD + P”

Search for “Configure user snippet” and hit enter

(When you do it multiple times you even don’t need to write even full search term as here in my case, “C” was sufficient 😅)

Now, You will be shown with all existing snippets templates and an option to add new one as highlighted below.

Select option “New Global Snippet file” and you will be asked for the snippet name. Provide a decent name and move ahead.

(Note: You may also create snippets for the specific to the project. I prefer to create global ones as it comes handy across multiple projects)

A new file will open with the file name you provided eg. “test.code-snippets”

(Pro Tip 💡 : The default file actually holds a pretty decent explanation of what you can do further. Perfect example of how documentation should be! full kudos to VS-Code Team 🔥)

So, here is the summary of what you see in the default file and this is what you need to know to create your custom snippets.

Define cursor position (Tabstop):

You can use the syntax $<number> to specify the location for the cursor to focus when the snippet is inserted. <number> specify the index eg. eg $1
here, 1 mean when you hit tab one time, the cursor will be positioned where you have written $1.

Define Cursor with label (Optional Placeholders):

You can specify a default label to be shown instead of simply pointing the cursor to location. Syntax for the same is ${1:label}.
eg. ${1:FunctionName}. Here, the word “FunctionName” will be inserted as is when you hit the tab and it will be auto highlighted. Further, whatever you enter will simply replace it.

Syntax for defining snippet:

{
 // Example:
 "<uniqe name>": {
  "scope": "<language>",
  "prefix": "<TriggerWord>",
  "body": [
   "console.log('$1');",
   "$2"
  ],
  "description": "<description>"
 }
}

As I have mentioned in the beginning, the default example is a good point to start. I have updated it for better understanding. You can define the multiple snippets as JSON objects with key value pair.

Let explore what each of the key stands for,

Unique Name: Defines the name of the snippet.

Scope: Define the scope of the snippet i.e. what languages this snippet will be available for. eg. Scope : “php” will make the snippet only available in the files that have extension .php

Prefix: Prefix is actually the keyword that will be used to trigger the snippet. eg. If you have enabled Emmet for HTML, writing “doc” and pressing tab inserts the full HTML page template.

Body: It an an array of lines you can define in side double quotes. each line is separated by comma is treated as new line when the snippet is inserted. This is where you can define the cursor pointer positions.

Description: You can optionally provide the description which will be shown when the snippet is about to get triggered by VS-Code during autocompletion.

Here are a few sample snippets I am using.

(Note : Many of the things can be achieved on a single line but to help you understand, I have intentionally separated on the different line. You are free to play around and create snips according to your choice.)

And That’s it!

I hope now you have a little idea about what are snippets are and there is nothing complicated. Please will give it a try and save some of your precious minutes.

Here is a link to official documentation to explore further where you can add the file, folder name, add date or time and many more. I intentionally left it for keeping this article as kick off stuff. Please go ahead and explore further.

Thanks for reading. See you in the next article. 😊