VSCode 编辑器拖拽 Drag & Drop，随着布局的逐渐灵活，可以使用的命令也越来越多了，从最基础的聚焦下一个编辑器组和移动编辑器，到更灵活地在网格布局里聚焦编辑器，要想都记住它们并且绑定合适的快捷键，真的是太难了。对此我有两个建议。第一，虽然网格系统很强大，但是不意味着它一定就是高效的或者说适合自己的。就我自己而言，我通常只会使用左、右两个编辑器组，并且只需要熟悉几个快捷键就行了。第二，就是使用鼠标。VS Code 有很不错的拖拽功能。比如你可以在编辑器组中对 Tab 进行拖拽，把它放到你想要的位置。

- 阅读剩余部分 -

VSCode 编辑器 – Tab，呼声非常高的编辑器相关的需求就是 Tab 的支持了。VS Code 虽然一直以来技术上是支持 Tab 的，但是并不会显示出来，而是要求你按下Cmd + P（Windows 上是 Ctrl + P）打开命令面板来进行文件的切换。但是 Tab 的呼声真的非常高，于是很快 VS Code 就把这个功能加上了。所以，我想对于 Tab ，就并不需要过多的介绍了。不过，还是不得不提以下几个跟 Tab 相关的快捷键。比如，在 Tab 之间进行跳转。你可以使用命令 “打开上/下一个编辑器”（Open Previous/Next Editor）或者按下 Cmd + Option + 左/右方向键（Windows 上是 Ctrl + Pagedown/Pageup）在编辑器 Tab 之间进行跳转。

- 阅读剩余部分 -

VSCode 版本管理，会介绍如何在VSCode中进行查看代码变化、改变文件状态和代码提交。首先，在工作台的左侧活动栏上，我们能看到一个版本管理的图标，位于下图的第三个。查看未提交的改动如果在当前的文件夹下有尚未被提交的改动，我们能够在这个图标上面看到一个数字。数字代表了有多少个文件被修改了，只是虽改动但还未被提交。

- 阅读剩余部分 -

VSCode折叠代码快捷键，我们再来一起看一下有哪些折叠和展开代码的快捷键。首先是折叠和展开代码的两个快捷键。VSCode折叠代码的基本使用，请参考VSCode折叠代码。当我们按下 “Cmd + Option + 左方括号”（Windows 上是 Ctrl + Shift + 左方括号），当前光标所处的最内层的、可以被折叠的代码就会被折叠起来。请注意，我们在这里加了两个限制条件，“最内层”和“可以被折叠”。我们可以先用下面一个小例子来理解这两个条件。

- 阅读剩余部分 -

VSCode折叠代码，很多编程语言都使用花括号来包裹代码块。比如说类的定义、函数的定义、条件判断语句或者循环语句，它们都是用花括号作为一个代码块的开始和结尾。而VS Code 就是通过对花括号的匹配来决定哪些代码块是能够被折叠的。首先，我们一起来看一下编辑器中最基础的代码折叠方式。比如在下面的这段 JavaScript 代码中：

- 阅读剩余部分 -

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

- 阅读剩余部分 -