如何编写自己的代码模板片段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很好的方法鸭。