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

 

posted @ 2018-08-11 23:31 狮子还是喵 阅读(...) 评论(...) 编辑 收藏