标签 vscode教程 下的文章

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

- 阅读剩余部分 -

VS Code引用跳转,很多时候,除了要知道一个函数或者类的定义和实现以外,你可能还希望知道它们被谁引用了,以及在哪里被引用了。这时你只需要将光标移动到函数或者类上面,然后按下 “Shift + F12”,VS Code 就会打开一个引用列表和一个内嵌的编辑器。在这个引用列表里,你选中某个引用,VS Code 就会把这个引用附近的代码展示在这个内嵌的编辑器里。

- 阅读剩余部分 -

VS Code定义和实现跳转,符号跳转依托于语言插件对代码的分析,已经算得上具备一定的智能特性,但是它还是不够精确。比如说我们看到某个函数的调用,想要知道这个函数的接口定义是什么样的,它的实现细节是什么样的,光靠符号跳转,还是会不方便。我们需要的是直接跳转到定义和实现的位置,Java程序员看到这里一定会深有感触。当然,这个功能也需要语言本身的支持。比如说当你在使用 TypeScript 时,按下 F12,就可以跳转到函数的定义处。

- 阅读剩余部分 -