Visual Studio Code 自定义Snippet配置

一、Snippet代码段 Tab键的自动完成配置

默认使用回车键，可以自动补全

默认情况下 snippet 在 IntelliSense 中的显示优先级并不高，而且在 IntelliSense 中选择相应 snippet 需要按「enter」键，这对于手指短的人来说并不是什么很好的体验。所幸，VSCode 意识到了这一点，并为我们提供了改进的方式。

在 VSCode 的用户设置（「Ctrl+P」在输入框中写「user settings」后点选）中，检索代码段，然后根据提示修改，设置建议优先显示，并且可以通过「TAB」补全 snippet。

修改后设置文件中会多出这两行：

1.启用Tab自动完成

2.设置其他代码提示在上部‘top’

"editor.snippetSuggestions": "top",
"editor.tabCompletion": true

二、如何配置Snippet

1.操作流程

1. 进入 snippet 设置文件 
   这里提供了两种方法： 
   
   1. 按「Alt」键切换菜单栏，通过文件 > 首选项 > 用户代码片段，选择进入目的语言的代码段设置文件；
   2. 通过快捷键「Ctrl + Shift + P」打开命令窗口（all command window），输入「snippet」，通过候选栏中的选项进入目的语言的代码段设置文件。
2. 填写 snippets ，自己定义的代码段

VSCode 中 snippet 的文法 1

设置文件头部的一个块注释给出了设置 snippet 的格式，了解过「json」就不会对此感到奇怪。

 // Place your snippets for C here. Each snippet is defined under a snippet name and has a prefix, body and 
 // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
 // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
 // same ids are connected.
 // Example:
 "Print to console": {
    "prefix": "log",,
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13

注：上例 snippet 的功能为，在输入 log 并确认后，可将原文本替换为console.log('');，效果预览如下： 

snippet 由三部分组成：

• prefix：前缀，定义了 snippets 从 IntelliSense 中呼出的关键字;
• body： 主体，即模板的主体内容，其中每个字符串表示一行;
• description：说明，会在 IntelliSense 候选栏中出现。未定义的情况下直接显示对象名，上例中将会显示 Print to console。

其中 body 部分可以使用特殊结构来控制光标和要插入的文本。 支持的功能及其文法如下：

• Tabstops：制表符

  用「Tabstops」可以让编辑器的指针在 snippet 内跳转。使用 $1，$2 etc. 指定光标位置。这些数字指定了Tabstops将被访问的顺序，特别地，$0表示最终光标位置。相同序号的「Tabstops」被链接在一起，将会同步更新，比如下列用于生成头文件封装的 snippet 被替换到编辑器上时，光标就将同时出现在所有$1位置。

  "#ifndef $1"
  "#define $1"
  "#end // $1"
      
      
  1
  2
  3
      
      
  1
  2
  3

• Placeholders：占位符

  「placeholder」是带有默认值的「Tabstops」，如${1：foo}。「placeholder」文本将被插入「Tabstops」位置，并在跳转时被全选，以方便修改。占位符还可以嵌套，例如${1:another ${2:placeholder}}。

  比如，结构体的 snippet 主体可以这样写：

  struct ${1:name_t} {\n\t$2\n};
      
      
  1
      
      
  1

  作为「Placeholder」的name_t一方面可以提供默认的结构名称，另一方面可以作为输入的提示。

• Variables：变量

  使用$name或${name:default}可以插入变量的值。 当未设置变量时，将插入其缺省值或空字符串。 当varibale未知（即，其名称未定义）时，将插入变量的名称，并将其转换为「placeholder」。 可以使用以下「Variable」：

  • TM_SELECTED_TEXT：当前选定的文本或空字符串
  • TM_CURRENT_LINE：当前行的内容
  • TM_CURRENT_WORD：光标下的单词的内容或空字符串
  • TM_LINE_INDEX：基于零索引的行号
  • TM_LINE_NUMBER：基于一索引的行号
  • TM_FILENAME：当前文档的文件名
  • TM_DIRECTORY：当前文档的目录
  • TM_FILEPATH：当前文档的完整文件路径

  注意，这些都是变量名，不是宏，在实际使用的时候还是要加上$符的。

拓展阅读：官网也给出了 snippet 的 EBNF 范式的正则文法，注意，使用\（反斜杠）转义\$, ,, }和\。 

any ::= tabstop | placeholder | variable | text 
tabstop ::= '$' int | '${' int '}' 
placeholder ::= '${' int ':' any '}' 
variable ::= '$' var | '${' var }' | '${' var ':' any '}' 
var ::= [_a-zA-Z] [_a-zA-Z0-9]* 
int ::= [0-9]+ 
text ::= .* 

更多：

VS Code使用技巧整理

VS Code智能提示功能之Typings

VS Code插件安装位置