Use of snippets (code templates) in VSCode

Sometimes when VSCode is used for front-end coding there are some code sections that need to be written repeatedly. Use snippets (code templates). The coding efficiency is improved by triggering the snippets with a specified sequence of characters and quickly entering a preset code template

Built-in Snippets

VSCode also has a few snippets of its own, typically for in JavaScript

To see what code templates are built in, check the Command Palette:

Click on the gear pattern in the lower left corner, then go to the Command Palette (or use the shortcut Ctrl + Shift + P) and type Insert Snippets in the search box that appears at the top of the VSCode window

To view the Snippets of a language using the Insert Snippets command, you must meet the condition that the language currently edited is the language of the snippet in order to find the corresponding language. For example, if you want to find the JavaScript snippets and the file that is currently open is of type.html, then if you edit it inside

These configuration files are in the following directory:

resources > app > extensions > corresponding language name > snippets\

Download the Snippets

Download here means download a widget with snippets. You can search for @category:”snippets” in VSCode’s widget market.

Custom Snippets

Here is an example of CSS code: Before a simple front page layout, the inner and outer margins of tag elements are generally cleared, so the following code block is often used

* {
    margin: 0;
    padding: 0;
}
Copy the code

To do this I want to configure a snippet for it by finding the CSS Snippet configuration file: Find the gear icon in the lower left corner of VSCode, look for the “User Snippets” option in the menu, and select CSS (or the top menu File > Prenferences > User Snippets)

When you open a CSS. Json file, you can see a large comment. Read the comment carefully and enter it as required to configure your code template

Add and save the following as prompted by the comments

"Clear all elements' margin and padding": {
    "prefix": "cmp"."body": [
        "* {"."\tmargin: 0;"."\tpadding: 0; $0"."}"]."description": "Clear all HTML elements' default margin and padding"
}
Copy the code

Prefix indicates the text that triggers the code snippet, so you need to type CMP to trigger it. The effect is as follows

Snippets configuration rules

When you open the user’s snippets configuration file, you will always see a comment from which you can usually write your own snippet. The following shows how to write a snippet based on this comment (see here for more configuration).

// 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}, \${2:another} for placeholders. Placeholders with the 
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('\$1');" .
//   "\$2"
/ /,
// "description": "Log output to console"
// }
Copy the code

Configuration file Type

The configuration files for the snippets are JSON files that allow C-style comments, allowing an unlimited number of snippets to be defined

The basic structure

The basic configuration structure of the individual snippets is as follows:

// Angle brackets contain content to indicate custom content
"<snippet name>": {
    "prefix": "<triggerText>".// If the template has multiple lines, it should be assigned with an array of strings, one element representing one line of content
    "body": "<template>"."description": "<description of this snippet>"
}
Copy the code

Separate multiple configurations with commas (no additional commas)

First a Snippet configuration specifies the name, and then it assigns an object containing three sections: prefix, body, and Description

Prefix is the text that is specified to trigger the snippet, such as the configured snippet that clears the inner and outer margins of the element, using CMP (Clear Margin and padding) prefix. This can be configured to your liking, mainly to remember, since snippets are configured for coding efficiency
Body specifies the code template content, which can be assigned to a single string or an array of strings. When a template has only one line of content or only one line of code, you can assign that line of code directly to the body as a string. For example, if you want to print console.log(“hello”) quickly, you can configure:
```
"Print Hello to console": {
    "prefix": "hello"."body": "console.log('Hello');".// Direct assignment statement string
    "description": "Print Hello to console"
}
Copy the code
```
If the template is multi-line, then you need to assign with an array of strings (as in the CSS example above), where one element represents one line of content. Whitespace characters can be escaped characters (as in the CSS example above), and if whitespace characters are applied directly, only Spaces can be applied (not tabs directly).
Description is the field that specifies what the snippet does or what the template content is, and its content appears in the relevant reminder

Use of special structures

The content of the body section can use special constructs to control cursor position and insert text. So, how about tabstops and placeholder, which are mentioned in the default comments of a configuration file

tabstops

When exporting a snippet, if the body of the snippet defines tabstops, you can use the Tab key to make the cursor position jump to a specific location, making it easier to modify the generated template

Tabstops with $0, $1, $2,…… $0 indicates the last cursor position reached, and tabstops of the same number are associated (i.e., multiple cursors in multiple associated locations at the same time).

Look at the following example:

// Add to the JavaScript snippets configuration file
"Test tabstops": {
    "prefix": "tts"."body": "$0two($2); one($1); three($3); one($1)"."description": "a test for tabstops"
}
Copy the code

The example above starts with two cursors inside two brackets of one(); Then after pressing Tab, a cursor will be placed inside two() parentheses; After pressing Tab a second time, the cursor will be inside the three() parentheses; Pressing Tab again will bring the cursor to the beginning of the line, because $0 indicates where the cursor ended up last.

You can also move back to the previous tabstops by pressing Shift+ TAB, but note that if you reach $0, This is the last position of the cursor in the snippet and after doing something else (including pressing Tab), you cannot go back to the previous tabstop

placeholders

Placeholder is a tabstop with a value, the value of which will be inserted into the code as default text and selected so that it is easy to change the default content of the code template if needed

The most typical example is the built-in JS snippet for loop at the beginning of this article, which I’ll reproduce a little bit

"Test placeholders": {
    "prefix": "flt"."body": [
        "for(let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index} ++) {"."\t${4:const} ${3:element} = ${2:array}[${1:index}];"."\t$0"."}"]."description": "a test for placeholders using for loop"
}
Copy the code

When you start with multiple selected indexes, you can change all of them to the desired contents at the same time. Then press TAB to select all of the arrays at the same time, and you can modify all of the selected items at the same time. Pressing TAB a second time selects Element; Press the third time to get to const; Press $0 again to get to the last position ($0 will default to the last position of the body content, in this case after the close curly brace)

The snippet syntax allows you to use more special constructs than the tabstops and palceholders configuration above, but there are others. See here for details

Article source: gitee.com/thisismyadd…

Reference:

Code.visualstudio.com/docs/editor…