VSCode 基础

vscode c_cpp_properties.json excludePath参数 详解

在Visual Studio Code中，c_cpp_properties.json文件是用于配置C/C++扩展的解析设置的文件。在该文件中，excludePath参数用于指定应该在解析期间排除的目录。以下是对excludePath参数的详细解释：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{
  "configurations": [
    {
      "name": "My Configuration",
      "includePath": [
        "${workspaceFolder}/**"
      ],
      "defines": [],
      "compilerPath": "/usr/bin/gcc",
      "cStandard": "c11",
      "cppStandard": "c++17",
      "intelliSenseMode": "gcc-x64",
      "excludePath": [
        "${workspaceFolder}/path/to/excluded_directory",
        "${workspaceFolder}/another/excluded_directory/**/*.cpp"
      ]
    }
  ],
  "version": 4
}

  1. ${workspaceFolder}: 这是一个变量，表示当前工作区的根目录。${workspaceFolder}/**表示将包括工作区中的所有文件和子目录。

  2. excludePath数组: 用于指定要在解析期间排除的目录。可以指定一个或多个目录，并使用相对于${workspaceFolder}的路径。在上面的示例中，两个目录都被排除了。

    • ${workspaceFolder}/path/to/excluded_directory: 表示要排除的第一个目录。
    • ${workspaceFolder}/another/excluded_directory/**/*.cpp: 使用通配符**表示所有子目录和其中的所有.cpp文件都应该被排除。

  3. 注意事项:

    • 在配置excludePath时，确保使用正确的相对路径，并确保路径是以${workspaceFolder}为基础的。
    • 你可以使用通配符**来匹配任意目录或文件。在示例中，/**/*.cpp表示匹配任意子目录下的所有.cpp文件。
    • 更改完成后，需要重启Visual Studio Code以使更改生效。

通过使用excludePath参数，你可以控制C/C++扩展在解析代码时忽略特定的目录，这对于排除不需要进行代码分析的目录非常有用。

解决cpptools high cpu问题

  • 在VScode菜单栏文件->首选项->设置 搜索C_Cpp.intelliSenseCacheSize,修改默认的5120为512

调试模式 设置环境变量

在Visual Studio Code (VSCode) 中，launch.json 文件用于配置调试器的启动选项。当您在VSCode中使用C++进行调试时，可以使用 launch.json 文件设置环境变量以定制调试过程。

以下是如何在 launch.json 文件中设置环境变量的步骤：

  1. 打开 VSCode，并在您的 C++ 项目文件夹中找到或创建 launch.json 文件。通常，该文件位于 .vscode 文件夹中。

  2. 在 configurations 字段中添加一个调试配置。如果该字段为空，请复制以下 JSON 代码并粘贴到 launch.json 文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "C++ Launch",
      "type": "cppdbg",
      "request": "launch",
      "program": "${workspaceFolder}/<your_executable>",
      "args": [],
      "stopAtEntry": false,
      "cwd": "${workspaceFolder}",
      "environment": [],
      "externalConsole": true
    }
  ]
}
  1. 在上面的代码中，environment 字段用于设置环境变量。您可以将需要的环境变量添加到该字段中。每个环境变量都以键值对的形式表示，键和值之间使用冒号分隔。例如，如果要设置名为 MY_ENV_VAR 的环境变量，可以添加如下配置：
1
2
3
4
5
6

"environment": [
  {
    "name": "MY_ENV_VAR",
    "value": "your_value"
  }
]

  1. 保存 launch.json 文件。

  2. 在 VSCode 中打开您的 C++ 源代码文件，并在需要调试的行上设置断点。

  3. 单击 VSCode 左侧的调试图标（虫子图标），然后点击绿色的“启动调试”按钮。调试器将启动，并在设置的断点处停止。

  4. 如果有设置环境变量，它们将在调试过程中生效，您可以在调试过程中使用它们。

请注意：

  • 有些调试器可能不支持在 launch.json 文件中设置环境变量。确保您使用的调试器支持此功能。
  • 在 launch.json 文件中设置的环境变量仅对该特定的调试配置生效。如果您有多个调试配置，每个配置可能需要不同的环境变量设置。

以上步骤是为了在 VSCode 中通过 launch.json 文件设置 C++ 调试的环境变量。如果您在调试过程中遇到问题，请确保配置正确，并查看调试器的文档以获取更多帮助。

自动换行

  • word wrap

VScode extensions xhr:failure

  • setting->details->Data&Time->Automatic Time Zone
    • open

下载

  • 首先，在官网找到需要下载的文件，点击下载，并将下载连接复制下来，例如：
    • https://az764295.vo.msecnd.net/stable/97dec172d3256f8ca4bfb2143f3f76b503ca0534/code_1.74.3-1673284829_amd64.deb
  • 然后，将az764295.vo.msecnd.net替换为vscode.cdn.azure.cn，例如：
    • https://vscode.cdn.azure.cn/stable/97dec172d3256f8ca4bfb2143f3f76b503ca0534/code_1.74.3-1673284829_amd64.deb
  • 这就是国内的镜像

使用root用户打开vscode

  • 背景：
    • 在远程调试机械臂的时候，需要使用到root权限来运行程序，所以在调试的时候需要使用到root权限
  • 方法：
    • 示例：code --no-sandbox --disable-gpu-sandbox --user-data-dir=".vscode-root"

VSCode 是什么

  • VSCode 是什么，VS Code的全称是Visual Studio Code，但这全名实在是太长了，很多用户喜欢叫它VS Code。说起VS Code，官方定义它是一个免费的、开源的跨平台编辑器。之所以强调“编辑器”，我想是因为 VS Code 并无意成为一个全尺寸的集成开发环境，也就是IDE
  • 很多人都把编辑器等同于IDE，其实从专业角度来讲并非这样。IDE 更为关注开箱即用的编程体验、对代码往往有很好的智能理解，同时侧重于工程项目，为代码调试、测试、工作流等都有图形化界面的支持，因此相对笨重，Java程序员常用的Eclipse定位就是IDE；而编辑器则相对更轻量，侧重于文件或者文件夹，语言和工作流的支持更丰富和自由，VS Code 把自己定位在编辑器这个方向上，但又不完全局限于此。

  • 要理解VS Code代码编辑器的设计思路，就需要先看看VS Code的发展轨迹。

  • 从我的角度看，不管你是学习编程语言，还是框架、编辑器，都应该先去看看它的来龙去脉，了解它们是怎么发展而来的，曾经遇到了什么问题，又是怎么解决的，这些信息都便于你从大局上提高对事情本质的认识

  • VSCode 发展历史：https://geek-docs.com/vscode/vscode-tutorials/what-is-vscode.html

VSCode的学习路线

  • 简短地了解了 VS Code 的历史后，如果你也认同它的设计哲学和使命，你肯定还想知道该如何把 VS Code 的这一套转化为自己的内力。我在第一讲 “学编辑器，到底应该‘学’什么？” 里讲过编辑器学习的通用办法，在 VS Code 身上也是适用的。你可以按照以下三个步骤来逐步掌握 VS Code。
    • 核心编辑器的使用。VS Code 有一套自己的快捷键，你可以通过快捷键的学习了解核心编辑器所支持的功能。同时， VS Code 允许自定义快捷键的映射，如果你有自己熟悉的一套快捷键操作，也可以无缝地在 VS Code 上使用。除了快捷键，VS Code 对鼠标操作、多光标、搜索都有完备的支持；在编程语言的支持上面，VS Code 也向 IDE 看齐，自动补全、代码片段等一应俱全。掌握了核心编辑器，VS Code 就能够胜任你的日常通用编辑器。
    • 工作台、工作区的使用。VS Code 中除了编辑器区域，还有很多其他的功能，像是资源管理器、跨文件搜索、插件管理等，它们一起组成了统一的界面，我们称之为工作台。这个工作台的设计，代表了 VS Code 对工作流的选择。内置的软件版本管理，终端模拟器，调试器等，掌握这些 VS Code “钦定”的工具，进一步提升工作效率。
    • VS Code 定制和插件开发。作为一个百万级别用户量的工具，很多功能的默认设置不可能满足每个人或者每个工作场景，你可以学习如何定制 VS Code 的各个部件，不能永远按部就班；对于 VS Code 没有实现的功能，还可以学习一下如何使用 JavaScript 书写插件，把自己的想法，变成工具的一部分。
  • 通过这三个步骤，你在使用 VS Code 时就能够“随心所欲”了。除此之外，我也建议你关注 VS Code 每月的发布更新日志，官方团队会详细讲解每个版本新增的功能。VS Code 的官方博客也非常值得订阅，团队成员会经常分享开发过程的心得感悟，算得上是最前沿的技术分享。

