preface

When we are developing projects, in order to develop quickly and reduce unnecessary time, we will install relevant framework plug-ins to help improve our development efficiency. We will rely on the IDEA intelligent prompt using related plug-ins, but we need to learn and memorize the shortcut keys or prefixes that trigger the intelligent prompt.

As a lightweight editor, VScode also provides the ability to write custom code snippets. The following content is to record the writing and use of VSCode snippets, so that we can write our own code snippets for a project and improve the usual development efficiency.

Create a code snippet quickly

Clicking on VSCode’s file -> preferences -> snippets will return you with an option similar to the one below

We can create a global snippet for your VSCode editor as well as for a project. Of course, I prefer to build snippets for a project.

When we choose to create a global snippet or a workspace snippet, VSCode asks us to enter the filename of the snippet. And it creates a.code-snippets file in the.vscode folder

The new code snippet file has an Example. Let’s uncomment the following code and test it.

The VSCode snippet contains these attributes, and the meaning and effect of each attribute are recorded

Introduction of several properties of the code snippet

scope

Indicates which language the snippet works on. Languages are separated by commas. Common examples include javascript, typescript, HTML, CSS,vue, etc. If set to “”, it works everywhere.

prefix

The character prefix that triggers the snippet

description

A description of the code snippet

body

The content of an object snippet, usually an array with one line in the array corresponding to the line after the generated snippet

The function of the $placeholder

In the example above, type log and press TAB to get console.log(); The code.

After the text appears, the cursor is in (), and then press TAB to move the cursor to the next line, which is 2. In the same way, we can set the position of 2.

additional

Sometimes when we write a snippet of code ourselves, the first step is to write a piece of code, and then concatenate it as a string. It might cost us more time. So here’s a site that can help us generate snippets: a site that generates snippets.