Say goodbye to repetitive code, use VSCode snippets to guide the use of efficient tools

Say goodbye to repetitive code, use VSCode snippets to guide the use of efficient tools

Why use snippets (code snippets)?

No matter what programming language you use, there will be a lot of repetitive code writing in our daily coding work, such as:

  • Log printing: console.log'...')
  • Output to the console:System.out.println("....") fmt.Println("...")
  • Loop: switch(...){} for(i := 0, i <= len, i++) for...i wait

This template code in java, go static language will be more, in fact, usually in addition to the template code , there are many template files , there is also a lot of repetitive coding tasks such as: vue files, html files, xml files, inside Many tags, methods, and attributes are basically fixed. I usually encounter Java and template files and codes in go. There are too many repetitive codes, so I won't give too much overview here.

These templates to write code and template files, in fact, in addition to practicing your typing speed, but will not improve any skill on to you , belong and low-value repeat things , like even if you put the "hello world" to practice one thousand Every time, you won t be a master,

So as an efficient programmer, you should know how to save your time and invest your limited energy in high-value, high-return things. For these unavoidable repetitive coding tasks, we need to use technology and tools to They solve it, so the user snippets user code segment provided by VSCode (also called Live templates in the jetbrains family) is used to do this.

How to use snippets?

Knowing why we need to use code segments, let's talk about the specific role of snippets in VSCode

Students who are familiar with Jetbrains family products should know that the Live Templates function is very easy to use. In fact, VSCode snippets is the Live Templates function of 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.

A simple translation is:

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

Use snippeetssnippet of duplicate code in javascript ajax encapsulates, only need to enter a keyword: ajax, the entire code segment can be brought out, it is very efficient, particularly from the examples below refer to the official:

View existing snippets

In fact, VSCode has snippets initialized by default for each language, which can meet daily use. Open the command line interface in VSCode and enter: insert snippets to view the currently available snippets, as shown in the figure:

The above is the snippets seen in the JavaScript language environment (currently built-in JavaScript support is more friendly)

When I switched to golang, the snippets viewed were as follows (without the language pack installed):

So few snippets are definitely not enough. Fortunately, VSCode's rich plug-ins provide us with the possibility of expansion. Usually the associated language toolkits have a large number of commonly used snippets built in, and we usually only need to install it.

In the extended use of VSCode: @category:snippetsfilter search and install the corresponding tool, as shown in the figure:

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

Proficiency in using the built-in snippets of the language pack can satisfy 80% of the scenarios.

But it may still not be able to meet 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 (no extensions are required), and there are two ways to do it:

  1. Select in macOS: Code -> Preferencts -> User Snippets option
  2. Or enter in VSCode Command: configure user snippets

If you are creating snipperts, select New Global Snippets file and enter the snipperts name you want to create , then you can enter the configuration

The snipperts file is in JSON style, and the default format content just after creation is as follows:

I briefly describe the role of attributes:

  • Scope: Limit the scope of the code segment, for example, the code segment of go language will not appear in js, and vice versa
  • prefix: is a shortcut keyword. When VSCode detects that the prefix keyword appears in the code, it will be replaced with the content of the body in the editor
  • body: the content of the repeated code template, usually some repetitions that programmers want to automate, the template code, enter here
  • description: As the name implies, it is a specific description of this snippets

It is worth to mention what is, body inside the $1key is the position of the mouse cursor is located after the template code replacement, when there is more $1, $2time, the keyboard can TABquickly switch the position of the mouse cursor keys for improving efficiency, this I won't describe it in detail, and interested friends can explore it on their own.

There are many details about the snipperts configuration file, so I won t go into it here.

Partners who are interested in in-depth research can VSCode Snippets official related documents, which explain in great detail.

Reference materials:

  • [Snippets in Visual Studio Code