Code snippets are code snippets, which is a feature that vscode provides to quickly complete a piece of code based on a string to improve the efficiency of writing code.

Vscode snippets can be shared with a project. When multiple people develop a project, the snippets can be maintained at the project level and shared with Git to improve project development efficiency.

Let’s look at Snippets in more detail.

The function of the snippets

The format of the Snippets configuration is as follows:

{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
    "description": "A for loop."
  }
}
Copy the code
  • Prefix is the prefix that triggers snippets, and you can specify more than one through an array
  • The body is the content that is filled in to the editor
  • Description is the description of the snippets

${} specifies the cursor position, order, placeholder string, available value, etc.

Cursor jump:
1   1  2

You can specify the cursor position with 1, 1, 1, 2, and when you fill in the snippets, the cursor is set to 1 to edit, and when you’re done, you can TAB to 1 to edit, and when you’re done, You can TAB to jump to 2.

Take this configuration for example:

{" test ": {" scope" : "javascript, typescript", "the prefix" : "test", "body" : [XXXX "$1", "$2" yyyy,], "description" : "Cursor jump"}Copy the code

Results as follows:

In addition, when there are multiple 1’s, 1’s, 1’s, 2’s, etc., editing the other content will also be synchronized, i.e. multi-cursor editing in vscode.

Such as:

{" test ": {" scope" : "javascript, typescript", "the prefix" : "test", "body" : [" $1 $1 "XXXX,]," description ":" how the cursor "}}Copy the code

Results as follows:

This allows you to quickly edit the editable content in snippets.

${1: placeholder}

The cursor jump allows you to edit content quickly, but you don’t know what part you’re editing, so Snippets support placeholder values, which are selected by default and overwritten by input.

Such as:

{" test ": {" scope" : "javascript, typescript", "the prefix" : "test", "body" : [" ${1: aaa} XXXX ", "yyyy ${2: BBB},"], "description" : "the cursor jumps"}}Copy the code

Results as follows:

Optional value: ${1 | text1, text2, text3 |}

Placeholder way as input tag to add a placeholder attribute, or to manually input, when editable area were several optional value, will be replaced with the drop-down choice, in the snippets is through the ${1 | text1, text2, text3 |} the way support, Fill in the pass, between | and | integral multiple options.

Such as:

{" test ": {" scope" : "javascript, typescript", "the prefix" : "test", "body" : [" ${1 | god said, let there be light, ode to card |} "], "description" : "optional values"}}Copy the code

Results as follows:

Variable: $Variable name

When filling in the template’s editable location, you sometimes need the selected value, clipboard value, file name, date, etc. This information is retrieved through snippets’ supported variables.

Such as:

  • TM_FILENAME: name of the file
  • TM_CURRENT_LINE: the content of the current line
  • CLIPBOARD: CLIPBOARD content
  • WORKSPACE_NAME: specifies the name of the workspace
  • WORKSPACE_PATH: indicates the path of the workspace
  • CURRENT_YEAR: specifies the current year
  • CURRENT_MONTH: specifies the current month
  • CURRENT_DATE: indicates the current day
  • The RANDOM: RANDOM number
  • RANDOM_HEX: six random hexadecimal numbers
  • UUID: the unique id

You can take the values of these variables and fill them in to the cursor position using TM_FILENAME, TM\_FILENAME, TM_FILENAME, CURRENT_YEAR.

Such as:

{" test ": {" scope" : "javascript, typescript", "the prefix" : "test", "body" : $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE"], "description": "variable"}}Copy the code

Results as follows:

Variable conversion: ${variable name/matched re/replaced to string/matched pattern}

Variable filling wasn’t enough, because some of the variables didn’t fit and needed to do some string substitution, so Snippets supported transform.

Like the abC-123.js file,

We get the file name through $TM_FILENAME, then remove the suffix and put it in uppercase

${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}
Copy the code

(.*).[a-z]+. (ignore).

{"scope": "javascript,typescript", "prefix": "filename", "body": [" ${TM_FILENAME/(. *) \ \ [a-z] + / ${1: / upcase} / I} "], "description" : "file name"}}Copy the code

Let’s test the results:

As you can see, the file name is correct, and the suffix is removed and replaced with uppercase.

Now that you know what snippets do, how do you set up snippets? To what extent does Snippets work?

The scope of the snippets

Command + Shift + p open the command palette, type snippet, select Configure User Snippets:

You can choose to create global, project-wide, language-wide snippets:

Each opens a file in a different location to add snippets.

Language-level snippets are language-specific and can be packaged as plug-ins. This is done in package.json:

{
  "contributes": {
    "snippets": [
      {
        "language": "javascript",
        "path": "./snippets.json"
      }
    ]
  }
}
Copy the code

Project-wide snippets are added under.vscode/xxx.code-snippets in the project root directory, and vscode starts reading these files and makes them work in project-wide.

When there are some project-level snippets that can be shared, commit the file entirely to a remote Git repository, and project members can share the snippets Settings. For some projects with more template code, it is more meaningful.

conclusion

Snippets is a quick input code snippets feature provided by vscode to improve development efficiency. It supports cursor position jump, multi-cursor editing, placeholders, optional values, variables, variable conversion, etc. Using these features flexibly, you can make easy-to-use and efficient snippets.

Snippets have global, Language, and Project scopes: global is a global setting; Language is a language-level setting that can be further encapsulated as plug-in sharing; A project is project-scoped, in xx.code-snippets under.vscode, and can be submitted to a Git repository and shared with other members.

Flexible use of snippets makes development more efficient, and it can be shared at the project level. Hopefully this article will help you get to know Snippets.