VSCode 教程

工欲善其事,必先利其器。简要记录 Windows 下 VS Code 的使用。

VS Code 是什么

VS Code 全称是 Visual Studio Code,是微软开源的一款多功能文本编辑器,支持丰富的扩展,功能强大,界面美观,适合作为各种编程 IDE。

  • VS Code 命令面板

它是 VS Code 快捷键的主要交互界面,可能通过快捷键 Ctrl + Shift + P 打开。然后输入常用指令对 VS Code 进行操作。

VS Code 键盘操作

  • 光标移动

    • 单词的光标移动。Ctrl + 左右方向键
    • 光标移动到行首或行末。Home/End
    • 代码块花括号移动。光标在代码块花括号上时,按下 Ctrl + Shift + \,就可以在这对花括号之间跳转。
    • 移动到文档首行或最后一行。Ctrl + Home/End
  • 文本选择

    在光标移动的基础上,多按一个 Shift 键。

  • 删除操作

    • 可以先选中文本,再按删除。
    • Ctrl + backspace/Del 删除左/右方向上的单词。

VS Code 代码行编辑

  • 删除行。Ctrl + Shift + K
  • 剪切行。Ctrl + X
  • 重开一行,向下/向上。Ctrl + Enter/Ctrl + Shift + Enter
  • 移动代码行。Alt + 上下方向键
  • 复制代码行。Alt + Shift + 上下方向键

VS Code 撤销光标移动

有时候你移动完光标之后,又希望把光标回退到上一个位置,这时你只需按下 Ctrl + U,就可以撤销这一次光标的移动。

VS Code 行排序

无论是你在写代码,还是写 Markdown,你都可以把代码行按照字母序进行重新排序。不过这个命令比较小众,VS Code 并没有给这个命令指定快捷键,你可以调出命令面板,然后搜索 “按升序排列行” 或者 “按降序排列行” 命令执行。

VS Code 合并代码行

有的时候你可能会为了避免代码看起来过于冗余,就会把比较短小的几行代码合并到一行里面去。这时,你可以打开命令面板,搜索“合并行”就可以了,而不需要不断地调整光标、删除换行符。

VS Code 调整字符大小写

我估计这个你会经常用到。你可以选中一串字符,然后在命令面板里运行“转换为大写”或 “转换为小写”, 来变换字符的大小写。

VS Code 调换字符位置

Windows 上未绑定快捷键,可以打开命令面板,搜索 “转置游标处的字符” 来把当前光标前后的字符调换位置。

VS Code 代码缩进

有的时候,你会觉得代码格式化太重了,需要的可能只是把代码里的缩进调整一下。这时你可以打开命令面板,搜索 “缩进”,然后使用 “重新缩进行” 将整个文档的缩进进行调整,但更多时候,你只需要运行 “重新缩进选中行” 来调整部分选中代码行的缩进。

VS Code 代码格式化

你可以按下 Alt + Shift + F 来对整个文档进行格式化,VS Code 也会根据你当前的语言,选择相关的插件。当然,前提条件是你已经安装了相关插件。

你也可以选中一段代码,然后按下 Ctrl + KCtrl + F,这样只有这段被选中的代码才会被格式化。

VS Code 添加代码注释

你在调试代码时,肯定经常需要临时地把一些代码注释掉。如果你要将一行代码注释掉,你只需按下 Ctrl + /

VS Code 自动补全

VS Code 当中的自动补全内容,其实是由语言服务来提供的。

VS Code 编程语言工作者提供了纹饰一的 API,即 Language Server Protocol,每种语言都能够通过实现这个 API 在 VS Code 上得到类似 IDE 的开发体验,而各个语言根据这个 API 实现的服务,就被称为语言服务

VS Code 文本选择

在 VS Code 中,你单击鼠标左键就可以把光标移动到相应的位置。而双击鼠标左键,则会将当前光标下的单词选中。连续三次按下鼠标左键,则会选中当前这一行代码。最后是连续四次按下鼠标左键,则会选中整个文档。

到这里你可能会问,如果我想要使用鼠标,选中其中的多行代码该怎么办?VS Code也考虑到了这个情况,在编辑器的最左边,显示的是每一行的行号。如果你单击行号,就能够直接选中这一行。如果你在某个行号上按下鼠标,然后上下移动,则能够选中多行代码。

