preface

Vscode is a very popular development tool for front-end developers. It is powerful and supports rich customization. As the saying goes, “to do a good job, you must sharpen your tools first.” It is very necessary to make good use of the development tools you use.

1 introduction

This article showed you how to set up custom code snippets in vscode to improve code entry efficiency.

This is a basic feature that doesn’t matter what language you’re writing code in. Anyone using vscode can read it.

2 Main Contents

• How to define a snippet • How to use a snippet • Advanced usage in a snippet

3 How to define code snippets

Code snippets can speed up code entry. The basic idea is to pre-edit a piece of code that is used very frequently and has very long character content. You get this long code directly by typing a particular, shorter character in the editor.

So the most important step is to define the mapping.

3.1 Determine the language and create the corresponding JSON file

In vscode, open the command:

File > Preferences > User code snippetsCopy the code

At this point, a dialog box will pop up as follows:

Snippets appear in Existing snippets if you have already created one for a language type, and in New snippets if you have not. The created Code snippets will be saved in your computer’s C:\Users\ your User name \AppData\Roaming\Code\User\snippets directory (Windows 10 OS, others can find), you can go to have a look. This is where the contents of the custom snippet are stored.

Among them:

Javascript. Json indicates that the code snippets in this file are only available when you edit the.js file.

HTML. Json can be used only when editing. HTML files. Other things like that.

We’re assuming that you haven’t defined the css.json code fragment before, so you can select the css.json field to enter the editing state of the file.

3.2 Editing code snippets – JSON file

The code snippet corresponds to a JSON file. By default, its content is commented, and the content of the comment is a description of the usage of the snippet. As follows:

{ // Place your snippets for css here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, Example: // "placeholder ": {// "prefix": "Segments of the trigger keyword," / / "body" : [/ / "the first line of code," / / "of" the second line of code / /, / / "description" : "in this code instructions" / /}}Copy the code

Description:

Prefix: The keyword to call out the snippet. Enter this to call out the snippet.

Body: The body of the code snippet. The code you need to write is here,

Description: Code segment description. The prompt displayed by the editor after entering prefix.

Here is a simple example. Edit css.json as follows:

{" text centered ": {" prefix" : "tc", "body" : [] "text - align: center;" , "description": "text center"}}Copy the code

The function of this is that when you edit a.css file, you type tc to quickly generate text-align:center; This code.

If you want to define a second fragment, add it later. Such as:

{" text centered ": {" prefix" : "tc", "body" : [] "text - align: center;" , "description", "text centered"}, "text right" : {" prefix ":" tr ", "body" : [] "text - align: right;" , "description": "text right"}}Copy the code

4 How to use snippets

When you have finished editing css.json above:

1. Save the CSS.

2. Open or create a CSS file.

3. Enter a value in the CSS filetcAnd you can see the effect.

　　

Note that this snippet does not fire when editing other types of files.

5 Advanced usage in code snippets

5.1 Cursor Control

After the code snippet is generated, by default the mouse cursor is at the end of the code snippet. If you want to customize the cursor behavior, you can use the following Settings:

• 1: The initial position of the mouse after generating the code snippet. •1: The initial position of the mouse after generating the code snippet. •1: The initial position of the mouse after generating the code snippet. •2: The second mouse position after the code snippet is generated. 3,3,3,4, 5….. • 5… • 5… •0: Indicates the final position of the cursor when you press TAB. • Multiple n: Indicates that the cursor is positioned in multiple places at the same time. You can edit in multiple places at the same time. •n: indicates that the cursor is positioned in multiple places at the same time. You can edit in multiple places at the same time. •n: indicates that the cursor is positioned in multiple places at the same time. You can edit in multiple places at the same time. •{1: character} : the initial position of the cursor after the code segment is generated (1 indicates the sequence number where the cursor starts, and the character indicates that the cursor will select the character directly after the code is generated).

Here is an example:

// omit other "comments ": {"prefix": "zs", "body": [" / * -- -- -- -- -- -- -- -- -- -- - $1 start -- -- -- -- -- -- -- -- -- -- -- - * / ", "$2" and "/ * -- -- -- -- -- -- -- -- -- -- - $1 end -- -- -- -- -- -- -- -- -- -- -- - * /",], "description" : "annotation"},Copy the code

When editing your CSS file, type ZS and press Enter:

The cursor will be at $1, notice there will be two cursors, meaning you can edit both at the same time

The next TAB press will position the cursor at $2.

The renderings are as follows:

5.2 Special Characters

Code snippets that contain special characters need to be escaped by \ :

Line feed: \r or \n

Indent effect: \t. Represents the indentation of a TAB key.

6 summary

Key points:

Custom code snippets can be a huge productivity boost: generate a long piece of code with less code.

The examples in this article are for CSS code, and the modified file is css.json. Similarly, you can set the code snippets used in other languages.

The result is a JSON file, which you can share with others.

Reprinted from mp.weixin.qq.com/s/tOkP5CX2K…