VSCode Snippet 小试牛刀

这几天因为一个需求，要不断重复一个用特定代码段去包围不同代码的需求。

这个要不断移动鼠标以及重复敲打相同代码的体力活，实在让我老眼昏花，体内的懒人之力迫使我想一个快捷的方法来代替之。

之前就知道Snippet能够自定义代码段，借此机会正好研究了下，接下来我会简单介绍一个自定义Snippet的例子。

1. 打开VSCode, 按ctrl+shift+p 打开command palette, 输入Snippet，如下

2.选择Configure User Snippets,接着会让你选择创建的Snippet应用于哪种语言，在这里我选择的是JavaScript

3. 选择完语言类型之后，就会生出一个相对应的Json文件

字段名以及含义：

1. ‘Print to console': 是这个Snippet的名字，随便你取张三李四

2. ’prefix': 是呼出这个Snippet的简称

3. ‘body': 是自定义的代码段主体

4. ’description': 顾名思义，在选择Snippet的时候，对Snippet的解释也会浮现于下方

这里重点要看body,body部分便是你所定义的代码段的输出，下图是自己写的一个例子

可以看到body部分定义了两行内容，这里的一行内容就是定义了实际的一行代码。

body部分可以定义光标位置，可以添加占位符，以及加入变量，上图中的TM_SELECTED_TEXT的意思就是选中的内容，当我们选中一段文字后，在添加这个定义好的代码段，

选中的内容就会替代这个变量从而达到我一开始的目的，相同的代码去包含不同的内容。（这里不再详细解释body相关的语法，有兴趣的可以查阅相关文档）

有一个注意的点就是，如果我们是通过选中文字的方式来添加Snippet，那么常规操作就是通过ctrl+shift+p 选择insert snippet，再接着选择Snippet，发现这样也并不方便。

之后想了下，是否可以通过把Snippet绑定到自定义快捷键上，这样就又能提高效率，查阅相关文档之后发现，确实可行。

 

ctrl+shift+p 呼出command palette，输入preference open keyboard shortcuts file，这样就打开了快捷键定义文件。

 

key 表示自定义的相关快捷键组合，如何定义可以查阅相关文档，还是很简单的

command 表示快捷键按下后的命令语句

when 表示什么时候下快捷键组合会调用该命令语句

args 这边填入的是Snippet参数，langId 代表语言类型，即我在一个html文件中嵌套的js也能出发该快捷键功能，name是你之前自定义的Snippet名称。

好，一切就绪，我们尝试一下,选中内容，ctrl+2

Yeah, 确实可行

这次就演示了一个简单的demo，有兴趣的可以看一下下方文档，研究一下。

嗯~ 微软大法好

 

相关文档：https://code.visualstudio.com/docs/editor/userdefinedsnippets