一、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插件安装位置

Visual Studio Code 自定义Snippet配置相关推荐

  1. Visual Studio Code Go插件配置选项

    Visual Studio Code Go插件配置选项 go get命令和go install命令的区别 go get 命令的作用 从远程下载需要用到的包 下载完之后,执行go install go ...

  2. Visual Studio Code环境变量配置

    根据微软帮助文档所说: Setup will add Visual Studio Code to your %PATH%, so from the console you can type 'code ...

  3. Latex的Visual Studio Code+SumatraPDF环境配置(自用)

    Visual Studio Code 1.71.2版本 SumatraPDF 3.4.8版本 主要参考文章: Visual Studio Code (vscode)配置LaTeX VScode+Lat ...

  4. Visual Studio Code远程开发配置

    目录 配置 切换同一服务器下不同用户失败的解决方法 首先Windows及连接的服务器需支持openssh 配置 打开VS code 在扩展应用中搜索下面并安装下面两个扩展应用. 安装完成后,点击左下角 ...

  5. visual studio code python环境配置_visual-pushing-grasping环境配置及复现

    0. 电脑硬件配置 ThinkpadE580-不带独立显卡,这款电脑比较坑,有些包就是安装不上去,比Thinkpad的T系列差多了(小吐一下),VPG的github地址贴一下 andyzeng/vis ...

  6. Visual Studio Code 支持TensorFlow配置支持

    首先选择解释器 选择TensorFlow版本的conda版本 (当然你如果是通过python单独安装的TensorFlow也可以) 编辑器输入代码,进行测试 import tensorflow as ...

  7. vcode(visual studio code)中文配置

    一.下载路劲:(本链接下载积分较高,建议选择官网下载) https://download.csdn.net/download/yang1076180972/11102603 二.中文配置:安装好vco ...

  8. 在Visual Studio Code中配置GO开发环境

    一.GO语言安装 详情查看:GO语言下载.安装.配置 二.GoLang插件介绍 对于Visual Studio Code开发工具,有一款优秀的GoLang插件,它的主页为:https://github ...

  9. Linux操作系统Ubuntu 22.04配置Visual Studio Code与C++代码开发环境的方法

      本文介绍在Linux Ubuntu操作系统下,配置Visual Studio Code软件与C++ 代码开发环境的方法.   在文章虚拟机VMware Workstation Pro中配置Linu ...

最新文章

  1. MikuMikuDance 6 菜单汉化补丁
  2. mdf与ldf文件如何还原到SQLserver数据库
  3. html怎么引入sass样式,[样式设置] 使用sass格式的方式
  4. Windows安装 ANT
  5. 对flex深入研究一点
  6. 本机速度文件支持的“纯” Java大数据存储
  7. 初中计算机课教什么时候,初中计算机教学课程教学方法探讨
  8. mete30是鸿蒙系统么,华为mete30pro什么时候能用上鸿蒙系统?
  9. Arm发布移动端v9体系新架构,CPU、GPU、IP全囊括了!
  10. 【云服务】云服务案例分析Quiz
  11. docker kibana mysql_docker 安装常用组件:[redis,mysql,mongodb,elasticsearch,kibana,exceptionless]...
  12. 图解HTTP笔记(一)
  13. 田永强:优秀的JavaScript模块是怎样炼成的
  14. 对 BatchNormalization 中 Internal Convariate Shift 的理解
  15. H5 新特性之 fileReader 实现本地图片视频资源的预览
  16. dopod566使用小参考
  17. 垃圾分类催生创业公司
  18. 卖货文案二:建立消费者信任
  19. 饭店点餐系统之系统网络结构
  20. 全连接网络实现Fashion数据集学习/预测

热门文章

  1. 《WCDMA空中接口技术》读书笔记4: R99 待机过程
  2. r -改变ggplot2中轴文本的字体大小和方向
  3. Unity3D——射箭游戏
  4. shell-grep用法
  5. 图像处理基本方法-c语言生成纯色BMP文件
  6. TISS与HashQuark达成战略合作 | TokenInsight
  7. 猫声音嘶哑的常见原因
  8. Mybatis强制查询问题
  9. uniapp语音播放Android端细节进阶实现
  10. 08_心理咨询_微信小程序项目实战_关于我们页面静态效果实现