【第 7 期】如何编写自己的代码模板片段code snipped？

阅读本文大概需要 7 分钟。

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

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

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

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

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

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

 1{
 2    "Print to console": {
 3        "prefix": "log",
 4        "body": [
 5            "console.log('$1');",
 6            "$2"
 7        ],
 8        "description": "Log output to console"
 9    }
10}

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

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

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

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

1{
2    "my console": {
3        "prefix": "log",
4        "body": [
5            "console.log('$1');",
6            "$2"
7        ]
8    }
9}

可以看到，我们在打印出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就会同时被选中，可以看到光标在同时闪烁，就可以一次修改多处内容了。

为了演示，将代码片段修改如下：

 1{
 2    "my console": {
 3        "prefix": "log",
 4        "body": [
 5            "console.log('$1');",
 6            "console.log('$1');",
 7            "alert('$2');",
 8            "alert('$2');",
 9        ]
10    }
11}

Tab Stop还可以有默认值。

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

代码片段如下：

 1{
 2    "my console": {
 3        "prefix": "log",
 4        "body": [
 5            "console.log('${1:daotin}');",
 6            "console.log('${1:lvonve}');",
 7            "alert('${2:123}');",
 8            "alert('${2:456}');",
 9        ]
10    }
11}

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

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

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

1{
2    "my console": {
3        "prefix": "log",
4        "body": [
5            "console.log('${1:$CLIPBOARD}');",
6            "alert('${2:$CLIPBOARD}');"
7        ]
8    }
9}

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

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

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

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