# 如何编写自己的代码模板片段code snipped



# title:  "如何编写自己的代码模板片段code snipped"

date:   2019-11-6 18:22:54 tags: VSCode


代码片段在平时的工作中发挥着巨大的作用,极大的节省了我们的工作量。而由于VS Code的代码补全功能是建立在编程语言的智能提示下的,它只会根据语言的上下文给出应该可能的建议。而对于不同的项目,不同的功能,我们通常希望有一个可复用的代码模板片段,像自动补全一样,只需要我们编写出模板的前几个单词按下tab键就可以自动补全一段代码,这样想想就觉得很舒心。

这样的刚需,基本上主流的代码编辑器都是具有的,那么vscode的代码片段code snippet是怎么设置的呢?


首先我们打开vscode左下角的设置,然后选择用户代码片段,然后就会看到如下的一个列表:



从这个列表可以看到有很多语言的选项,表示要创建什么语言类型的code snippet。我们选择创建javascript语言类型的代码片段。


从下拉列表中选中javascript,之后进入到编写具体代码片段的界面。



我们可以看出,这是一个JSON文件,将Example后面,也就是7-14行的注释去掉,可以看到有一个JSON的属性key叫Print to console,它的值value是一个对象。我们把不必要的注释都拿掉可以看得更清晰一些:


{
   "Print to console": {
       "prefix": "log",
       "body": [
           "console.log('$1');",
           "$2"
       ],
       "description": "Log output to console"
   }
} 


我们在编写代码片段的的时候,一定要注意key不能相同,这个也符合JSON的语法。


在value对象中,prefix表示的是当我们在编辑器里打出跟 prefix 一样的字符时,我们就可以在代码智能补全列表中看到我们自己的代码片段,选中我们的的代码片段后按下tab键就可以把后面body中的内容插入到当前光标的位置。


description则是对我们这个代码片段的描述,不是必须的。


好,我们写一个自己的console.log代码片段,当我们打出log后按tab键自动补全。


{
   "my console": {
       "prefix": "log",
       "body": [
           "console.log('$1');",
           "$2"
       ]
   }
} 


可以看到,我们在打印出log之后,我们刚写的代码片段出现了,在第二个位置,然后我们只需要按向下方向键选中这个后按tab键就可以插入到编辑器中。但是有没有感觉多了有个步骤就是选中它的操作,可不可以让它处在第一个位置呢?



我们只需要在设置中搜索snippet Suggestions,然后选择top就OK了,这样自己的代码片段总是会出现在代码提示列表的第一位置。


有人可能会问了,上面body中的$1 $2是什么鬼东西?


这个东西叫Tab Stop,我们发现,当body内容插入到编辑器的时候,里面的$1 $2都不见了,取而代之的是两个竖线,这里的$1 $2就是 Tab Stop。表示当我们按下tab键的时候,光标移动的位置。$1就是body插入的时候光标出现的位置,此时按下tab键,光标会移动到$2的位置,如果还有$3 $4是以此类推的。



这个Tab Stop就特别好使了,是因为我们之所以称为代码模板就是大部分的内容都是相同的,只有少部分需要修改的,那么我们就可以把Tab Stop放到那些需要修改的地方,第一个地方修改完后就可以直接tab到下一个修改的地方,这也是和我上一篇文章你可以双手不离键盘吗?相呼应的。


Tab Stop可以形成多光标。


如果你的代码片段中有两个或多个$1或者是$2等等,那么在tab跳转的时候,相同的$1或者$2就会同时被选中,可以看到光标在同时闪烁,就可以一次修改多处内容了。


为了演示,将代码片段修改如下:


{
   "my console": {
       "prefix": "log",
       "body": [
           "console.log('$1');",
           "console.log('$1');",
           "alert('$2');",
           "alert('$2');",
       ]
   }
} 



Tab Stop还可以有默认值。


在我们插入类似$1 $2等的时候,是可以给他们默认值的,例如这种写法:${1:default},也可以把这种写法称为占位符。这这种写法下,当代码片段被插入到编辑器的时候,$1处的位置会默认填上default 这个值,并且是已经被选中的,如果不是自己需要的值,可以直接修改,而不需要再次选中默认值,这就相当于又帮我们减少一次修改代码的次数,使得代码模板简洁的同时更加灵活多变。


代码片段如下:


{
   "my console": {
       "prefix": "log",
       "body": [
           "console.log('${1:daotin}');",
           "console.log('${1:lvonve}');",
           "alert('${2:123}');",
           "alert('${2:456}');",
       ]
   }
} 



可以看出,如果多光标存在的时候,如果默认值不相同的情况下,会默认选第一个默认值作为占位符。


Tab Stop还有一个不常用的功能就是将默认值替换为剪贴板的内容。


这时候我们的代码片段就要写出下面的形式:


{
   "my console": {
       "prefix": "log",
       "body": [
           "console.log('${1:$CLIPBOARD}');",
           "alert('${2:$CLIPBOARD}');"
       ]
   }
} 


然后在演示的时候,我们先复制函数的第一行,之后再输入log:



可以看到,默认值被成功替换成了我满剪贴板中复制的函数第一行的内容。


需要注意的是:${1:$CLIPBOARD} 中的CLIPBOARD 是一定要大写的,否则就是“clipboard”字符串本身了。


综上,可以看出代码片段code snippet是个特别好用的工具,用好了可以帮我们节省下大量代码复制粘贴的重复劳作,而且非常简单。最后,VS Code 的代码片段语法是基于TextMate的,很多主流的编辑器比如 Atom,Sublime等也都支持此语法片段,因此如果你之前是用过这些编辑器的代码片段,相信你对VS Code的代码片段语法也不陌生,并且网上有很多基于此语法的代码片段可以参考,看看别人都用这些代码片段语法写过哪些提升工作效率的代码片段,这也是我们学习 code snippet很好的方法鸭。