VS Code 快速预览

VS Code 快速预览是指,有的时候,当我们看到一个建议列表里的某个函数名,我们可能并不能够立刻想起它的作用是什么,它的参数定义是什么样的。这时候我们可以单击当前这一项建议的最右侧的蓝色图标。除了使用鼠标键外,我们还可以使用 “Ctrl+空格键”组合键来快速调出这个快速预览窗口。

VS Code 参数预览

当我们从建议列表选择了一个函数,然后输入括号,准备开始输入参数时,我们会看到一个参数预览的悬浮框。通过这个参数预览的窗口,我们可以知道这个函数可以传入哪些参数,它们的参数类型又是什么样的。

同样的,隐藏这个窗口的快捷键也是 Escape。如果你想再次将其调出的话,需要按下 Ctrl + Shift + Space

VS Code 快速修复

语言服务除了在书写代码的时候提供提示以外,还能够帮我们分析当前的代码,检测出他们潜在的问题,然后提供快速修复的方案。在需要修复的行首,看到灯泡图标,点击该图标选择修复内容进行操作,也可以按快捷键 Ctrl + . 来调出这个快速悠的建议列表。

VS Code 重构

当我们想修改一个函数或者变量的名字时候,我们只需把光标放到函数或者变量名上,然后按下 F2,这样这个函数或者变量出现的地方就都会被修改。这个操作并不是一个粗暴的搜索关键词并替换。另一个常用的重构的操作就是把一段长代码抽取出来转成一个单独的函数。在VS Code中,我们只需选中那段代码,点击黄色的灯泡图标,然后选择对应的重构操作即可。

要注意的是,并不是每个语言服务都支持重构的操作。如果你选中一段代码后,但没有看到那个黄色的灯泡图标,那么也就是说你使用的这门语言可能还没有支持快速重构。

VS Code 文本编辑

VS Code 文本编辑,在 VS Code中,我们除了能够使用鼠标来选择文本以外,还能够使用鼠标对文本进行一定程度的修改,我们把它称为拖放功能(drag and drop)。

比如在今天的示例代码中,我们选中一段函数,然后将鼠标移到这段选中的代码之上,按下鼠标左键不松开。这时你可以看到,鼠标指针已经从一条竖线,变成了一个箭头。这时候我们移动鼠标的话,就可以把这段文本拖拽到我们想要的位置。

在移动的过程当中,我们能够在编辑器中看到一个由虚线构成的光标,当我们松开鼠标左键的时候,这段文本就会被移动到这个虚拟的光标所在的位置。

如果我们在拖拽这段文本的同时,按下 Ctrl 键,鼠标指针上会多一个加号,这时候我们再移动鼠标或虚拟光标至我们想要的位置,然后当我们松开鼠标左键的时候,这段文本将会被复制粘贴到虚拟光标所在的位置,也就是我们既定的目标位置。

VS Code 多光标

在我们的日常编码过程中,有很多工作,它本身就是具有“重复”属性的。比如你需要把多个单词的第一个字母从小写变成大写,这种跟业务逻辑相关的重复性操作,编辑器很难为它们一个个单独做优化。

而 VS Code 的多光标特性其实就是用来解决这类问题的。当你在一个文本框或者某个输入框里打入字符时,会有一个竖线来显示你将要输入文字的位置,这就是“光标”。顾名思义,多光标其实就是多个输入位置,这里你可以脑补下多个竖线的场景。

多光标特性允许你在输入框的多个位置创建光标,这样你就可以在多个不同的位置同时输入文字或者执行其他操作。

使用鼠标

第一种添加多光标的方式,就是使用鼠标。在键盘上按住 Alt,然后鼠标点第二个想要创建光标的位置,那么第二个光标就创建好了。现在你可以看到两个光标,第二个光标比第一个要细一点。之后想添加其它光标按上面的操作即可。

使用键盘

首先把光标移动到一个合适位置,按下 Ctrl + Alt + 上/下方向键,就可以在当前光标的上/下位置创建一个光标。

使用命令

Ctrl + D,第一次按下时,它会选中光标附近的单词;第二次按下时,它会找到这个单词第二次出现的位置,创建一个新的光标,并且选中它。

Alt + Shift + i,选择多行代码后按下该命令,第一行的最后都会创建一个新的光标。

