Visual Studio Code 自定义Snippet配置

爱被打了一巴掌 2022-06-14 11:24 598阅读 0赞

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

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

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

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

![修改设置][SouthEast]

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

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('');`，效果预览如下：   
> ![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]

[VS Code智能提示功能之Typings][VS Code_Typings]

[VS Code插件安装位置][VS Code 1]

[SouthEast]: /images/20220614/b843550fd9554011ac945cd1eca62c4c.png
[1]: http://blog.csdn.net/maokelong95/article/details/54379046#fn:vscode
[log]: /images/20220614/3954f66d83b24196844395d42cecb2e2.png
[VS Code]: http://blog.csdn.net/u011127019/article/details/58586129
[VS Code_Typings]: http://blog.csdn.net/u011127019/article/details/56671511
[VS Code 1]: http://blog.csdn.net/u011127019/article/details/55277166