Visual Studio Code | Mouli Bheemaneti

Custom Snippets — Hidden Secret Sauce in VS Code

A few shortcuts which you might have never used in VS Code by Mouli Bheemaneti

Visual Studio Code Logo. Reference to brand guidelines of VS Code: https://code.visualstudio.com/brand

What is VS Code?

Visual Studio Code, also popularly known as VS Code. VS Code is a source-code editor developed by a tech giant — Microsoft. This has many features which ease the development process like extensions, embedded Git, syntax highlighting, and many more. One of the features, which I’m going to discuss now, is Custom User Snippets.

In this article, we’ll explore how to use and create custom snippets in VS Code, unveiling a hidden secret sauce for boosting your coding efficiency.

What are Custom User Snippets?

Recently when I was checking the flow of the JavaScript code, I had to use console logs at many places and every time, I had to type the full-text console.log. But Custom User Snippets came to my rescue.

Now I type csl, where Visual Studio Code (VS Code) shows a dropdown in which csl stands first. When selected, VS Code automatically converts the string csl into console.log.

Explaining Custom Code Snippet

{
 "<heading>": {
  "prefix": [
   "<tag1>",
   "<tag2>"
  ],
  "body": [
   "<code which you want to make it short> $1, $2"
  ]
 }
}

You will have to rewrite the tags with your desired inputs to create your custom code snippet.

<heading>

Write the heading for your understanding. This description will be visible while you type that. The editor will fill it in when you select your desired snippet option.

<tag1>, <tag2> etc…

These are the prefixes that you can type to fill in. For example, csl, print, pt can be used to implement the same code “console.log()”

<code which you want to make it short>

This is the final output when any of the given headings is selected.

$1, $2 etc…

These are the cursor markers. $1 implies that after a snippet is selected, the cursor automatically jumps from the current position to the $1 position in the snippet. When pressed tab it jumps to the next position marker.

Example

I’ll explain with an example below.

"Print shorcut - Console log": {
  "prefix": [
    "print",
    "conso",
    "consolelog",
    "csl"
  ],
  "body": [
    "console.log(\"$1\",$2)"
  ]
}

<Heading>: Print shortcut — Console log

<tag1>, <tag2> etc…: csl, print, conso

Here when you enter csl in the editor, it shows console.log in the list as shown in the below image.

Using a javascript custom code snippet to ease the process.

When you select it will fill as console.log and places the cursor at $1. Watch the gif below for a clear understanding.

Preview of how the custom code snippets are used.

Ok, now we knew how to use it, but how to add it to your VS Code? Let me go through that in the next section.

How to add a Custom Code Snippet?

Now let’s add our first custom code snippet.

Shortcut to open editor commands:

In windows,
`Ctrl + Shift + P`

In mac,
`⌘ + ⇧ + P (Command + Shift + P)`

Search for “snippets”

Editor Options opened through a shortcut.

Then search for your programming language. Here in this case we are going for JavaScript.

Language option in selected user snippet language in the previous step.

Add the above example piece of code in it. Your snippet file should look similar to the below image.

Final view of javascript.json

The comment in a default snippet file in VS Code states that:

Each snippet is defined under a snippet name and has a prefix, body and description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:

$1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the same ids are connected.

Conclusion

There are many secret sauces in VS Code that may not have grabbed your attention yet.

I have only mentioned JavaScript here, but I wrote a few code snippets in SCSS, TypeScript, and VueJS in my Github Repo.

This secret can be shared with your peer coders.😁

Happy Coding.