Why snippets?

No matter what programming language you use, there’s a lot of repetitive coding going on in our everyday coding. For example:

  • Log printing:The console log, log. The info ('... ')
  • Output to console:System.out.println("...." ), FMT. Println ("..." )
  • Cycle:switch(...) {}, for(I := 0, I <= len, I ++), for... i, etc.

This template code in Java, go static language will be more, in fact, usually in addition to template code, there are a lot of template files, but also there are a lot of repeated coding work, for example: Vue files, HTML files, XML files, a lot of tags, methods, attributes are basically fixed, I usually encounter more or Java, go inside the template file and code, on the repeated code is too numerous to enumerate, here but more overview.

Writing template code and template files doesn’t actually give you any skill improvement other than typing speed. It’s repetitive and low-value, like if you could practice “Hello world” a thousand times, you wouldn’t be good at it.

So as an efficient programmer, we need to know how to save our time and invest our limited energy in high-value and high-return things. For these unavoidable repetitive coding work, we need to use technology and tools to solve them. So VSCode provides user snippets of user code (also known as Live templates in the jetbrains family) that do just that

How do I use Snippets?

Now that we know why snippets are used, what does snippets do in VSCode

Those of you who are familiar with the Jetbrains family of products should know that Live Templates is very useful. In fact, VSCode snippets are the Live Templates feature of type Jetbrains, and they solve the same problem.

VSCode’s official description of snippets is as follows:

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

The simple translation is:

A code snippet is a template that makes it easier to enter repeating code patterns, such as loops or conditional statements

Use snippeets to wrap ajax duplicate code in javascript. Just type in the keyword: ajax, and you can bring out the entire code, which is very efficient. See the following example from the official:

Look at the existing snippets

In fact, VSCode has a default initialized snippets for each language, which is suitable for daily use. Open the COMMAND line interface in VSCode and type: Insert Snippets to see the currently available snippets.

That’s what snippets look like in a JavaScript language (currently built in javascript-friendly)

When I switch to Golang, I see the following snippets (without the language pack installed) :

Such a small number of snippets is certainly not enough, but VSCode’s rich plug-ins give us the possibility to extend, and often the associated language kits have a large number of commonly used snippets built in, which we can usually just install.

In the VSCode extension use: category: Snippets filter search to install the corresponding tool, as shown:

After installing the language pack, enter insert Snippets on the VSCode Command page to see a large number of snippets added:

Proficiency with snippets built into the language pack is sufficient for 80% of scenarios.

But it may not be able to satisfy and cover all scenarios,

In this scenario we need to create our own snippets to completely solve the problem of code duplication.

Create your own snippets

Creating snippets in VSCode is very simple (without installing any extensions) and there are two ways to do it:

  1. In macOS select the Code -> Preferencts -> User Snippets option
  2. Or just type in VSCode Command: Configure User Snippets

To create snipperts select New Global Snippets File and enter the name of the snipperts you want to create

The snipperts files are jSON-style and the default format is as follows:

Let me briefly describe what attributes do:

  • Scope: Limits the scope of code snippets. For example, go language snippets do not appear in JS, and vice versa
  • Prefix: is a shortcut keyword. When VSCode detects the prefix keyword in the code, the editor replaces it with the body content
  • Body: is the content of a duplicate code template, usually something that the programmer wants to automate, the duplicate code, the template code, is typed in here
  • Description: As the name suggests, this is a detailed description of the snippets

It is worth mentioning again that the $1 keyword in the body is the location of the mouse cursor after the template code is replaced. When there are multiple $1 and $2, the mouse cursor can be quickly switched with the TAB key to improve efficiency. This part will not be described in detail. Interested partners can explore by themselves.

There are more details about the Snipperts configuration files that I won’t go into here,

Those interested in digging deeper can go to the Snippets’ official documentation, which explains everything in detail.

References:

  • [Snippets in Visual Studio Code