LinuxC++开发面试系列：玩转 VS Code

Posted 2022-06-04 我是管小亮

文章目录

• • 同步GitHub在此 👉 [https://github.com/TeFuirnever/GXL-Skill-Tree](https://github.com/TeFuirnever/GXL-Skill-Tree)
  • 玩转 VS Code
  • • • 1、编辑器（IDE）的下限和上限
      • 2、VS Code 学习指南
      • 3、黄金圆环（Why->How->What）
      • 4、多光标特性
      • 5、快速在文件、符号、代码之间跳转
      • 6、玩转鼠标操作
      • 7、代码自动补全、修复和重构
      • 8、书写代码片段（code snippet）
      • 9、代码折叠、小地图和面包屑特性
      • 10、极速搜索
      • 11、工作台和命令面板
      • 12、文件管理
      • 13、配置终端模拟器
      • 14、debugger
      • 14、基础语言支持：Markdown

同步GitHub在此 👉 https://github.com/TeFuirnever/GXL-Skill-Tree

玩转 VS Code

笔记承自课程《玩转 VS Code》

1、编辑器（IDE）的下限和上限

编辑器或者 IDE 的下限，往往是直接由它默认自带的功能决定的，如：

• 开发快捷键的选用
• 编程语言与框架的支持
• 对工作流的选择和支持

而编辑器或者 IDE 的上限，则可能根据编辑器支持用户写插件的程度来决定，但扩展功能这个事情，最终还是要落实到社区和个人。

学习新的编辑器，除了优先了解它的下限和上限，还可以分三步走，也就是学习路径：

• 最初，更关心开发快捷键和编程语言的支持，这个过程就像是新手村磨练，打怪升级，然后不停地捡下所有的掉落物品，直到装满整个装备库；
• 之后，开始挑剔编辑器的其他组件，寻求适合自己工作习惯或者工作流，做减法，这个过程就像是出新手村，放弃掉不是自己职业或者自己需要的装备，直到匹配一个套装；
• 最后，就是自己学习写插件或者适配插件，如果编辑器本身的功能和社区不能够完全满足需求，就可以自行定制，这个过程就像是成为了高手或者自成一派后，定制装备和功法，直到达到极限。

2、VS Code 学习指南

按照第一节中提到的学习路径，通过三个步骤来逐步掌握 VS Code：

• 核心编辑器的使用。通过学习开发快捷键来快速了解核心编辑器所支持的功能。除此之外，对鼠标操作、多光标、搜索等相应了解；在编程语言的支持上，如自动补全代码片段等，学会设置和使用。
• 工作台、工作区的使用。通过学习资源管理器、跨文件搜索、插件管理等工作台内容，掌握工作流的选择；还有内置的软件版本管理，终端模拟器，调试器等，可以进一步提升工作效率。
• VS Code 定制和插件开发。若有余力，可以学习如何定制 VS Code 的各个部件；对于 VS Code 没有实现的功能，还可以学习如何使用 javascript 书写插件。

3、黄金圆环（Why->How->What）

一个经典的问题思考模型，黄金圆环法则。

这个神奇的黄金圆环，充分地解释了为什么成功的个人或组织能够在别人做不到的地方激发灵感和潜力。

• What：指的是【做什么】，作者说100%的人，都知道自己在做什么；
• How：指的是【怎么做】，作者说这是区分“差异价值”的关键，只有小部分人知道怎么做；
• Why：指的是【为什么做】，作者说这就是成功的个人或组织与众不同的根本所在；

套用到 VS Code 上，Why->How->What，

• 为什么学 VS Code，因为这是程序员的内功，即内在影响因素，可能是面试甚至是短期工作无法看出的区别；
• 怎么学 VS Code，一方面是通过官方文档或者英文咨询进行低效学习，另一方面是通过课程或者是博客（比如我的这篇）进行高效学习；
• 学 VS Code 是在做什么，言行合一，即边看理论学习，边自行实践操作一下；

4、多光标特性

第一种多光标的方式是鼠标，在键盘上按住 Alt，然后在不同的位置点击，即可在每行的点击位置出现光标。

第二种多光标的方式是键盘，在键盘上按住 Ctrl + Alt + 下方向键，即可在每行的相同位置出现光标。

除了这两种，还有一些特殊的多光标特性。

比如 Ctrl + D，这个命令的作用是，第一次按下时会选中光标附近的单词；第二次按下时会找到这个单词第二次出现的位置，创建一个新的光标并选中它；第 N 次按下时就能选中了所有的单词了。

比如 Alt + Shift + i，这个命令的作用是，对于选中的行或段落，每一行的最后都会创建一个新的光标。

这里发现快捷键确实很多，感觉很好用，但是又担心记不住，会不会白白增加学习成本，老师引用了《鞋狗》这本书的一段相当精彩的论述：

在剑道中，只有在心中不再被我和你，不再被对手和他的剑，不再被自己的剑和使剑的方法所困扰时，才能达到最完美的状态……一切都是虚空：你自己、挥舞的剑和舞剑的胳膊，即便是空虚的想法都不再存在。

翻译一下，就是要把这些功夫变成你的本能，这样就不会拘泥于形式，毕竟习惯和心意才是最快的。

5、快速在文件、符号、代码之间跳转

在 VS Code 中，按下 Ctrl+Tab 可以打开一个当前打开所有文件的列表，然后通过按下 Tab 键在这个列表里选择想要打开的文件，当选到想打开的文件后，松开 Ctrl 键，即可。

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

当选到想打开的文件后按下 Ctrl+Enter 就可以在一个新的编辑器窗口中打开该文件了。

打开某文件后，可能就要快速跳转到某行，只需按下 Ctrl+g 就会出现一个输入框，这个输入框的第一个字符就是 “:”，像Vim那样，在字符后输入数字就能将光标快速地移动到那一行。

因此我们可以使用两个快捷命令进行组合，如果想跳转到某文件的某行，先按下 Ctrl+P，输入文件名，然后在这之后加上 “:” 和指定行号即可。

如果要在一个文件里的类、函数或者标识符间跳转，只需按下 Ctrl + Shift + O即可。

如果打开了多个文件，按下 Ctrl + T 即可搜索这些文件里的类、函数或者标识符。

按下 F12 就可以跳转到函数的定义处。

按下 Shift + F12 就会打开一个引用列表和一个内嵌的编辑器。

6、玩转鼠标操作

在 VS Code 中：

• 单击鼠标左键就可以把光标移动到相应的位置；而双击鼠标左键就可以把当前光标下的单词选中；而连续三次按下鼠标左键就可以选中当前这一行代码；最后是连续四次按下鼠标左键就可以选中整个文档。
• 在编辑器的最左边显示的是每一行的行号。如果单击行号就能够直接选中这一行。如果在某个行号上按下鼠标，然后上下移动则能够选中多行代码。
• 选中若干行代码后，按下鼠标左键不松开，这时如果移动鼠标，就可以把这段文本拖拽到想要的位置。如果在拖拽这段代码的同时，按下 Ctrl 键，这段代码将会被复制粘贴到既定的目标位置。
• 如果鼠标拥有中键，并按下鼠标中键选中一段代码，那么每一行被选中的代码都拥有一个独立的光标。
• 当鼠标移动到某些代码上，稍待片刻就能看到一个悬停提示窗口。
• 如果把鼠标移动到函数上面，并按下 Ctrl，则能够在悬停提示窗口里直接看到实现。当出现下划线后，再按下鼠标左键就跳转到了定义处。

7、代码自动补全、修复和重构

VS Code 会建议一些相关的 API，当找到合适的函数后，按下 Tab 键或者回车键即可。

如果偶尔觉得这个自动补全窗口是多余的，可以按下 Esc 键将其隐藏。后续如果希望再次看到，可以按下 Ctrl + 空格键 来手动地调出。

修复

这个自动补全是允许犯一点小错误的，比如打字特别快的时候少打一个字母也能处理。比如 vector 的 size 功能，我只打出 sz 也能提示出整个 size。

有时看到一个建议列表里的某个函数名，可以单击这一项建议的右侧箭头来查看相关信息。

语言服务除了在书写代码的时候提供提示以外，还能够分析当前代码的潜在问题，然后提供快速修复的方案。

重构

当修改一个函数或者变量的名字时候，只需把光标放到函数或者变量名上，然后按下 F2 即可修改所有出现的地方。

8、书写代码片段（code snippet）

代码片段（code snippet）是对常用代码的一个抽象，即保留大部分不变代码，修改需要经常变动的变量。

首先打开命令面板；

然后搜索“配置用户代码片段”（Configure User Snippets）并且执行，会出现一个让你选择语言的列表；

"Print to console": 
    "prefix": "log",
    "body": [
        "console.log($1);",
        "$2"
    ],
    "description": "Log output to console"

在上面的代码里，

• 代码片段的名字叫做 “Print to console”。
• 代码片段的索引叫做 “prefix”。
• 代码片段的主体叫做 “body”。
• 代码片段的描述叫做 “description”。

所以，现在可以打开一个文件输入 log，就能够在建议列表里看到 “Print to console” 这个建议。

再按下回车或者 Tab 键，就能够将这个代码片段插入编辑器了。

Tab Stop 即在代码片段中模板的插入位置，比如这 $1和 $2就是 Tab Stop。

• 当按下 Tab 键，光标移动到的位置 $1，然后如果再按一次 Tab 键，光标则会立刻移动到位置 $2。
• 当按下 Shift + Tab 键，光标移动到上一个 Tab Stop 的位置。
• 对于 $1、 $2 这个值称之为占位符，顾名思义，预先设置好的，如果想设置默认值，就修改语法为 $1:label，$2:label

"Print to console": 
    "prefix": "log",
    "body": [
        "console.log($1:i);",
        "$2"
    ],
    "description": "Log output to console"

多光标只需要使用多个 Tab Stop 即可。

"Print to console": 
    "prefix": "log",
    "body": [
        "console.log($1:i);",
        "console.log($1:i + 1); // $1:i + 1",
        "$2"
    ],
    "description": "Log output to console"

9、代码折叠、小地图和面包屑特性

当鼠标移动到行号附近时，就能够看到一个类似于箭头的标记，同时鼠标指针变成了手的形状。

此时若单击这个图标，就能看到这行代码消失了，取而代之的则是三个点的缩略图。

首先是折叠和展开代码的两个快捷键。

当按下 Ctrl + Shift + 左方括号，当前光标所处的最内层的、可以被折叠的代码就会被折叠起来，而右侧的代码不会被折叠起来。

相对应的，Ctrl + Shift + 右方括号会展开最内层的、可以被展开的代码块。

如果想把从当前光标位置开始，一直到最外层的，所有可以被折叠的部分递归地折叠起来，需要依次按下 Ctrl + K、Ctrl + 左方括号。而至递归地展开，依次按下 Ctrl + K、Ctrl + 右方括号。

如果想把当前编辑器里的所有可以被折叠的代码一次性全部折叠起来，需要依次按下 Ctrl + K，Ctrl + 0。而全部展开，依次按下 Ctrl + K，Ctrl + J。


代码折叠的内部可能还有代码折叠。

小地图使用起来比较简单。

面包屑叫做 Breadcrumb，翻译过来就是面包屑导航，主要是展示目前的代码在整个工程里的路径，同时还能够看出这个代码所在位置的结构层级并且可以快速跳转。

通过点击这个工具栏上的文字，然后进行文件夹、文件或者是函数的跳转。

10、极速搜索

把光标放在编辑器当中，然后按下 Ctrl + F，就能够快速地调出搜索窗口。

如果找到搜索结果后，接下来就直接修改编辑器中的内容，但是 Ctrl + F 挺不方便的，而 F3 的光标依然是在编辑器当中，而不是在搜索框中。通过不断按下 F3 就能够在搜索结果之间自上而下地循环跳转，然后直接打字修改。

当想要在搜索结果里自下而上地跳转，只需多增加一个 shift 键即可，也就是按下 Shift + F3来实现自下而上的跳转。


除了搜索纯文本以外，搜索框还支持多种不同的搜索方式。比如，在搜索框的最右侧，就有三个配置按钮。

• 第一个是大小写敏感
• 第二个是全单词匹配
• 第三个是正则表达式匹配

大小写敏感很好理解，就是搜索的结果要跟关键词大小写完全一致。

全单词匹配稍难理解，就是搜索的结果恰好是别的某个单词中间的一部分是不会出现在搜索结果中。

正则表达式匹配不同，在搜索框中输入正则表达式来搜索。

可以通过快捷键 Ctrl + H 直接调出替换窗口。

多文件搜索和替换跟单文件搜索非常类似，通过按下 Ctrl + Shift + F 来调出多文件搜索的视图。

11、工作台和命令面板

打开欢迎界面，并且点击界面右侧的“界面概览”。

默认设置下 VS Code 的左侧侧边栏有五个组件，分别是：

• 文件资源管理器，主要用于浏览和管理文件和文件夹。
• 跨文件搜索，用于在当前文件夹内进行跨文件的搜索。
• 源代码管理，用于对当前文件夹下的代码进行版本管理。
• 启动和调试，用于对当前文件夹下的项目进行运行和调试。
• 扩展管理，用于下载和管理 VS Code 里的插件。

在侧边栏的左下角还有一个齿轮形状的按钮。

面板的四个组件：问题、输出、终端和调试控制台。

• 问题面板（Problems Panel）的作用是展示当前文件夹下代码里的所有问题和警告。
• 输出面板（Output Panel）的作用是展示命令行工具给用户。
• 终端的作用是集成终端，保持轻量级。
• 调试控制台的作用是调试代码。

菜单栏，即 VS Code 常用的命令，

命令面板，是一个基于文本的交互界面。先通过快捷键 F1 或者 Ctrl + Shift + P 打开命令面板，然后输入框里就有一个字符：>（大于号） ，这代表着一般命令。

键入 “？” 可以获取有关可进行的操作的帮助。

首先是几个符号：

1. >号（大于号） ，用于显示所有的命令。
2. @号，用于显示和跳转文件中的 “符号”（Symbols）。
3. #号，用于显示和跳转工作区中的 “符号”（Symbols）。
4. ：号（冒号）， 用于跳转到当前文件中的某一行。

然后是英文单词或者缩写：

1. edt 是 edit（编辑）的缩写，输入 edt 和一个空格，命令面板就会显示所有已经打开的文件；而edt active则只会显示当前活动组中的文件。
2. ext 是 extension（插件）的缩写，输入 ext 和一个空格，可以进行插件的管理；ext install 则可以在命令面板中搜索和安装插件。
3. task 和 debug 分别对应于任务和调试功能。
4. term 是 terminal（终端）的缩写，可以用来创建和管理终端实例。
5. view 则是用于打开 VS Code 的各个 UI 组件。

跟前面符号不同的是，在输入某个英文缩写的前缀后，还需要输入一个空格键，然后这个功能就被自动执行了。

12、文件管理

VS Code 是基于文件夹来进行管理的，所以这也就允许了创建几个跟当前文件夹或者跟项目有关的配置。这跟 IDE 的工程文件的思路是一致的，把设置放在这个文件夹中，便于团队内部进行共享。即子文件夹 .vscode 。

这个文件夹中可以包含以下几种文件。

第一个是配置文件（settings.json），另外常用的两个文件：一个是调试设置（launch.json）；一个则是任务设置（tasks.json）；关于如何在 C、C++ 程序中配置，上一个博客（LinuxC++开发面试系列（四）：VS Code 编写运行 C、C++ 程序配置和插件推荐）已经讲过了！

多文件夹工作区（multi-root workspace）的管理，主要是先在 VS Code 中打开一个文件夹，然后调出命令面板，搜索 “将文件夹添加到工作区” （add folder to workspace）并执行，或者使用菜单，“文件 —> 将文件夹添加到工作区”，选择想要在当前窗口打开的文件夹。

此时资源管理器里的标题栏里，能看到“无标题 （工作区）”这样的文字，这说明当前的工作区已经有多个文件夹了，但是没有保存这个多文件工作区，也没有指定一个名字。

要保存这个工作区，就在命令面板搜索 “将工作区另存为” （save workspace as），VS Code 就会为这个工作区创建一个文件，这个文件的后缀名是 “workspace”。

这个 JSON 文件，默认有两个键（key）。

• 第一个是 folders 文件夹，罗列的是这个多文件工作区里有哪些文件夹。
• 第二个是 settings 设置，可以添加专属于这个多文件夹工作区的设置。

Ctrl + R（或者使用命令面板，搜索 “打开最近的文件”），就能够看到最近操作过的文件夹并按下回车键进行切换了

13、配置终端模拟器

在这个终端被创建出来后，可以通过再次按下 Ctrl + ` 键将其隐藏。

若希望创建出一个新的终端，就需要按下 Ctrl + Shift + `，或者在命令面板里搜索 “新建集成终端”（Create New Intergrated Terminal）并运行。

在终端里使用 Shell 自身支持的那些快捷键操作

14、debugger

通过调试插件，把命令行的调试器通过 DAP 连接到 VS Code 中，然后就能够借助 VS Code 这套 UI 来进行图形化的调试了。

VS Code 中有一个专门的用于管理调试功能的视图。点击界面左侧 “昆虫”（也就是 bug 啦）形状的按钮，或者按下 Ctrl + Shift + D来唤出调试视图。

编译器可以通过下拉列表进行选择。

通过设置断点，进行调试，就能看到变量的变化了。

14、基础语言支持：Markdown

Markdown 在近些年已经成为了主流的文档书写语言，比如GitHub 上的项目 readme 默认就是 Markdown，微软在13年也把 MSDN 的文档从 XML 逐步地转为 Markdown 了。

通过点击右上方的侧边预览，或者 Ctrl + k v，就能看到渲染后的 md 文件。

如果只想显示最终的 渲染效果，使用快捷键 Ctrl+Shift+v 即可。