鼠标中键

你只需按下鼠标中键,然后对着一段文档拖出一个框,在这个框中的代码就都被选中了,而且每一行被选中的代码,都拥有一个独立的光标。

VS Code 代码跳转和链接

我们把鼠标放到要跳转的代码上,按住 Ctrl 键,这时代码下面出现一个下划线。然后当我们按下鼠标左键,就跳转到函数定义处。

当我们在编写 Markdown 这样的非编程语言的文档时,也可以通过这种方法打开超级链接。

VS Code 悬停提示窗口

当我们的鼠标移动到某些文本上之后,稍等片刻就能看到一个悬停提示窗口。这个窗口里会显示跟鼠标下文本相关的信息。譬如鼠标停留在一个函数上时,它告诉我们这是一个函数,函数的返回值和类型。

当我们按住 Ctrl 然后悬停时,提示窗口会显示该函数的实现。

VS Code 文件跳转

当你在开发一个新功能或者修复一个 Bug 的时候,你同时在阅读和修改的文件可能就有几个或者十几个。从资源管理器里打开文件固然方便,但是如果这个项目里的文件非常多,并且经常需要在资源管理器里寻找文件,那“眼花缭乱”的,肯定要浪费你不少宝贵的时间。

在VS Code中,解决这个问题的第一个方法,就是按下 Ctrl + Tab,然后继续按着 Ctrl 键但是松开 Tab 键,这样你就可以打开一个文件列表,这个列表罗列了当前打开的所有文件。接下来,你可以通过按下 Tab 键在这个列表里跳转,选择你想要打开的文件。最后选到你想打开的文件后,松开 Ctrl 键,这个文件就被打开了。

不过,使用这个方式切换文件,最大的问题在于,文件一旦多了,你就得不停地按 Tab 键,没完没了地上下跳转和挑选,这会是一个恼人的耗费时间和眼力的操作。

还好,VS Code 在命令面板里提供了一种支持搜索的文件跳转方式。当你按下 Ctrl + P 时,就会跳出一个最近打开文件的列表,同时在列表的顶部还有一个搜索框。

看到这里想必你应该明白了,你可以使用这个搜索框来快速地找到你想要的文件,然后按下 Enter 键直接打开,这整个过程简单而且顺畅。

VS Code 行跳转

打开某一个文件之后,你的另外一个需求可能就是要快速跳转到这个文件的某一行。你可能会想,VS Code是不是可以像Vim那样,输入“:13”就能跳转到第13行。是的,VS Code 也提供了一种极为简单的方式来支持行跳转,你只需要按下 Ctrl + g,紧接着编辑器就会出现一个输入框。按下 Ctrl + g,调出行输入框,你会惊喜地发现,这个输入框的第一个字符就是 “ : ”,在这之后输入数字,你就能够将光标快速地移动到那一行。输入行数3,跳转到第3行。

接下来我再给你介绍一个高阶组合技巧。如果你想跳转到某个文件的某一行,你只需要先按下 Cmd + P,输入文件名,然后在这之后加上 “:”和指定行号即可。

VS Code 符号跳转

文件跳转和行跳转,是代码跳转的基本操作,也是日常编码中的高频操作。不过有的时候,你可能会希望能够立刻跳转到文件里的类定义,或者函数定义的位置。为了支持这种跳转,VS Code 提供了一套 API 给语言服务插件,它们可以分析代码,告诉 VS Code 项目或者文件里有哪些类、哪些函数或者标识符(我们把这些统称为符号)。

如果要在一个文件里的符号之间跳转,你只需按下 Ctrl + Shift + O,就能够看到当前文件里的所有符号。

通过 Ctrl + T,可以搜索多个文件中的符号。

VS Code 定义和实现间跳转

符号跳转依托于语言插件对代码的分析,已经算得上具备一定的智能特性,但是它还是不够精确。比如说我们看到某个函数的调用,想要知道这个函数的接口定义是什么样的,它的实现细节是什么样的,光靠符号跳转,还是会不方便。我们需要的是直接跳转到定义和实现的位置,Java程序员看到这里一定会深有感触。

按下 F12,就可以跳转到函数定义处,按下 Ctrl + F12 跳转到函数实现的位置。

VS Code 跳转到引用的地方

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

Shift+ F12 打开函数引用预览。

参考链接