VSCode入门

  • 主要讲一下“学习”区域的三个功能：命令面板、界面概览和交互式演习场

命令面板

  • 首先来看命令面板，它是 VS Code 快捷键的主要交互界面，你可以通过 F1 或者“Cmd+Shift+P ”(Windows 上是 “Ctrl+Shift+P”) 打开。这里提醒一下，如无特殊说明，我在这个专栏里默认基于macOS平台进行讲解，但也会本着为你提供方便的原则，同时给出Windows或Linux平台下的操作说明。通过编辑器来实现高效编程的思路是一致的，这和具体的使用平台无关，所以你大可不必为此担心。
  • 你可以在命令面板中快速搜索命令并且执行。如果你的 VS Code 是简体中文版，那么你可以在命令面板里使用中文或者英文来搜索命令。VS Code 的绝大多数命令都可以在命令面板里搜到，所以熟练使用命令面板，你就可以摆脱鼠标，完全通过键盘操作来完成全部编码工作。

界面概览

  • 第二个是界面概览，它展示了 VS Code 默认界面里的不同部件的位置、名称和快捷键。VS Code 强调无鼠标操作，但是对于初学者而言快捷键的记忆是个麻烦，这个界面恰好可以帮助你渡过最初的不适应阶段。

交互式演习场

  • 第三个是交互式演习场，打开这个界面，你会看到一个全英文的初学者教程，其中通过各种交互示例给出了 VS Code 的核心功能，展示了一些高级代码编辑功能的使用，每个功能都会有一个代码片段和编辑器供你实时使用。

命令行的使用

  • 如果你是 Windows用户，安装并重启系统后，你就可以在命令行中使用 code 或者 code-insiders了，如果你希望立刻而不是等待重启后使用，可以将 VS Code 的安装目录添加到系统环境变量 PATH中， Windows 64 位下的 VS Code 安装路径是 C:\Program FIles\Microsoft VS Code下。

  • 如果你希望使用已经打开的窗口来打开文件，可以在 code 命令后添加参数 -r来进行窗口的复用。

  • 你也可以使用参数 -g <file:line[:character]> 打开文件，然后滚动到文件中某个特定的行和列，比如:
    • 输入 code -r -g package.json:128命令，你就可以打开 package.json 这个文件，然后自动跳转到 128 行。
    • 这个命令可以方便你从终端里快速地在 VS Code 里打开一个文件进行预览，一个特别常见的例子就是当我们使用脚本执行某个命令，这个命令告诉我们某个文件的某一行出现了错误，我们就能够快速定位了。
  • VS Code 也可以用来比较两个文件的内容，你只需使用 -d参数，并传入两个文件路径，比如:
    • 输入 code -r -d a.txt b.txt命令，就可以比较a.txt和b.txt两个文件的内容了。
    • 有了这个命令，你就可以既使用命令行运行脚本，也可以借助 VS Code 的图形化界面进行文件内容的对比了。
  • VS Code 命令行除了支持打开磁盘上的文件以外，也接受来自管道中的数据。这样你就可以将原本在命令行中展示的内容，实时地展示在 VS Code 里，然后在编辑器中搜索和修改。比如,你可以把当前目录下所有的文件名都展示在编辑器里，此时只需使用ls | code -命令。

VSCode 键盘操作

  • VSCode 键盘操作，做到双手不离键盘，今天先来谈一谈核心的键盘操作：光标的移动、文本的选择、文本的删除，以及如何为编辑器命令绑定快捷键。

光标移动

  • 移动光标最常用的就是方向键，但是方向键每次只能把光标移动一个位置，可以说是一种相对低效的方式。

  • 首先是针对单词的光标移动。这个你应该比较熟悉，绝大多数原生的编辑应用和文本框都支持。这也是我自己最常用的一组快捷键。
    • 下面这张图显示，第一行代码中的第一个单词是 function，一共8个字符，光标的位置在第五个字符 t 的后面。当你想把光标直接移动到整个单词，也就是 function 的前面，你只需按下 Option（Windows 上是 Ctrl 键）和左方向键。相反，如果要把光标移动到单词的末尾，只需要按下 Option 和右方向键就好了。
    • 我们都知道，一直按着方向键，光标就可以不停地，一个字符一个字符地在文档中移动。但如果你同时按住 Option 和方向键，那么光标移动的颗粒度就变成了单词，你就可以在文档中以单词为单位不停地移动光标了

  • 第二种方式是把光标移动到行首或者行末。比如第一行代码是 function foo() {，你只需按住 Cmd + 左方向键（Windows 上是 Home 键），就可以把光标移动到了这行的第一列；而如果你按住 Cmd 和右方向键（Windows 上是 End 键），光标就会被移动到 { 的后面。

  • 接下来一种是对于代码块的光标移动。很多编程语言都使用花括号将代码块包裹起来，比如 if、for 语句等，你很可能会希望通过一个快捷键，就能实现在代码块的始末快速跳转。比如在这5行代码示例中，第一行到第三行代码是函数 foo 的定义，由一对花括号包裹起来，当你把光标放在花括号上时，只需按下 Cmd + Shift + \（Windows 上是 Ctrl + Shift + \），就可以在这对花括号之间跳转。

  • 最后一种基础的光标操作就是移动到文档的第一行或者最后一行，你只需按下 Cmd 和上下方向键即可（Windows 上是 Ctrl + Home/End 键）。

文本选择

  • 掌握了上面的快捷键之后，你还可以非常轻松地掌握文本选择的操作。因为对于基于单词、行和整个文档的光标操作，你只需要多按一个 Shift 键，就可以在移动光标的同时选中其中的文本

删除操作

  • 比如你想把当前行中光标之前的文本全部删除，就可以先选中这段文本（Windows/Linux: Home + Shift，macOS: Cmd + Left + Shift )，然后再按删除键。不过对于频繁使用的删除操作，你肯定希望单次操作就可以完成任务，而不是重复地选择文本然后删除，那么你需要记住下面几个命令。

  • 假设你把光标放在第二行代码的中间位置，然后按下 Cmd 和 Backspace（MacOS上就是“fn + delete”的组合，Windows 上未绑定快捷键，可以打开命令面板运行“删除右侧所有内容”），就能够把第二行代码光标后（右侧）的字符全部删掉。
  • 按下 Cmd 和 Delete 键则是删除当前行中光标前（左侧）的所有内容（Windows 上未绑定快捷键，可以打开命令面板运行“删除左侧所有内容”）
  • 删除单词内的字符与此类似。假设把光标放在第一行第四个字符 c 的后面。Option 加左方向键把光标移动到 function 这个单词的开头，Option加左方向键再加 Shift 即可选中 func 这四个字符，而Option 加 Delete 则会删除 func 这四个字符。这里你可能看出来了，这些快捷键共同的是 Option 键，然后通过按下 Shift 或者 Delete 键，来达到不同的效果。
  • 相反地，Option 加 Backspace（MacOS上就是“fn + delete”的组合） 则会删除 function 的后四个字符 tion。

自定义快捷键

  • 前面我们提到，VS Code 内置了很多的命令，但是并没有为每个命令都提供一个快捷键，毕竟快捷键的组合总是有限的。不过 VS Code 提供了快捷键的修改和自定义功能，这样你就可以根据自己的使用习惯，给自己常用的命令指定顺手的快捷键。

  • 首先你可以打开命令面板（你还记得它的快捷键不？），搜索“打开键盘快捷方式”然后执行，这时你将看到相对应的界面。
  • 然后通过搜索找到你希望修改快捷键的命令，双击，接下来你只要按下你期望的快捷键，最后按下回车键就可以了。

  • 比如，你可以搜索“选择括号内所有内容”，双击，按下”Cmd + Shift + ]”，然后按下回车，这个快捷键就绑定上了。

  • VS Code 的快捷键修改界面已经考虑到了这一点，你可以在搜索框内搜索你使用的快捷键，然后就可以看到这个快捷键当前对应的命令是哪个。

