vs code 自定义snippet代码片段

2019/04/22 18:34
阅读数 428

vs code 自定义snippet代码片段


代码片简介

        snippet能够帮助输入重复代码模式,比如循环或条件语句,的模板。通过 snippet ,我们仅仅输入一小段字符串,就可以在代码片引擎的帮助下,生成预定义的模板代码,接着我们还可以通过在预定义的光标位置之间跳转,来快速补全模板

代码片配置流程

  • 通过快捷键「Ctrl + Shift + P」打开命令窗口(Mac为 shift + command+p ),输入snippet,点选「首选项:配置用户代码片片段」(Preferences:Configure User sinppet);

  • 选择新增 new global snippets file

  • 会创建一个fileName.code-snippets的文件,这里的filename指自己定义snippets的文件名称

  • 接着,在该配置文件里面设置补全代码片

  • 一开始新建的设置文件,内容如下

      {
      	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
      	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
      	// is left empty or omitted, the snippet gets applied to all languages. 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": {
      	// 	"scope": "javascript,typescript",
      	// 	"prefix": "log",
      	// 	"body": [
      	// 		"console.log('$1');",
      	// 		"$2"
      	// 	],
      	// 	"description": "Log output to console"
      	// }
      }
    
  • 放开example的示例代码

      {
      	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
      	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
      	// is left empty or omitted, the snippet gets applied to all languages. 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": {
      		"scope": "javascript,typescript",
      		"prefix": "log",
      		"body": [
      			"console.log('$1');",
      			"$2"
      		],
      		"description": "Log output to console"
      	}
      }
    
  • 这个示例中定义了一个描述为「Print to console」的代码片,其功能为:在 IntelliSense 中输入 log 并选中对应代码片后,可将原文本替换为 console.log('');

代码片详细介绍

  • prefix:前缀。代码片从 IntelliSense 中呼出的「关键字」
    • 输入prefix呼出对应的代码片段
  • scope: 域。代码片适用的「语言模式」
    • 比如这里只会在javascript,typescript文件类型中生效
  • body:主体。代码片的「布局与控制」
    • 注:每个字符串表示一行
    • 这个地方是设置代码段的地方,重点地方,下面会着重介绍
  • description:描述。代码片在 IntelliSense 中的「介绍」。
    • 注:可选。未定义的情况下直接显示对象名,上例中将显示 Print to console。

body部分

        Body 部分可以使用特殊语法结构,来控制光标和要插入的文本,其支持的基本结构如下

  1. Tabstops 制表符

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

"body": ["#ifndef $2", "#define $1", "#end // $0"],
  1. Placeholders:占位符

        「Placeholder」是带有默认值的「Tabstops」,如${1:foo}。「placeholder」文本将被插入「Tabstops」位置,并在跳转时被全选,以方便修改。占位符还可以嵌套,例如${1:another ${2:placeholder}}。比如,结构体的代码片主体可以这样写:

struct ${1:name_t} {\n\t$2\n};
  1. Choice:可选项

        「Choice」是提供可选值的「Placeholder」。其语法为一系列用逗号隔开,并最终被两个竖线圈起来的枚举值,比如 ${1|one,two,three|}。当光标跳转到该位置的时候,用户将会被提供多个值(one 或 two 或 three)以供选择。

  1. Variables:变量
  2. Variables:变量转换

更多请点击查阅

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部