10 书写codesnippet，拒绝重复

代码片段（code snippet）

代码片段是对常用代码的一个抽象，它保留了大部分不变的代码，然后把需要经常变动的部分，换成变量，这样等下次调用它的时候，只需要把这些变量换成我们需要的就可以了。

打开命令面板搜索“Configure User Snippets” 选择语言进行编辑。默认会有被注释的例子，如下

"Print to console": {

        "prefix": "log",

        "body": [

            "console.log('$1');",

            "$2"

        ],

        "description": "Log output to console"

    }

 

Tab Stop

 Tab Stop，意思是，当我们按下 Tab 键之后，光标移动到的位置。

当这段代码片段被插入到编辑器后，编辑器会把光标移动到$1所在的位置，然后如果你再按一次 Tab 键，光标则会立刻移动到 $2的位置。

将光标移动到上一个 Tab Stop 的位置的快捷键 Shift + Tab”

占位符

占位符，顾名思义，这个值是我们在代码片段中预先设置好的。

在我们插入 Tab Stop 的时候，除了 $1、 $2 这样的语法，我们还可以填入 ${1:defaultwords}

多光标

我们可以在代码片段中三个不同的位置插入 $1，这样编辑器就会为这三个不同的位置，分别创建一个光标，然后当我们打字的时候，他们就会被一起修改。

预设变量

上面提到了，在每个 Tab Stop 的位置，可以提供占位符，也就是提前预设好一些值。但这些占位符是提前写在代码片段里的，跟当前代码的上下文往往没什么关系。VS Code 的代码片段支持里，还提供了一种模板，叫做预设变量。

比如说，想在代码片段里的某个位置使用剪切板的内容，那么我们在那个位置写上 $CLIPBOARD 就好了，如果希望插入代码片段后自己可以修改这个值，也可以将它放在一个 Tab Stop 里面，语法则是 ${1:$CLIPBOARD}。

VS Code 支持数十个预设值

小结

VS Code 的代码片段语法是基于 TextMate 的

不仅 VS Code，Atom 和 Sublime 也都支持这个语法，可以在网上找些其他人分享的代码片段，通过阅读这些他人书写的代码片段来学习和精进。