VSCode 代码行编辑

  • 要删掉一行代码，你可以选中它，然后再按 Delete 键。不过还有一个快捷键，那就是直接按下 “ Cmd + Shift + K ” (Windows 上是 “Ctrl + Shift + K”)，当前代码行就可以被删除了。

  • 如果你只是想要剪切这行代码，那么你直接按下 “ Cmd + x ” (Windows 上是 “Ctrl + x”) 即可。

  • 我想你肯定很清楚，“Enter” 键的基础作用是能在编辑器里光标所在的位置添加一个换行符。但是很多时候你可能并不是单纯地要将一行分成两段，而是希望在这行的下面或者上面开始一段新的代码。

  • 这个功能对应的快捷键非常好记，它跟 “Enter”键十分接近。当你想在当前行的下面新开始一行时，你只需按下 “Cmd + Enter” （Windows 上是 “Ctrl + Enter”）；而当你想在当前行的上面新开始一行时，你只要按下 “Cmd + Shift + Enter” （Windows 上是 “Ctrl + Shift + Enter”）就行了

  • 当你想移动一段代码时，一般你可能会分三步走：先选中，再剪切，最后粘贴。不过我更喜欢的是按住 “Option + 上下方向键”（Windows中就是“Alt + 上下方向键”） ，将当前行，或者当前选中的几行代码，在编辑器里上下移动。

  • 如果你同时按住 “Shift” 键的话，也就是 “Option + Shift + 上下方向键”（Windows中就是“Alt + shift + 上下方向键”），那就可以复制这几行，然后粘贴到当前行的上面或者下面。
  • 另外，你在尝试“Option + 上下方向键”这个快捷键“上下移动”时，可能也发现了，当你把一段代码移动到花括号里面或者外面时，代码前的制表符或者空格的数量会自动发生改变，这样你就不需要移动完代码后再调整了。

VSCode 撤销光标移动

  • VSCode 撤销光标移动，撤销光标的移动和选择。有的时候你移动完光标之后，又希望把光标回退到上一个位置，这时你只需按下 “Cmd + U”（Windows 上是 Ctrl + U），就可以撤销这一次光标的移动。

VSCode 行排序

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

VSCode 合并代码行

  • VSCode 合并代码行。有的时候你可能会为了避免代码看起来过于冗余，就会把比较短小的几行代码合并到一行里面去。这时，你只需要按下 “ Ctrl + j ” （Windows 上未绑定快捷键，可以打开命令面板，搜索 ”合并行“）就可以了，而不需要不断地调整光标、删除换行符。

VSCode 调整字符大小写

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

VSCode 调换字符位置

  • VSCode 调换字符的位置。你可以按下 “Ctrl + t” （Windows 上未绑定快捷键，可以打开命令面板，搜索 ”转置游标处的字符“） 来把当前光标前后的字符调换位置。

VSCode 代码缩进

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

VSCode 代码格式化快捷键

  • VSCode 代码格式化快捷键，我们平常在做自己的小项目或者随便写一些脚本的时候，可能不会太在意代码的格式。不过一旦开始团队合作，整个项目组则会选择同一个代码风格和格式以有效降低协同成本。所以定期对自己写的代码进行格式化是个很好的习惯。

  • 你可以按下 “Option + Shift + F” （Windows 上是 Alt + Shift + F）来对整个文档进行格式化，VS Code 也会根据你当前的语言，选择相关的插件。当然，前提条件是你已经安装了相关插件。
  • 你也可以选中一段代码，然后按下 “Cmd + K Cmd + F” （Windows 上是 Ctrl + K Ctrl + F），这样只有这段被选中的代码才会被格式化。

VSCode 添加代码注释

  • VSCode 添加代码注释，你在调试代码时，肯定经常需要临时地把一些代码注释掉。如果你要将一行代码注释掉，你只需按下 Cmd + / （Windows 上时 Ctrl + /）。如果你需要把一整段代码注释掉，按下 Option + Shift + A即可。

VSCode 自动补全

  • VS Code自动补全,VS Code 当中的自动补全内容，其实是由语言服务来提供的。本文介绍VS Code自动补全功能和VS Code自动补全设置。

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

  • 语言服务会根据当前的项目、当前的文件，以及光标所在的位置，为我们提供一个建议列表。这个列表包含了在当前光标位置下我们可能会输入的代码。当我们不断地输入字符，VS Code 就会根据当前输入的字符，在这个列表进行过滤。

  • 如果我们偶尔觉得这个自动补全窗口是多余的，希望暂时不看到它，可以按下 Escape 键将其隐藏。后续如果希望再次看到这个窗口，除了通过打字来将其调出以外，我们还可以按下 “Ctrl + 空格键”来手动地调出建议列表。

  • 刚才我们提到，VS Code 会根据我们输入的字符在这个建议列表里进行过滤。同时，这个过滤是允许我们犯一点小错误的，比如打字特别快的时候少打一个字母，VS Code 也能处理这个情况。比如在下面的动图里，我想使用 console 里的 debug 函数，但是我只打了 db 两个字母，建议列表依然为我提供了 debug 这个选项。

  • 上面的这几个窗口，它们都是通过我们输入的内容自动触发的，也就是说，编程语言决定了我们什么时候看到什么内容。虽然我们可以通过快捷键将其快速地关闭和唤出，但是有的时候自动补全窗口出现得过于频繁，也是会影响我们的编程体验的，毕竟悬浮窗口会遮盖一部分代码，影响我们的阅读。
  • 不过，我们可以通过几个设置，控制自动补全窗口出现的频率和方式，甚至这个窗口的大小。
  • 首先我们可以通过设置 “editor.quickSuggestions” 来决定在什么语境下自动补全窗口会被唤出。默认设置如下： 
    1
2
3
4
5

     "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
  }
    • 这个配置有三个选项：other、comments和strings。其中，comments 就是代码注释，strings 就是指字符串。默认情况下，当光标在代码注释或者字符串里，自动补全窗口就不会被自动唤出了。但如果你希望这个窗口永远不被自动唤出，那么你就需要将“other” 也改为 “false”。
  • 这时你可能会问了，如果关闭了这个设置，我想看到自动补全该怎么办呢？不用担心，当你按下 “Ctrl + 空格键” 之后，这个窗口依然会被打开，不管设置是关闭还是开启的状态。看到这个设置，你肯定也就明白了，为什么默认情况下你在写注释的时候没有代码自动补全的提示了吧。
  • 参数预览窗口也是一样的，你可以通过参数 “editor.parameterHints.enabled” 将其关闭。当你觉得自己需要看一看参数预览时，按下快捷键或者通过命令面板就能够将其打开了。
  • 上面的这个设置决定“是与否”的问题，但你也可以控制自动补全窗口出现的时间。自动补全窗口监听文件内容的变化，当你停止输入时，它就会试着给你提供建议。但是有的时候你打字稍微快一些，自动补全窗口才刚刚出现，你就输入了更多的内容，紧接着代码服务就要重新计算并提供建议了。如果你希望减少这种不必要的提示，可以增大设置 “editor.quickSuggestionsDelay” 的值，这样在你输入完代码后，自动补全窗口就会多等一会儿，然后再跳出来。
  • 其他几个自动补全的设置，你可以在设置里搜一搜 “editor.suggest”，自己修改玩一玩。
  • 上面提到的几个功能，它们都依托于语言服务来提供内容。但是有的时候，语言服务并不完美。编辑器于是提供了一种相对 “笨” 一些的提示，那就是基于单词的提示。编辑器通过分析当前的文件里的内容，进行简单的正则表达式匹配，给我们建议已经出现过的单词。

