VS Code's code template creation

1. Create

File -> Preference -> Configure User Snippets

It can be selected according to the language, such as C/C++, CSS, etc. The New Global Snippets file option is applicable to all programming languages.

Code templates (Snippets) are written in JSON syntax, support C-style comments, and do not limit the number of code templates.

Two, examples

// in file 'Code/User/snippets/javascript.json'
{
    
    
  "For Loop": {
    
    
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
    "description": "A for loop."
  }
}

• Code snippet name: For Loop
• prefix: the word used to trigger the code segment (multiple can be defined as in the above example). Due to the function substring matchingof , when the input fccan be matched tofor-const
• body: the main content to insert
• description: The description of the code fragment, which can be displayed through smart prompts.

When entering for or fc:

After inserting for or for-const, you can use the tab key to switch the cursor to the predefined order of the placeholders in the code snippet. You can see that it is array first, then element, and finally in for, which correspond to the order of 1, 2, and 0 respectively.

code fragment scope

Programming language scope for code snippets

The programming language scope (that is, the programming language targeted) of each fragment can be one, multiple or all languages, according to the type defined by the code fragment:

1. a language snippet file

   A single-language custom code snippet is for a specific programming language. Most user-defined code snippets are for a single programming language, that is, you can insert custom code snippets only after creating a source file corresponding to a programming language (for example, you cannot insert the following about js in a .c file code snippet)

2. a global snippet file

   Such code fragments are defined in global type code fragment files (JSON with the file suffix .code-snippets, I still don't understand the meaning of this suffix???)

   In such code snippet files, you need to add an additional attribute scope , which is the identifier of the programming language that the author wants the code snippet to be associated with

   If no scope attribute is given, the snippet is associated with all programming languages.

Project scope for snippets

You can also create a global code snippet file (JSON with file suffix .code-snippets), the scope of which is the entire project :

The broken code segment file at this time is in the .vscode folder in the project root directory .

The purpose of a project-wide snippet file is to share that snippet with all users working on the project .

Similarly, it is also possible to make the global code segment act on a specific programming language by adding a scope attribute.

---

Snippet Syntax

Tabstops

As mentioned in the example, the position of the cursor can be determined by $1, etc. The number indicates the order of access through tab and the final order of the cursor.$2$0

（？？？Multiple occurrences of the same tabstop are linked and updated in sync.）

Placeholders

Placeholders are tabs with values ​​like: $1:foo\ast \ast .Placeholders\; can\; be\; nested,\; such\; as:\ast \ast${1:another ${2:placeholder}}。

Placeholder text is inserted and selected so that it can be modified.

Choice

Placeholders can be selected according to the provided values. The syntax is: separate the listed values ​​​​with commas and include them with pipe characters, such as ${1|one,two,three|}

When the snippet is inserted and the placeholder is selected, the user needs to select one of the values.

Variables

The format for inserting the value of a variable is: $name\ast \ast or\ast \ast${name:default}

When the variable is not a set (set refers to?), the default value of the variable or an empty string will be inserted;

When the variable is unknown (that is, the variable is not defined), the name is inserted and converted to a placeholder.

Specific variable content

Variables transforms

This will allow modifying the value of the variable before inserting it. The definition of the conversion is divided into three parts:

1. A regular expression to match the value of the variable ; the empty string when the variable cannot be parsed;
2. A format string that allows quoting of match groups from regular expressions. This format string allows conditional insertion and simple modification.
3. Options to pass to the regular expression .

Placeholder-Transform

The effect of placeholder conversion is to be able to change the inserted text of the placeholder when moving to the next tab.

Inserted text is matched against regular expressions, and matches (depending on options) are replaced by specific replacement format text. Each occurrence of a placeholder can independently define its own replacement (using the value of the first placeholder)

The placeholder conversion format is the same as the variable conversion format.

Grammer