VSCode代码片段预设变量，上面我们提到了，在每个 Tab Stop 的位置，我们可以提供占位符，也就是提前预设好一些值。但这些占位符是我们提前写在代码片段里的，跟当前代码的上下文往往没什么关系。不过，VS Code 的代码片段支持里，还提供了一种模板，叫做预设变量。比如说，我们想在代码片段里的某个位置使用剪切板的内容，那么我们在那个位置写上 $CLIPBOARD 就好了，如果我们希望插入代码片段后自己可以修改这个值，也可以将它放在一个 Tab Stop 里面，语法则是 ${1:$CLIPBOARD} 。

- 阅读剩余部分 -

VSCode代码片段多光标，在前面的文章中，我们已经知道多光标能够大幅度减少重复劳动，而在代码片段里，我们也可以使用多光标的特性。上面提到我们可以用 ${1:label} 来指定 Tab Stop 和占位符，但其实我们也可以在代码片段的多个位置使用同样的 Tab Stop 。举个例子，我们可以在代码片段中三个不同的位置插入 $1，这样编辑器就会为这三个不同的位置，分别创建一个光标，然后当我们打字的时候，他们就会被一起修改。下面，我们就一起来给上面的代码片段加上多光标的特性。

- 阅读剩余部分 -

VSCode代码片段占位符 ， 在我们插入 Tab Stop 的时候，除了 $1 、 $2 这样的语法，我们还可以填入 ${1:label} ，在这个格式下，代码片段被插入编辑器里时，$1 的位置处，会预先填入 label这个值，并且 label 会被选中。对于这个值我们称之为占位符，顾名思义，这个值是我们在代码片段中预先设置好的。如果我们觉得这个值可以用，那就不需要修改了，直接按 Tab 键跳到下一个 Tab Stop 继续编辑。如果觉得要换成一个新的值，那么也只需直接打字就可以将其替换，因为这个占位符已经被光标选中了。

- 阅读剩余部分 -

VSCode代码片段Tab Stop，VSCode代码片段里的“body” 里的内容，并不只是一个纯文本，它其实是一个模板。要让它像模板一样工作，我们就需要先理解一个概念，叫做 Tab Stop 。像我们现在研究的这个代码片段里，当 body 内容被插入到编辑器后，你会发现，内容里 的 $1 和 $2 不见了，取而代之的是两个竖线。这 $1 和 $2 就是 Tab Stop，意思是，当我们按下 Tab 键之后，光标移动到的位置。当这段代码片段被插入到编辑器后，编辑器会把光标移动到 $1 所在的位置，然后如果你再按一次 Tab 键，光标则会立刻移动到 $2 的位置。如果没有这个功能，我们输入 log 后，只能自动地把 console.log() 插入到编辑器里，接下来我们需要手动地把光标移动到括号里面，然后填入我们想要打印的参数。这之后，当我们需要新起一行写代码时，还得按下 Cmd + Enter 创建新的一行并将光标移动到下一行。但有了 Tab Stop后，上面的这些繁琐的操作就可以简化为一次 “Tab” 键了。

- 阅读剩余部分 -

VSCode代码片段，有的时候，我们经常输入的代码是业务强相关的，语言服务没法做出优化；或者是一些我们经常使用的定式，比如循环语句、创建一个新的类或者一个 UI 控件，我们经常写类似的代码，只不过每次都要做细微的修改。对于这些代码，我们可以将它们抽象成模板，保存起来，等下次要使用的时候直接调用即可。这就是我们今天要讲的主题：代码片段（code snippet）。代码片段是对常用代码的一个抽象，它保留了大部分不变的代码，然后把需要经常变动的部分，换成变量，这样等下次调用它的时候，只需要把这些变量换成我们需要的就可以了。

- 阅读剩余部分 -