VSCode 文本选择

  • 最简单的方式，也是我们每个人最熟悉的方式，就是按住鼠标左键，然后拖动鼠标，直到选中所有我们想要选择的文字为止，再松开鼠标即可。

  • 那是不是说鼠标用户要完成类似的操作，就只能“一点、二拖、三松手”呢？当然不是，VS Code 其实给鼠标也配备了类似的快捷键。

  • 在VS Code中：
    • 你单击鼠标左键就可以把光标移动到相应的位置。
    • 而双击鼠标左键，则会将当前光标下的单词选中。
    • 连续三次按下鼠标左键，则会选中当前这一行代码。
    • 最后是连续四次按下鼠标左键，则会选中整个文档。
  • 到这里你可能会问，如果我想要使用鼠标，选中其中的多行代码该怎么办？VS Code也考虑到了这个情况，在编辑器的最左边，显示的是每一行的行号。如果你单击行号，就能够直接选中这一行。如果你在某个行号上按下鼠标，然后上下移动，则能够选中多行代码。

VSCode 快速预览

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

VSCode 参数预览

  • VS Code参数预览,当我们从建议列表选择了一个函数，然后输入括号，准备开始输入参数时，我们会看到一个参数预览的悬浮框。通过这个参数预览的窗口，我们可以知道这个函数可以传入哪些参数，它们的参数类型又是什么样的。
  • 同样的，隐藏这个窗口的快捷键也是 Escape。如果你想再次将其调出的话，需要按下 “Cmd + Shift + Space” （Windows 上是 Ctrl + Shift + Space）。

VSCode 重构

  • 当我们想要修改一个函数或者变量的名字的时候，我们只需要把光标放到函数或者变量名上，然后按下F2，这样这个函数或者变量出现的地方就都会被修改

  • 这个操作并不是一个粗暴的搜索关键词并替换，在上面的动图中你可以看到，最后一行代码里有个 bar3函数调用，但当我们去重命名 bar这个函数时，bar3并没有受到影响。

  • 除了重命名外，另一个常用的重构的操作就是把一段长代码抽取出来转成一个单独的函数。在VS Code中，我们只需选中那段代码，点击黄色的灯泡图标，然后选择对应的重构操作即可。
  • 要注意的是，并不是每个语言服务都支持重构的操作。如果你选中一段代码后，但没有看到那个黄色的灯泡图标，那么也就是说你使用的这门语言可能还没有支持快速重构。

VSCode 文本编辑

  • VS Code文本编辑，在 VS Code中，我们除了能够使用鼠标来选择文本以外，还能够使用鼠标对文本进行一定程度的修改，我们把它称为拖放功能（drag and drop）。
  • 比如在今天的示例代码中，我们选中 bar 这个函数，然后将鼠标移到这段选中的代码之上，按下鼠标左键不松开。这时你可以看到，鼠标指针已经从一条竖线，变成了一个箭头。这时候我们移动鼠标的话，就可以把这段文本拖拽到我们想要的位置。

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

  • 如果我们在拖拽这段文本的同时，按下 Option 键（Windows 上是 Ctrl 键），鼠标指针上会多一个加号，这时候我们再移动鼠标或虚拟光标至我们想要的位置，然后当我们松开鼠标左键的时候，这段文本将会被复制粘贴到虚拟光标所在的位置，也就是我们既定的目标位置。
  • 你看，在移动鼠标的过程中，多按了个 Option 键（Windows 上是 Ctrl 键），操作结果就由原来的“剪切+粘贴”变为“复制+粘贴”了。

VSCode 多光标

  • VSCode 多光标特性，在我们的日常编码过程中，有很多工作，它本身就是具有“重复”属性的。比如你需要把多个单词的第一个字母从小写变成大写，这种跟业务逻辑相关的重复性操作，编辑器很难为它们一个个单独做优化。
  • 而 VS Code 的多光标特性其实就是用来解决这类问题的。当你在一个文本框或者某个输入框里打入字符时，会有一个竖线来显示你将要输入文字的位置，这就是“光标”。顾名思义，多光标其实就是多个输入位置，这里你可以脑补下多个竖线的场景。

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

  • “Cmd + D” 这个命令的作用是，第一次按下时，它会选中光标附近的单词；第二次按下时，它会找到这个单词第二次出现的位置，创建一个新的光标，并且选中它。这样只需要按下三次，你就选中了所有的“5”。这个时候你再按下 “右方向键”，输入“px”，即可完成任务。

  • 接下来讲讲第二种，是跟代码行批量处理有关，也还是用的前面的代码。首先你选择多行代码，然后按下 “Option + Shift + i” （Windows 上是 Alt + Shift + i），这样操作的结果是：每一行的最后都会创建一个新的光标。
  • 不过，VS Code 中还有一个更加便捷的鼠标创建多光标的方式。当然，这首先要求你的鼠标拥有中键。你只需按下鼠标中键，然后对着一段文档拖出一个框，在这个框中的代码就都被选中了，而且每一行被选中的代码，都拥有一个独立的光标。

VSCode 代码跳转和链接

  • 我们还是把鼠标移动到示例代码的第五行 foo 上，然后按下 Cmd 键，这时候 foo下面出现了一个下划线。然后当我们按下鼠标左键，就跳转到了 foo函数的定义处。

VSCode 文件跳转

  • 在VS Code中，解决这个问题的第一个方法，就是按下 “Ctrl+Tab”，然后继续按着 “Ctrl”键但是松开 “Tab” 键，这样你就可以打开一个文件列表，这个列表罗列了当前打开的所有文件。接下来，你可以通过按下 “Tab”键在这个列表里跳转，选择你想要打开的文件。最后选到你想打开的文件后，松开 “Ctrl” 键，这个文件就被打开了
  • 还好，VS Code 在命令面板里提供了一种支持搜索的文件跳转方式。当你按下 “Cmd + P” （Windows 上是 Ctrl + P）时，就会跳出一个最近打开文件的列表，同时在列表的顶部还有一个搜索框。
  • 看到这里想必你应该明白了，你可以使用这个搜索框来快速地找到你想要的文件，然后按下 “Enter” 键直接打开，这整个过程简单而且顺畅。

VSCode 行跳转

  • VS Code也提供了一种极为简单的方式来支持行跳转，你只需要按下 “Ctrl + g”，紧接着编辑器就会出现一个输入框
  • 如果你想跳转到某个文件的某一行，你只需要先按下 “Cmd + P”，输入文件名，然后在这之后加上 “:”和指定行号即可。跳转到指定文件的指定行数

