VS code自定义用户代码片段snippet

参考资料: https://code.visualstudio.com/docs/editor/userdefinedsnippets

prefix和body是必不可少的两个字段(The prefix is what is used to trigger the snippet and the body will be expanded and inserted.)

html template，代码如下：

"html template": {     "prefix": "html template",     "body": [         "<!DOCTYPE html>",         "<html lang=\"en\">",         "<head>",         "\t<meta charset=\"UTF-8\">",         "\t<title>${1:Title}</title>${2}",         "</head>",         "<body>",         "\t${3}",     "</body>",     "</html>",     "${0}"     ],     "description": "create a html frame" }

html template，按下Tab键，就可以自动补齐整个框架。

在body中，使用转义字符\来书写制表符Tab、双引号"等内容；
使用${num: default name}来定义输入位置，按下Tab键来递进光标到下一个；
num的值为0,1,2,3...。0为光标的最终位置，1,2,3...决定了光标的顺序位置；
default name是默认值，可按下Tab不编辑直接跳过。

2.3 Global or Specific Snippets

.code-snippets，在用户代码片段下拉列表中，最上方有一个“新建全局代码片段文件”。

scope，用于指定该规则适用于何种语言：（例）

{     "For_Loop": {         "prefix": "for",         "scope": "javascript,typescript",         "body": [           "for (const ${2:element} of ${1:array}) {",           "\t$0",           "}"         ],         "description": "For Loop"     }, }

"link template": {     "prefix": "<link rel...",     "body": [         "<link rel=\"stylesheet\" type=\"${1:text/css}\" href=\"${2}\">${0}"     ],     "description": "complete css link" }, "script template": {     "prefix": "<script type...",     "body": [         "<script type=\"${1:text/javascript}\" src=\"${2}\"></script>${0}"     ],     "description": "complete script quote" }

文章来源: VS code自定义用户代码片段snippet

标签

prefix