Introduction To Snippets In VS code

Snippets are the templates that make development easier by allowing entry of repeating code styles, such as loops, toast-message, standard null check, try-catch, or conditional statements. Developers can easily insert snippets into their code using a combination of hotkeys or right-click menu commands. They usually contain commonly used code blocks such as try-finally or if-else statements, but they are equally valuable for inserting entire classes or methods.

In this post, we will cover the reasons for using snippets, built-in snippets, installing snippets from the Extensions Marketplace, making your snippets, using snippets in the Intellisense, project snippet scope, and is it possible to delete snippets from IntelliSense. 

First, let’s talk about why we should use Snippets.

Why Use Snippets?

1. Snippets can boost your productivity, saving you time and decreasing input mistakes.

2. Snippets will let you not forget to include something important.

3. A snippet is a small part of text or source code to be inserted into the code of a program or web page. They provide an easy way to implement commonly used functions or codes into a bigger code segment.

4. A snippet integrated into the workflow encourages less mouse use. And snippets that are well-written offer a logical path for you to tab through and then pause to edit to complete the template as you desire, and when you arrive on the other side, write the next line.

Different Code Snippets In Visual Studio Code

1. Built-in Snippets

There are many extensions in the VS Code Extensions Marketplace that contain snippets. If you find one you want to use, install and restart VS Code, and a new Snippet extension will be available. Some popular extensions that include snippets in their language support are:

1. Python

2. C/C++

3. C#

4. ES7 React / Redux / GraphQL / React native fragment

5. JavaScript (ES6) code snippet

You can install this extension and many other popular extensions that include snippets in their language support from the VS Code Extension Market section.

Moving forward, let’s discuss the steps for installing the snippets. 

How To Install Snippets From The Extensions Marketplace?  

There are many extensions at the VS Code marketplace that include snippets. You can search for extensions and select whichever you want. Once you find the extension to use, install it and then restart the VS Code. After that, new snippets will be available.

Next comes making your snippets and how to use snippets in Intellisense. 

How To Make New Snippets? 

You may effortlessly create your snippets with no extensions. To make or edit your snippets, select User Snippets that fall under File > Preferences (Code > preferences)  on macOS, after which choose the language (through language identifier) for which the snippets should appear for all languages. Snippet files are written in JSON, and we can define as many snippets as we want.

1. Open VS Code.

2. Select the Setting button below.

3. Select User Snippets.

4. Next, you can select your programming language here.

5. After selecting a language, you can make your snippets by filling the Prefix, body, and description.

6. Lastly, save your snippets.

In the above example:

• “try-catch JavaScript” represents the snippet’s name. It gets displayed through IntelliSense if the description is not there.
• “body” comprises one or extra lines of content, joined as multiple lines upon insertion. Whereas, Embedded tabs and Newlines might be formatted as per the context wherein the snippet gets inserted.
• “prefix” defines one or extra cause words to get the snippet displayed in IntelliSense.
• “description” is an optional description of the snippet as displayed by IntelliSense.

Snippets files support c – style comments and are written in JSON.

To write your custom snippets, you must:

1. Define the scope of the snippet and select the appropriate file.

2. Write your custom snippet using snippet syntax.

1. Define The Scope Of The Snippet & Select The Appropriate File – Snippets are scoped to offer only matching fragments and may be covered by either Language Snippet Scope or Project Snippet Scope.

1.1 Language Snippet Scope 

All snippets range to one, some, or all languages ​​(i.e., Global) depending on whether they are defined in a language snippet file or a global snippet file. For language snippets, select a language from the list (File > Settings > Custom snippets); for global snippets, select New global snippet file.

1.2 Project Snippet Scope

You can have global snippet files (JSON with .code-snippets extension) in your project scope. For project scoped snippets, go to File > preferences > Custom snippets and select the New snippet file for (name of your repository) option. Type the name you want to give your snippet file in the input box as shown below and press Enter. A JSON file ending in .code-snippets is created at the bottom of the project in the .vscode folder, as shown below.

2. Write Your Custom Snippet Using Snippet Syntax

After selecting the snippet scope, write your custom snippets in the snippet body. The snippet body can use special constructs to control cursors and the inserted text. Some supported features and their syntax are:

1. Tabstops – Tabstops can be used to move the editor cursor in the snippet. $1 and $2 are used to determine the cursor position. The number represents the order in which the tabs were visited, and $0 indicates the final position of the cursor.

2. Placeholders – Placeholders are tab stops that have some default values, like ${1:SomeText}.  The replacement text is pasted and selected so it can be easily modified. Replacements can also be nested, such as ${1: SomeText ${2: SomeText}}.

3. Choice – Placeholders can also have choices as values. The syntax consists of comma-separated (optional) values ​​enclosed by vertical bars, for example, ${1 | Choice One, Choice Two, Choice Three |}. When a fragment is inserted and a placeholder is selected, the selection prompts the user to choose a value.

How To Use Snippets In The Intellisense? 

1. Open the same programming language tab. 

2. Write your snippet’s name on IntelliSense.

3. Select your snippets.

Project Snippet Scope

Project snippet files are beneficial for sharing snippets with all users working on a specific project. Project folder snippets can be scoped to particular languages using the scope property. They are similar to global snippets. 

Finally, we discuss whether we can delete snippets from IntelliSense.

Can I Delete Snippets from IntelliSense?

It is possible to hide particular snippets from displaying in IntelliSense (completion list) by choosing the “Hide from IntelliSense” button. This is placed to the right of snippet items inside the Insert Snippet command dropdown. It still becomes possible for you to select the snippet using the Insert Snippet command, but the hidden snippet might not get displayed in IntelliSense.

Conclusion 

When it comes to delivering a successful project, every company and developer wants to complete it as soon as possible. Developers are always searching for effective tools or tricks to increase development speed and boost productivity. Nobody wants to spend much time writing every single line for a program or writing the same line of code in multiple places. This is where Snippets code emerges as an amazing tool that would help you enhance developers’ coding speed. Code snippets are templates that can be used to enter repeating code patterns like loops, conditional statements, and other frequently used code in your program. Need assistance with which CRM platform to choose, implementing a CRM across your org, or developing custom features? Hire Cloud Analogy, a certified CRM consulting company that delivers unique yet effective CRM solutions that aligns with your unique business requirements and goals. Talk to our best CRM consultants today!