Use vscode snippets to work with project members to improve development efficiency

zxg_ God said to have light 2021-09-15 09:04:19

code snippets Code snippet means , yes vscode It provides the function of quickly completing a piece of code according to a string , Can improve the efficiency of writing code .

vscode Of snippets Can be shared with the project , When multiple people develop a project , You can maintain project level snippets And through git share , To improve project development efficiency .

Let's take a closer look at snippets.

snippets The function of

snippets The configuration of is in the following format :

"For Loop": {
"prefix": ["for", "for-const"],
"body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
"description": "A for loop."
 Copy code 
  • prefix Is triggered snippets The prefix of , Multiple... Can be specified through an array

  • body Is the content filled into the editor

  • description yes snippets Description of

among body Some can be passed through ${} To specify the cursor position 、 The order 、 Placeholder string 、 Available values, etc , Yes 5 Grammar , Let's take a look at :

The cursor jumps : $0 $1 $2

Can pass 0 0、 1、 2 Specify cursor position , When filled s n i p p e t s After the content of , The cursor will be set to 2 Specify cursor position , When filled snippets After the content of , The cursor will be set to 0 To edit , After editing , Can pass tab Come and jump to $1.

And when there are multiple 0 0、 1 etc. , Editing one place and other contents will also be modified synchronously , That is to say vscode Multi cursor editing .

With this function, you can quickly edit snippets Editable content in .

Place holder :${1: placeholder}

Just the cursor jump, although you can quickly edit the content , But I don't know what the editing part is , therefore snippets Support for setting placeholder Value , The text will be selected by default , Input content can overwrite .

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

Placeholders are like input The label added placeholder attribute , Or do you want to enter it manually , When the editable area has several optional values , You have to change to the drop-down selection , stay snippets Inside is through ${1:|text1,text2,text3|} The way to support , stay | and | Fill in between , Multiple options for segmentation .

Variable :$ Variable name

When filling in the editable position of the template , Sometimes you need to use the selected value 、 Clipboard value 、 file name 、 Date, etc. , This information passes through snippets Supported variables in .

such as :

  • TM_FILENAME: file name
  • TM_CURRENT_LINE: Contents of current line
  • CLIPBOARD: The contents of the clipboard
  • WORKSPACE_NAME: workspace Name
  • WORKSPACE_PATH: workspace The path of
  • CURRENT_YEAR: The current year
  • CURRENT_MONTH: The current month
  • CURRENT_DATE: Current day
  • RANDOM: random number
  • RANDOM_HEX: 6 Bit random 16 Hexadecimal number
  • UUID:  only id

You can take the values of these variables to fill in the cursor position , The way is to use T M F I L E N A M E TM_FILENAME、 CURRENT_YEAR The way .

Variable conversion : ${ Variable name / Matching regularities / Replace with a new string / Matching mode }

It supports variable filling, but not yet , Because the contents of some variables are inappropriate , You need to do some string replacement , therefore snippets Just eat transform The function of .

such as abc-123.js The file of ,

We go through $TM_FILENAME Get the file name , Then remove the suffix and put it in uppercase

 Copy code 

For file names TM_FILENAME Do regular matching (.*).[a-z]+, Turn group one into uppercase and return , The matching pattern is ignore case (ignore).

" Fill in the file name ": {
"scope": "javascript,typescript",
"prefix": "filename",
"body": [
"description": " file name "
 Copy code 

Let's experiment with the effect :

You can see , Get the file name correctly , And remove the suffix and put it in uppercase .

got it snippets The function of , So how to set up snippets Well ?snippets To what extent does it take effect ?

snippets The scope of the

command + shift + p Open the command panel , Input snippet, choice configure user snippets:

You can choose to create a global 、 Project wide 、 Language range snippets:

Files in different locations will be opened to add snippets.

At the language level snippets It only works for a specific language , This can also be encapsulated as a plug-in . In plugins package.json It can be configured in :

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

Project wide snippets It is in the root directory of the project .vscode/xxx.code-snippets Added below ,vscode These files will be read at startup , Then make it effective within the scope of the project .

When there are some project level pieces of code that can be shared , Submit this file completely to the remote git Warehouse , Then project members can share these snippets Set up . For some projects with more template code , Still more meaningful .


snippets yes vscode Provides some quick input code snippets for improving development efficiency , Support the jump of cursor position 、 Multi cursor simultaneous editing 、 Place holder 、 Optional value 、 Variable 、 Variable conversion and other functions , Use these functions flexibly , Can make easy-to-use to improve development efficiency snippets.

snippets Yes global、language、project 3 Scope of effectiveness :global Is the global setting ;language Is the language level setting , It can be further encapsulated into plug-in sharing ;project Is within the scope of the project , stay .vscode Under the xx.code-snippets in , It can be submitted to git Warehouse , Share with other members .

Flexible use of snippets function , It can improve development efficiency , And this can also be shared at the project level . I hope this article can help you understand snippets.

Please bring the original link to reprint ,thank
Similar articles