How to Create Snippets in Visual Studio Code

Can't Open Visual Studio Code? Here Are 9 Fixes!

Want to code more efficiently?

Every developer wants to organize their work and loves making their code more efficient and clean. Especially when it comes to repetitive tasks, rewriting the exact lines of code is boring and time-consuming. Therefore, one should always be aware of the tools and tricks that can be used to ease the tasks at hand. Visual Studio provides a lot of such features and one of them is snippets.

In this article, we will be discussing the need for snippets and how one can create snippets starting from simplest ones, clog and conc to more complex ones such as forarr. Furthermore, we shall also discuss how to add keyboard shortcuts and different add-ons that allow a user to use snippets to their full potential.

 

What are Snippets?

While working on Visual Studio Code, snippets are very important if you don’t want to waste time re-writing codes. So, what are snippets? Snippets are a brief code that acts as a template for codes that are used repeatedly with minor variations. With just a few adjustments your code is ready to use.

Here, we will discuss in detail the format of snippets and how to use them for as simple as one-line codes to large complex ones while also introducing the features that will allow you to minimize extensive repetitions with ease.

 

How to Create a Snippet?

Now let’s look at the process. Snippets are stored in JSON files. To create one, enter File/Code>>Preferences and select User Snippets. Next, select the language for which you want to create the snippets. It has a simple format: first, a name is defined, then a trigger word called prefix is associated, one or more lines of code are written in the body and a short description is provided.

For instance, once we have created a ‘For snippet’ the Visual Studio will automatically save it and will assign the prefix ‘for’ to this snippet. So when wherever we will type ‘for’ in any new or previous code files, the compiler will auto suggest the snippet that we made in our JSON file, as depicted in the image below:

"For" Snippet in VSC

Source: https://code.visualstudio.com/docs/editor/userdefinedsnippets

 

Moving on the following image shows a JavaScript JSON file where we have created clog, con, and forarr snippets. However, in the sections below we have briefly described each clog, conc, and forarr snippet and how to create each of them:

Sample JSON file in Visual Studio Code

 

How to Create a Simple Clog Snippet (clog)

The clog is a one-liner code to start with. Let’s write a JavaScript snippet for the console log. Here, we have named our snippet “console log”. The trigger word is “clog” which will the VS code to call this snippet. The main code lines go into the body, which in this case is “console.log(‘$1’);”

Simple clog snippet example in Visual Studio Code

 

What is a Tabstop and How to Modify Snippets using Tabstops

In the above-mentioned code, console.log contains ‘$1’. What are we using this for? These are tab stops that allow us to shift the cursor to a specific place in the code as soon as we add a new snippet. Making it further easier to modify according to the requirement. ‘$1’ is therefore used to specify the location of the cursor. The number refers to the order in which the cursor will jump and will allow the user to edit the snippet.

 

How to Add Multiple Choices to Tabstops

What if we can add choices to the tab stops rather than making the user write it every time. Add a multiple choice option to snippet by using the ‘Choice’ feature. The following syntax can be used for this purpose:

{1|one, two, three|}

When the tab stops will shift the cursor to this position in code, it will prompt the user to select one option from the given choices.

 

Using Console Choices (conc)

We can now add choices to the console snippet that we wrote previously as our first template. We want the following options;

  • warning
  • log
  • error

Let’s add these to our snippet:

Simple conc snippet example in Visual Studio Code

 

How to Use One Tabstop for all (forarr)

If the same tabstop occurs multiple times in the code, then snippets allow you to edit them all at once by just defining the first one. In this way, a variable is created and copied to all the locations in the code where it is required. When the snippet is finally used, all the tabstops where the same variable occurs are updated with the provided value. The user doesn’t have to change the cursor position again and again just to update the same variable multiple times.

Here’s how to use this feature; we replace the number in $1 with the variable and place the variable at the positions we require it. In the end, we define where the cursor would stop by using $0. Let’s use this feature in ‘for loop’, where we mostly use one variable multiple times:

Simple forarr snippet example in Visual Studio Code

In the for loop, we play around with the index very much and use it in every other line of the code. When we place the snippet in our actual code by calling the trigger word ‘forarr’, the cursor is placed directly at the end of the first index variable appearing in the snippet. It selects all the index variables and is ready to replace them with the number/variable we will write.

Once we are done with the ‘index’ variable it moves the cursor to another one which in this case is ‘array’, and then later to ‘element’. A similar process is followed for each of these variables.

 

Adding Keyboard Shortcuts To Snippets

It would be fun to have keyboard shortcuts for your snippets. Yes! You can add shortcuts. Visual studio code offers custom keybindings for such cases. Follow these steps to create custom shortcuts;

  • Open keybindings.json file (from preferences select keyboard shortcuts file)
  • Add the following code to this file

Example snippet for adding keyboard shortcuts in Visual Studio Code

  • Save the file and use the key in the main code to add snippets

In the aforementioned code, the key defined the keyboard shortcut to be used. Language is defined here as JavaScript as our snippet is saved in this file. The name refers to the snippet code that already exists and is referred to here.

 

Conclusion

We defined snippets and their uses. Discussed why this helps organizes our work and make our code easier to write. We wrote our first code in JavaScript by simply selecting our language in User Snippets from File/Code>Preferences.

We wrote console log, console choice, and multiple tabstop for loop snippets. We learned that tabstops can be placed in snippets by simply adding a ‘$’ sign and the order number, in this way, “$1”. We explored the feature to replace similar variables in tabstops by updating just one of them and later using $0 to add a final stop to the cursor.

As a bonus, we learned to create keyboard shortcuts for our snippets. That’s it.

You are ready to use snippets! Happy coding.

Total
0
Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts
Total
0
Share