# 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、$1、 $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、$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 .

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 $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

${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}
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": [
"${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}"
],
"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 .

## summary

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.