VSCode 符号跳转

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

  • 如果要在一个文件里的符号之间跳转，你只需按下 “Cmd + Shift + O” （Windows 上是 Ctrl + Shift + O），就能够看到当前文件里的所有符号。
  • 使用方向键，或者搜索，找到你想要的符号后，按下回车，就能够立刻跳转到那个符号的位置。如下图所示：通过符号功能跳转到指定的代码位置
  • 请注意，在按下 “Cmd + Shift +O”后，输入框里有一个 “@”符号，这个符号在这里的意义，我会在后面的章节里去介绍，你可以先留个心眼。这时，如果你输入 “:”，就可以将当前文件的所有符号，进行分类，这样搜索符号也就更加方便。
  • 有些语言除了提供单个文件里的符号，还支持在多个文件里进行符号跳转。比如在 VS Code 里，如果你打开了多个 JavaScript 文件，就可以按下 “Cmd + T” （Windows 上是 Ctrl + T），搜索这些文件里的符号。
  • 通过“Cmd + T”，搜索多个文件的符号

VSCode 定义和实现间跳转

  • F12跳转到函数定义的位置
  • 也可以按下 “Cmd + F12” （Windows 上是 Ctrl + F12），跳转到函数的实现的位置。

VSCode 跳转到引用的地方

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

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

VSCode 代码片段

  • VSCode代码片段，有的时候，我们经常输入的代码是业务强相关的，语言服务没法做出优化；或者是一些我们经常使用的定式，比如循环语句、创建一个新的类或者一个 UI 控件，我们经常写类似的代码，只不过每次都要做细微的修改。对于这些代码，我们可以将它们抽象成模板，保存起来，等下次要使用的时候直接调用即可。

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

  • 首先，我们打开命令面板，搜索“配置用户代码片段”（Configure User Snippets）并且执行。这时候我们会看到一个列表，让我们选择语言。这里我们依然选择 JavaScript 作为我们的示例语言，不用担心，代码都是非常简单和易于理解的。命令面板，搜索“配置用户代码片段”并且执行
  • 选择完语言后，我们就能看到一个 JSON 文件被打开了，这个文件里的内容，现在都是被注释掉的。我们可以选中第七行到第十四行，按下 Cmd+ / 取消注释。
  • 在上面的例子里，这个代码片段的名字叫做 Print to console 。这个代码片段对象的值，也就是花括号里的代码，必须要包含 “prefix” 前缀和 “body” 内容这两个属性。同时，这个值还可以包含 “description” 描述这个属性，但这个属性不是必须的。
  • “prefix” 的作用是，当我们在编辑器里打出跟 “prefix” 一样的字符时，我们就能在建议列表里看到这个代码片段的选项，然后我们按下 Tab 键，就能够将这个代码片段的 “body” 里面的内容插入到编辑器里。如果这个代码片段有 “description” 这个属性的话，那么我们还能够在建议列表的快速查看窗口里看到这段 “description”。
  • 输入 log 即可看到 Print to console 代码片段，然后再按下回车或者 Tab 键，就能够将这个代码片段插入编辑器了。

VSCode 折叠代码快捷键

  • VSCode折叠代码快捷键，我们再来一起看一下有哪些折叠和展开代码的快捷键。首先是折叠和展开代码的两个快捷键。

  • 当我们按下 “Cmd + Option + 左方括号”（Windows 上是 Ctrl + Shift + 左方括号），当前光标所处的最内层的、可以被折叠的代码就会被折叠起来。请注意，我们在这里加了两个限制条件，“最内层”和“可以被折叠”。我们可以先用下面一个小例子来理解这两个条件。

VSCode 小地图

  • 如果你是在一个比较大的屏幕上工作，需要快速了解整个文件的全貌，并且还能靠鼠标快速地移动，那么这时小地图就很有用了。这个功能默认是打开的，所以你无需特别设置。这个使用起来比较简单，你可以像我在图中展示的那样试着打开一个较大的文件，感受一下它的妙处。

  • 很多游戏中也有类似的小地图功能，不知道你有没有似曾相识的感觉。

  • 除了控制小地图是否打开，编辑器还为我们提供了几个渲染的配置项。比如说，默认情况下，小地图会将每个字符都渲染出来。但是我们并不能真正地通过小地图来看代码，我们只是要看个大概结构罢了，那么我们可以打开命令面板，搜索“打开设置”（Open Settings），进入设置界面后，搜索 “editor.minimap.renderCharacters” ，找到后将其关闭，这样一来，所有的字符，都会被渲染成一个个小色块。
  • 同样的，我们还可以通过 “editor.minimap.maxColumn” 来控制小地图里每一行渲染多少个字符。很多时候我们只需看下每行代码前的缩进和前面的代码高亮，就能看出个大概来了。

VSCode 单文件搜索

  • VSCode单文件搜索，今天我们重新回到原点，来看一下如何使用编辑器自带的文本搜索功能，快速地穿梭于海量的代码之中。在我看来，一个功能丰富且快速的搜索，在很多情况下甚至会比语言服务还要来得有用。

  • 我们把光标放在编辑器当中，然后按下 “Cmd + F” （Windows 上是 Ctrl + F），就能够快速地调出搜索窗口（可能这个命令你早就发现了或者经常使用了）。当我们调出搜索窗口的时候，编辑器就会把当前光标所在位置的单词自动填充到搜索框中。与此同时，当前文件里和搜索关键词相同的单词都会被高亮出来。
  • 自动填充搜索关键词的好处在于，当我们按下 “Cmd +F” 搜索这个单词之后，我们还能够立刻通过回车键或者 “shift+回车键” 在所有搜索结果当中快速跳转。

  • 这里需要注意的事情是，当我们开始搜索的时候，光标已经被移动到了搜索框当中，如果在这时候我们继续打字的话，那原有的搜索关键词将会被修改。

  • 如果我们希望找到搜索结果后，接下来就直接修改编辑器中的内容，那么就得将光标重新移动到编辑器当中，听起来就挺不方便的，是不是？

  • 这种情况下，我们不妨换一个快捷键。首先我们将光标移动到我们想要搜索的单词处，然后按下 “Cmd + G” （Windows 上是 F3），此时我们同样调出了搜索框，但与前面 “Cmd +F ” 这个快捷键不同的是，这时光标依然是在编辑器当中，而不是在搜索框中。

  • 下面我们再一起来看下这个搜索框中都有哪些功能。

  • 当我们在搜索框中打字的时候，搜索操作是自动触发的，而无需我们再按下回车键去手动地执行搜索这个操作。

  • 除了搜索纯文本以外，搜索框还支持多种不同的搜索方式。比如，在搜索框的最右侧，就有三个配置按钮。
    • 第一个是大小写敏感。 这个很好理解，就是在文档中搜索关键词的时候，搜索的结果是否要跟关键词大小写完全一致。默认情况下，VS Code 的搜索是不区分大小写的，也就是说哪怕大小写不一样，也会算到搜索结果里去。但如果我们不想要这个特性，就可以点击这个按钮，或者按下 “Cmd+Option+C” （Windows 上是 Alt + C）来关闭它。
    • 第二个是全单词匹配。 有的时候我们搜索的单词恰好是别的某个单词中间的一部分，如果我们不希望这样的结果出现在搜索结果中，那么就可以点击这个按钮或按下 “Cmd+Option+W” （Windows 上是 Alt + W）来关闭它。
    • 第三个，就是正则表达式匹配了。 当我们点击这个按钮或按下 “Cmd + Option + R” （Windows 上是 Alt + R ），就能够打开正则表达式的支持，然后在搜索框中输入正则表达式来搜索。要注意的是，编辑器中的这个搜索框，它里面的正则表达式使用的是 JavaScript 的正则引擎。
  • 这三个功能的快捷键的配置，相信你已经看出其中的诀窍了，它们分别使用了 Case、Word 和 Regular Expression 的第一个字母作为快捷键的一部分，若你知道是这几个单词，那相信对应的快捷键你就不会容易忘了。

  • 我们可以先选中一段文本，然后按下 “Cmd + F” 调出搜索框，这之后点击这个按钮，就可以将这段文本的范围设置为接下来的搜索区域。然后当我们在输入框里输入关键字后，编辑器就只会在这个区域里进行搜索。

  • 上面我们提到的功能，都是 VS Code 的默认行为。但也有部分用户不喜欢搜索框的一部分行为，比如说自动填充搜索关键词。那你可以打开设置，搜索 “editor.find.seedSearchStringFromSelection” 来关闭它。
  • 也有个别用户觉得，如果选中了多行文本，那么当开始搜索时，应该自动地只在这几行代码里进行搜索。要达成这样的目的，你则需要打开设置 “editor.find.autoFindInSelection” 。

VSCode 单文件替换

  • VSCode单文件替换，在搜索到我们想要的结果之后，我们可以直接在文件中进行修改，也可以使用替换窗口进行批量替换。如果你在使用鼠标或者是触控板的话，只需按一下搜索窗口最左侧的箭头按钮即可打开替换框。
  • 替换框的后面，一共有两个按钮：第一个能够替换单个搜索结果，第二个则能够替换全部的搜索结果。它们对应的快捷键我就不多加赘述，我们只需把鼠标指针移动到它们上面，就能够看到了。
  • 我们也可以通过快捷键直接调出替换窗口。最常用的命令就是按下 “Cmd + Option + F”（Windows 上是 Ctrl + H）键，这样当前光标所在的单词就会被用作为搜索关键词，同时编辑器将光标移动到替换窗口中，我们只需直接输入想要替换的关键词就行了，是不是很便捷呢？
  • 当然，如果你在书写完替换文本后，觉得搜索关键词需要修改，那你可以按下 “Shift + Tab” 键将光标移动到上面的搜索输入框里。“Tab” 和 “Shift + Tab” 键能够帮助你在这两个输入框直接进行跳转。

VSCode 多文件搜索和替换

  • 多文件搜索的运行方法跟单文件搜索非常类似。单文件搜索，我们是通过按下“Cmd+ F” 来调出搜索窗口的，而多文件搜索则是通过按下 “Cmd + Shift + F” （Windows 上是 Ctrl + Shift + F）来调出多文件搜索的视图。

  • 默认情况下，当我们调出多文件搜索的视图时，VS Code 会在当前打开的文件夹下进行搜索。不过，要发挥多文件搜索的更大功效，我们可以通过书写配置来决定在哪些子文件夹下进行搜索，以及过滤掉哪些特殊的文件或者文件夹。

  • 要完成这样的配置，我们需要点击搜索框下三个点形状的图标，点开后，我们能看到两个输入框，它们的名字分别是“包含的文件” 和 “排除的文件”。这两个配置的书写格式是 glob，很多编程语言和配置都会使用 glob 来模糊匹配文件名和文件夹，估计你已经有所了解。而如果你不熟悉的话，就当作是课后作业了，这一定不是你最后一次需要书写 glob。

  • 第一个是 “search.collapseResults” 。它是用来控制是否自动展开搜索结果。默认的配置是 “auto” 自动， 也就是说，VS Code 会根据搜索结果的多少来决定是否要将某个文件下的搜索结果展开，如果某个文件夹下的结果过多的话，就会将其暂时折叠，用户需要展开结果。我自己喜欢将其设置为 “alwaysExpand”，这样我每次都能直接看到结果了。
  • 第二个是 “search.location” ，也就是多文件搜索视图的位置。默认情况下，搜索视图会出现在侧边栏。但是 VS Code 同样允许你把搜索视图放到底部面板中去，你只需将其修改为 “panel” 即可。相信很多用户都跟我一样，使用过非常多把搜索视图放在底部的开发工具，并且很习惯了，那这个设置就能够帮助到我们。

VSCode 行号

  • 我则是通过更改设置 editor.renderLineHighlight: “all” 把当前代码行的行号下的背景色也修改了，所以你可以看到图 2 的行号 5 的背景色也成为了绿色，整体上看起来更统一。

VSCode 渲染出空格符和制表符

  • 在图2中你能够在不少代码行前面看到灰色的“点”，这每一个“点”都代表着一个空格符。你可以通过设置 editor.renderWhitespace: all 让编辑器将所有的空格符、制表符等全部都渲染出来。这样你就能够一眼看出这个文件中使用的究竟是制表符还是空格符，以及有没有在哪里不小心多打了一个空格等。

VSCode 缩进参考线和垂直标尺

  • 编辑器会根据你指定的制表符的长度，来决定缩进参考线的位置。这样你就可以非常清楚地知道代码有没有正确地缩进，而且也方便你区分出不同代码块之间的层级关系。这个功能是可以通过 editor.renderIndentGuides 来控制开关的。

  • 而图2中的竖线则不一样了，它叫做垂直标尺。如果你的项目中有规定说每一行代码不得超过多少个字符，比如说120个字符，那么你就可以将标尺设置为 120，即 editor.rulers: [120]。这样的话编辑器就会在第120个字符所在的位置处画出这样一条垂直的竖线，所以你一眼就可以看出自己的代码是否达标。

VSCode 光标样式

  • 在图1中，光标是一条竖线，而在图2中光标则相对粗一些。编辑器中的光标样式有非常多种，你可以控制粗细，也可以控制它怎么闪烁。你需要调整的设置是 editor.cursorBlinking editor.cursorStyle 和 editor.cursorWidth。

VSCode 如何管理文件和文件夹

  • VS Code是如何管理文件和文件夹，首先需要说明的是，VS Code 的各个功能，都是基于当前打开的文件或者文件夹的。
  • 该怎么去理解这个概念呢？
    • 如果你使用过 IDE 的话， 你应该记得在第一次打开 IDE 的时候，它们往往需要你创建一个工程，这个工程会生成一个特殊的工程文件。这个工程文件记载了这个项目有哪些相关的文件、项目的配置、构建脚本等等。这个文件记录着 IDE 管理工程的元信息，开发团队也能够通过共享这个工程文件保证成员工作环境的一致性。但是工程文件对用户体验就不太友好了，比如说项目文件可能对 IDE 的版本有所要求，项目文件损坏了 IDE 读取不了但是我们也不知道如何修复，等等。
  • VS Code 则选择了一种相对轻量，而且大家都易于理解的方式，那就是所有的操作都基于文件和文件夹。当你打开一个文件夹，VS Code 的核心功能就会对这个文件夹进行分析，并提供对应的功能。比如，在打开的文件夹下检测到有 .git 文件，就加载 Git 插件来提供版本管理的功能；或者发现文件夹下有 tsconfig.json ，就会激活 TypeScript 插件提供语言服务
  • 当你第一次打开 VS Code 的时候，工作台中还没有打开任何文件夹。这时候在欢迎界面的左上方，你能够看到：“新建文件”和“打开文件夹”等这样的快捷键。
  • 未打开文件夹，状态栏为紫色
  • 这时候请注意工作台最下方的状态栏，当 VS Code 没有打开任何文件夹的时候，它的颜色是紫色的。而如果在工作台中打开了某个文件夹，状态栏的颜色就会变成蓝色。

VSCode 多文件夹工作区

  • VS Code 多文件夹工作区，多文件夹工作区（multi-root workspace）。老实说呢，这个概念是有一定的理解难度的。
  • 上面我们提到的基于文件夹的这种项目管理方式，从 VS Code 第一天开始就存在了。也几乎从第一天开始，我们就收到了用户对于这一个设计不满的反馈。对于这些不满的用户而言，他们的痛点在于他们经常需要同时对多个文件夹下的代码进行操作。但是 VS Code 关于单个文件夹的这种操作模式，要求了他们必须同时打开多个窗口，并不停地在它们之间切换。

  • 多文件夹工作区就是为了针对这个问题而实现的解决方案。那下面我们就一起来看一看怎样去创建一个多文件夹工作区。

  • 首先，在 VS Code 中打开一个文件夹，此时 VS Code 处于一个单文件夹的状态。然后你可以调出命令面板，搜索 “将文件夹添加到工作区” （add folder to workspace）并执行，或者使用菜单，“文件 —> 将文件夹添加到工作区”，这之后，选择你想要在当前窗口打开的文件夹。
  • 此时在资源管理器里的标题栏里，你能看到“无标题 （工作区）”这样的文字，这说明当前的工作区已经有多个文件夹了，只是现在你还没有保存这个多文件工作区，也没有给它指定一个名字。
  • 要保存这个工作区，接下来你可以调出命令面板，搜索“将工作区另存为” （save workspace as），VS Code 就会为这个工作区创建一个文件，这个文件的后缀名是 “code-workspace”。比如，在下面的动图中，我给这个工作区取名为 sample，然后指定在 Code中这个文件夹下保存。这样操作后，VS Code 就会在 Code 文件夹下创建一个 sample.code-workspace 文件。
  • 你可以看到，操作完之后资源管理器的标题栏已经相应地改变了。另外，sample.code-workspace 虽然有个特殊的后缀，但这个文件的格式其实也是 JSON，你可以自行打开这个文件查看一下。
  • 这个 JSON 文件，默认有两个键（key）。第一个是 folders 文件夹，它里面罗列的是这个多文件工作区里有哪些文件夹。可以看出，这些文件夹的地址，都是这个 sample.code-workspace 文件的相对路径。第二个则是 settings 设置，你可以在这个值里面添加专属于这个多文件夹工作区的设置。它的作用，跟上面我们介绍的 .vscode 文件夹下的 settings.json 文件是类似的。

VSCode 工作区切换

  • VSCode 工作区切换，如果你同时打开了多个窗口，可以按下 Ctrl + W，或者调出命令面板，搜索 “切换窗口（Switch Window）”，然后选择你要跳转的那个文件夹中去。
  • 如果你只是要跳转到上一个打开的窗口，那就更方便了。打开命令面板，搜索“快速切换窗口（Quick Switch Window）”并执行，就能够直接跳转到之前的窗口了，而无需再做选择。这里我倒是非常建议你给这个命令指定一个快捷键，这样你就能在窗口之间一键切换了。
  • 如果你同一时间只会关注一个项目，那你也大可不必使用多个窗口。我就经常只用一个显示器和一个窗口，然后当我想在另外一个项目上工作时，我就会按下 Ctrl + R（或者使用命令面板，搜索 “打开最近的文件”），此时我就能够看到最近操作过的文件夹并按下回车键进行切换了。
  • 当你按下 Ctrl + R 调出最近打开的文件夹的列表后，也能够按下 Cmd + 回车键，将它在一个新的窗口中打开。
  • 正是因为有上面这几个命令的存在，让我觉得没有多文件夹工作区也是可以的。当然，多文件夹工作区在某些方面的优势是不可比拟的，比如说跨文件夹的代码调试，这个我们后面也会介绍。

VSCode 代码调试器

  • VSCode 代码调试器，和语言功能一样，VS Code 是把调试功能的最终实现交给插件来完成的。VS Code 提供了一套通用的图形界面和交互方式，比如怎么创建断点、如何添加条件断点、如何查看当前调试状态下参数的值，等等。无论你使用哪个编程语言或者调试器，这一套交互流程都是相似的。

  • 而对于插件作者而言，他们需要完成的是如何把真正的调试工作跟 VS Code 的界面和交互结合起来，为此 VS Code 为插件作者提供了一套统一的接口，叫做Debug Adapter Protocol（DAP）。当用户在界面上完成一系列调试相关的操作时，VS Code 则通过 DAP 唤起调试插件，由插件完成最终的操作。

  • VS Code 中有一个专门的用于管理调试功能的视图。我们可以点击界面左侧“昆虫”（也就是 bug 啦）形状的按钮，或者按下 “Cmd + Shift + D” （Windows 上是 Ctrl + Shift + D）来唤出调试视图。
  • 在视图的最上侧，有个绿色的箭头按钮。这个按钮是用于启动调试器的。但是在上面的截图里，你可以看到在绿色箭头的右侧写着 “没有配置”。这说明现在 VS Code 还不知道该使用什么调试器来调试当前的代码。此时点击这个按钮或者按下 F5，我们能够看到一个列表。
  • 首先，我们将鼠标移动到第五行代码的行号前面，点击鼠标左键，我们能够看到一个红色的圆点被创建了出来，这就是断点。当然，我们也可以把光标移动到第五行，然后按下 F9，同样可以在第五行创建断点。

  • 此时，当我们再次点击调试视图上面的绿色箭头按钮，或者按下 F5，启动调试器，并且选择 Node.js ，VS Code 就会进入调试模式。

  • VSCode 代码调试器配置launch.json介绍，在调试视图的最上方，我们能够看到一个齿轮形状的按钮，它可以用于创建和修改 launch.json 文件。由于当前文件夹下没有 launch.json 文件，所以这个按钮的右上角有个红色的点，它告诉我们当前的调试配置有一点问题，让我们点击这个按钮。
  • 这个 JSON 文件里的 configurations 的值就是当前文件夹下所有的配置了。现在我们只有一个调试配置，它有四个属性：
    • 第一个是 type，代表着调试器的类型。它决定了 VS Code 会使用哪个调试插件来调试代码。
    • 第二个是 request，代表着该如何启动调试器。如果我们的代码已经运行起来了，则可以将它的值设为 attach，那么我们则是使用调试器来调试这个已有的代码进程；而如果它的值是 launch，则意味着我们会使用调试器直接启动代码并且调试
    • 第三个属性 name，就是这个配置的名字了。
    • 第四个属性 program，就是告诉 Node.js 调试器，我们想要调试哪个文件。这个值支持预定义参数，比如在上面的例子里，我们使用了${file}，也就是当前编辑器里打开的文件。

  • 下面我们把 program 的值改为 ${workspaceFolder}/index.js，其中${workspaceFolder} 是代表当前工作区文件夹地址的预定义参数，使用它就能够准确地定位当前工作区里 index.js 文件了。（关于在配置文件里可以使用的预定义参数，请参考Visual Studio Code Variables Reference。 https://code.visualstudio.com/docs/editor/variables-reference）

  • 通用属性
  • 虽然每个调试器各自控制着用户可以使用哪些属性，但是调试器之间还是有很多相同的地方，调试插件在很多时候都会使用相同的属性名来代表同样的功能。比如，我自己就是 Ruby 插件的作者，我在实现 Ruby 调试插件的时候，参考了很多 Node.js 和 PHP 调试插件对于属性的命名和使用。我在书写不同语言的调试配置时，经常使用的有下面这些：
    • program 一般用于指定将要调试的文件。
    • stopOnEntry，当调试器启动后，是否在第一行代码处暂停代码的执行。这个属性非常方便，如果没有设置断点而代码执行非常快的话，我们就会像文章的最开头那样，代码调试一闪而过，而没有办法在代码执行的过程中暂停了。而设置了 stopOnEntry 后，代码会自动在第一行停下来，然后我们就可以继续我们的代码调试了。
    • args 参数。相信你应该记得在前面任务系统配置的文章里，我已经说明了可以使用 args 来控制传入任务脚本的参数，同样的，我们也可以通过 args 来把参数传给将要被调试的代码。
    • env 环境变量。大部分调试器都使用它来控制调试进程的特殊环境变量。
    • cwd 控制调试程序的工作目录。
    • port 是调试时使用的端口。

VSCode 经典插件推荐

  • VSCode 经典插件推荐，今天我要介绍的是：能够在某些领域大幅度提高VS Code使用效率和体验的工具。能够取代 VS Code原有功能的工具。对插件 API 的使用别出心裁的工具。

Git

  • GitLens
  • VS Code中的 Git 体验在易用性和完整性之间取得了一个不错的平衡，大部分用户都能够使用它完成工作，同时又不会被太多的功能吓到。但是很多硬核的 Git 用户肯定会觉得功能还不够用。包括但不限于：
    • 不能查看某个 commit 中的代码改动；
    • 不能比较两个 commit 或者 branch，然后阅览代码改动；
    • 不能查看代码历史记录。
  • RemoteHub

  • GitLens 作者 Eric Amodio 又出一款力作——RemoteHub。安装这个插件后，当你想在本地看某个 GitHub repository的代码时，你就不需要将代码 clone 下来了，你可以直接打开这个 repository 相关的工作区，所有文件、文件夹都是从 GitHub 按需下载下来。如果你连接 GitHub 的网速不错的话，那么使用体验可是比 GitHub 网站要好得多。

  • GitHub Pull Request
  • 除了 Git 支持以外，一个呼声一直非常高的需求，就是在 VS Code中查看和审核 GitHub 上的 Pull Request。好消息是，VS Code团队和 GitHub 的 Editor Tools 团队一起合作，为我们提供了 GitHub Pull Request这个插件。

工作区

  • Settings Sync
  • 如何在不同设备之间同步个人设置？VS Code自己并没有提供设置的同步，但通过 Settings Sync这个插件，你可以将个人设置同步到 Gist 中。

  • 不过值得注意的是，虽然你的设置是同步到自己私人的 Gist 中，但是如果你的设置中有一些隐私信息，像密码、Token 之类的，还是不要使用此插件比较好。

  • Project Manager
  • 我们在工作台的部分，介绍过 VS Code支持多文件夹工作区（multi-root workspace），以及如何通过快捷键在不同的项目之间来回切换。如果你不喜欢 VS Code默认的方式，那么你也可以试试 Project Manager。Project Manager 甚至还有一个专门的视图来展示所有的项目，非常方便。

编辑器

  • VIM

  • 编辑器相关的插件中最厉害的应该就是 Vim 相关的插件了，VS Code提供了一个 API 保证了 Vim 插件能够被正确地实现。不过 Vim 插件并不只有一个，下载量最大的，也是我参与的就是 VSCodeVim，它对 Vim keybings 的覆盖程度非常高。另一个非常受大家欢迎的就是amVim，它的性能也非常不错。

  • Rainbow Brackets

  • 不管你是不是写函数式语言，当你的代码中有比较多的花括号时，要保证它们对称可以说是非常困难了。Rainbow Brackets这个插件，为同一对花括号指定一个单独的配色，这样你就能够轻松地一眼看出花括号的配对了。

  • Indent Rainbow
  • 上面的 Rainbow brackets 是给花括号加上多种颜色，而 Indent Rainbow则是为你的代码缩进提供颜色上的提示：

  • 这两个插件有异曲同工之妙，当然我还是建议写代码的时候，不要有太多的层级。

  • Pigment

  • 既然说到颜色，就不得不提Pigment 这个插件。在介绍择色器（Color Picker）的时候我介绍过，VS Code会在每个颜色前面加上一个方块，用方块来展示代码所对应的颜色。Pigment 则是将颜色渲染在这段代码的下面，我自己还是蛮喜欢这种方式的。

  • Import Cost
  • JavaScript 经常被吐槽的一个地方，就是大家对 npm 库的使用程度非常高，经常为了一个简单的功能，引入了几兆甚至十几兆的 npm 包。Import Cost这个插件，很好地在代码中给我们以提示，告诉我们引入的某个包，它最终会导致整个项目的大小增加多少。

调试：Debugger for Chrome

  • 虽然我们并不介绍语言相关的插件，但是还是有一个调试相关的插件值得一提，那就是 Debugger for Chrome。这个插件，允许在 VS Code中调试前段代码，这样你就不需要再使用 Chrome Dev Tools 了。你可以直接在自己的代码上加上断点，发现错误后直接修改，非常方便。

其他

  • Rest Client

  • 我们使用 REST API 的时候，经常需要发送一些样例数据对 API 进行测试，这时我们可以使用 Postman 这类的独立应用，也可以在 VS Code中使用 Rest Client插件，直接在编辑器里发送 REST 请求。

  • Code Runner

  • macOS 用户对 Code Runner 这个应用一定非常熟悉了，你可以使用 Code Runner 快速地书写代码并且执行，而无需设置环境配置工程之类的。VS Code里也有这样的插件，如果你有类似的需求，可以试一试。

  • Live Share
  • Live Share是微软官方出品的非常强大的服务，通过 Live Share service，你可以将你本地的工作区，直接分享给你的同伴，然后你的同伴就可以直接编辑你的代码，与你共享代码调试、集成终端等等，而无需安装任何环境。Atom 也有类似的服务叫做 Teletype。我工作中每次要和同事 Pair Programming 的时候，就会使用 Live Share。 同时 Live Share 服务还支持语音通讯，不过需要安装另一个插件 Live Share Audio。

如何分享插件

  • 当然有！你可以通过在项目的 .vscode 文件夹下，创建一个文件 extensions.json。你很熟悉了，这又是一个 JSON 文件，在这个 JSON 文件里，你只需提供一个键（key） recommendations，然后将你想要推荐给这个项目的其他工程师的插件的 ID 们，全部放入到这个数组中。当他们打开这个项目，而且并没有安装这些插件时，VS Code就会给他们提示了。

  • 除了在 .vscode/extensions.json 文件推荐插件，如果你在使用多文件夹工作区（multi-root workspace），也可以在多文件夹工作区的配置文件里添加如下的设置：

VSCode C++ 配置

三个文件:task.json launch.json c_cpp_properties.json

  1. IntelliSense：Intelligence Sense，代码自动补全
  2. Task.json: 告诉VScode如何编译.cpp文件，配置后将调用g++编译器基于源代码创建可执行文件。 参数： command：设置要运行的指定程序 args：参数数组指明要传送给g++的命令行参数，这些参数必须按照编译器要求的顺序来说明 ${file}：g++执行的活动文件 ${fileDirname}：当前目录 label：任务列表中显示的值
  3. launch.json：使用F5启动GDB调试器来调试程序
  4. c_cpp_properties.json：对c/c++扩展实现更多控制，可以改变编译器的路径，C++标准以及更多

变量替换

  • VScode在launch.json调试文件和task.json任务文件中是支持变量替换的，这就意味着可以很方便的使用VScode一些预定以的变量。
  • 变量的使用方式：${variableName}
  • 常用的变量：
    • ${workspaceFolder} : 项目文件夹在VScode中打开的路径
    • ${file} : 当前打开的文件
    • ${relativeFile} : 相对于${workspaceFolder}的文件路径
    • ${fileBasename} : 当前打开文件的名称
    • ${fileBasenameNoExtension} : 当前打开文件的名称，不带扩展名
    • ${fileExtname} : 当前打开文件的扩展名
    • ${fileDirname} : 当前打开文件的文件夹名称

调试 断点

日志点，Logpoints

  • 日志点是断点的变体，它不会“中断”到调试器中，而是将消息记录到控制台。日志点对于再调试无法暂停或停止的生产服务器时注入日志记录特别有用。(A Logpoint is a variant of a breakpoint that does not “break” into the debugger but instead logs a message to the console. Logpoints are especially useful for injecting logging while debugging production servers that cannot be paused or stopped)
  • 日志消息是纯文本，但可以包含表达式，需要使用花括号

表达式条件断点

  • 条件断点是表达式结果为true时才会进行断点

命中计数断点

  • 只有该行代码命中了指定次数，才会进行断点

内联断点

  • 仅当执行到达与内联断点关联的列时，才会命中内联断点。
  • 这在调试一行中包含多个语句的缩小代码时特别有用。比如for循环，短路运算符等一行代码包含多个表达式时
  • 在指定位置按shift + F9

快捷键

  • ctrl + p ： 快速搜索文件并跳转，添加:可以跳转到指定行
  • alt + 鼠标左键 : 选中多行同时编辑