# VSCode 启动
在命令行中输入 `code <workspace_sir>` 命令，将**在该目录下打开 VSCode**，以该目录作为当前的 "**Workspace**"，即 **VSCode项目根目录**。
例如 `code .`，在当前目标下打开 VScode。
<br><br><br>
# VScode 软件配置说明
打开配置文件或配置界面的命令如下：
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-BDEC223C96A8FB38D981930560A34F05.png|525]]
## 配置作用域说明
VSCode 为软件配置[^1] 提供了以下几种作用域：
- **用户配置**（**User Settings**）
- **工作区配置**（**Worspace Settings**）
- 远程环境配置（Remote Settings）
- 语言特定的配置（Language-specific Settings）
#### 用户配置（全局）
> **User Settings** - Settings that apply **globally** to any instance of VS Code you open.
用户配置文件路径如下：
其中的配置对**所有 VSCode 项目有效**，但**会被工作区配置所覆盖**。
#### 工作区配置
> **Workspace Settings** - Settings **stored inside your workspace** and only apply when the workspace is opened.
VSCode 中 `WorkSpace` 指代**项目根目录**，其中的 `.vscode` 子目录存放 VSCode 工作区配置文件，以及任务、插件相关的配置文件。
工作区配置文件路径即为项目根目录中的 `.vscode/settings.json`。
其中的配置**只对当前工作目录下的 VSCode 项目有效**。
#### 远程环境配置
VSCode 窗口打开一个 "**远程连接**" 时，可设置特定于该远程环境的配置。
远程环境配置文件路径为：`$HOME/.vscoder-server/data/Machine/settings.json`。
在命令面板中可通过 `"Open Remote Settings"` 命令打开：
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-95C95E7844EDB8D0A38445AB615B5662.png|500]]
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-8F899DC1765C1FA10C2F4E86A75C2DAD.png|400]]
同时，设置的 UI 界面下将存在该远程环境对应的"Remote" 标签页。
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-3EE819E43F93EDFD25913CCBE87881E1.png|475]]
#### 特定于语言的配置项
每个配置项都可以设置 **特定于某一编程语言**（Language-specific），这**将覆盖非特定于语言的配置项**。有几种方式可进行指定：
方式一：搜索框中键入 `@lang:languageID` 后，**显示的配置将针对特定语言生效，并显示特定于该语言的配置值**：
方式二：在命令面板中输出 `Preferences: Configure Language Specific Settings` 并选择特定语言后，将打开**针对所选语言的配置设置界面**。
方式三：直接**在 `.json` 配置文件中添加特定于某个语言的配置项**。
这一方式下，可为多个语言同时指定相同的配置项，如下所示：
注：多语言共有的配置项 **不会覆盖** 单语言特定的同名配置项。
### 配置作用域优先级
优先级从上往下递增：
> 
> 
<br><br>
## 配置UI界面说明
> 配置编辑器界面（UI界面）：
> 
界面布局说明：
- UI 界面下存在 `User`、`Workspace` 两个选项卡，对应**用户配置**和**工作区配置**。
- 上方**搜索框**可输入关键词，直接**查找相应配置项**，最右侧**漏斗图标**为过滤器按钮，可便捷添加过滤器。
- **修改过的配置项** 前面会标记有 **蓝色竖线** 。
- 点击每个选项前的**齿轮图标**，其中包含有**重置选项**，可重置为默认值。<br> 
- 配置项的形式包括**下拉项**、**输入框**、**复选框**、**添加按钮**。<br>此外，部分配置项只能在 `JSON` 配置文件中直接编辑。<br>  <br> 
- 界面左侧目录，为**配置分组**（对各种配置项进行了分类），包括以下类别：
- 文本编辑器相关
- 工作台相关
- 窗口相关
- 特性相关
- 应用相关
- 安全相关
- 插件相关（各个 VSCode 插件的配置项）
<br>
## 配置文件说明
> JSON 配置文件中的设置**值**可以是如下类型：
> 
VSCode 的配置文件均为 json 格式，包括：
- **默认配置文件 `defaultSettings.json`**：保存默认配置，只能通过 VSCode 命令面板打开且**只读、不可修改**。
- **用户配置文件 `settings.json`**
- Windows 下位于路径 `%APPDATA%/Code/User/settings.json`
- **工作区配置文件** `.vscode/settings.json`
当通过UI界面修改VSCode的配置时，任何**不同于默认设置**的**修改变动**，都将根据作用域 **自动被保存** 到 **用户配置或工作区配置文件** 中。
> [!example]
>
> 默认配置文件：
>
> 
>
> 如下所示，修改后的配置值将被保存到**用户配置或工作区配置 JSON 文件中**。
> 换言之，用户配置或工作区配置文件中**只会保存不同于默认配置的修改项**。
>
> 
>
> 
>
>
>
<br>
## 配置同步
启用 VSCode 中的**配置同步**选项并登录用户账户后，**当前配置将与用户账户关联**，VSCode 将在后台自动保存并同步配置。
当在不同主机上**启用 VSCode 并登录用户账户**时，VSCode 配置将会**自动同步**。
可自动同步的项目包括：
- Settings、Keyboard Shortcuts、User Snippets、User Tasks、UI State、Extentions、Profiles。
> [!example]
>
>
> 启用**配置同步**：
>
> 
>
> 配置同步的相关命令项：
>
> 
>
> 打开 `Settings Sync:Configure` 面板，可选择需要进行同步的项目：
>
> 
>
>
>
> [!tip]
> VSCode 在自动同步时会保存配置首选项（Preference）的 **本地**（local）和 **远程**（Remote）备份，可通过命令面板中的 `Settings Sync: Show Synced Data` 命令项打开
>
> 
>
<br><br><br>
# VSCode 工作区
VSCode 中的工作区 "Workspace" 是指在一个 VSCode 窗口中打开的**一个或多个文件夹的集合**[^2]。
具体可以分为：
- **Single-folder workspace** **==单文件夹的工作区==** <br>这是最通常的情况，开发者使用一个 VSCode 窗口来打开一个文件夹时，该文件夹就作为一个工作区。
- **Multi-root workspace** **==多根工作区==** <br>即**包含多个项目根目录的工作区**：**一个工作区中包含有多个不同的独立项目的项目根目录**。
> [!tip]
> 如果打开的是多根工作区，则VSCode中会在Explore里进行标注：
>
> 
>
>
<br>
### 多根工作区
多根工作区**使用一个名为 `<name>.code-workspace` 的 JSON 文件来表示。
该文件中保存了**一个多根工作区下所包含的各个目录列表**。通过 VSCode 打开该 JSON 文件时，就打开了一个多根工作区，工作区中包含文件中所指定的所有项目目录。
> [!NOTE]
>
> "**Multi-root workspace**" 相关操作
>
> 
>
>
>
<br>
#### `<name>.code-workspace` 文件
`<name>.code-workspace` 文件中能够可以**包含以下几部分内容**：
- `"folders"`： 该多根工作区下包含的项目文件夹
- `"tasks"`：同单独的`.task` 文件中的配置，作用域为 "**当前工作区**" 下。
> 项目根目录下的 `./vscode/.launch` 文件中的配置**优先级更高**，不会被工作区的覆盖。
- `"launch"`：同单独的 `.launch` 文件中的配置，作用域为 "**当前工作区**"下。
> 项目根目录下的 `./vscode/.launch` 文件中的配置**优先级更高**，不会被工作区的覆盖。
- `"settings"`： 同单独的 `settings.json` 文件中的配置，作用域为 "**当前工作区**"下。
> 当VSCode打开的是 "Workspace"时，**所有 workspace 相关的设置都会被添加到当前工作区对应的 `.code-workspace` 文**件中。
>
> 同时，当前工作区下的各个项目根目录的配置将会被额外地独立显示，并附带"**Folder**"标识，如下所示：
>
> 
>
> **每个项目根目录下的`settings.json` 中的配置将覆盖 `.code-workspace` 中定义的设置。**
- `"extentions"`：同单独的 `extention.json` 文件中的配置， 作用域为 "**当前工作区**"下。
> 项目根目录下的`./vscode/extention.json` 文件中的配置**优先级更高**，不会被工作区的覆盖。
`<name>.code-workspace`文件示例：
```json
{
"folders": [
{
"name": "ProjectOne",
"path": "path/to/your/first/project"
},
{
"name": "ProjectTwo",
"path": "path/to/your/second/projcet"
},
],
// similar to `settings.json`
"settings": {
"editor.tabSize": 4,
// 其他工作区特定设置
},
// similar to `tasks.json`
"tasks": {
"version": "2.0.0",
"tasks": [
{
"label": "Build ProjectOne",
"type": "shell",
"command": "npm",
"args": [
"run",
"build"
],
"options": {
"cwd": "${workspaceFolder:ProjectOne}"
}
},
{
"label": "Test ProjectTwo",
"type": "shell",
"command": "npm",
"args": [
"test"
],
"options": {
"cwd": "${workspaceFolder:ProjectTwo}"
}
}
]
},
// similar to `launch.json`
"launch": {
"configurations": [
{
"name": "Debug ProjectOne",
"type": "node",
"request": "launch",
"program": "${workspaceFolder:ProjectOne}/app.js"
},
{
"name": "Debug ProjectTwo",
"type": "node",
"request": "launch",
"program": "${workspaceFolder:ProjectTwo}/app.js"
}
],
"compounds": [
{
"name": "Debug All Projects",
"configurations": ["Debug ProjectOne", "Debug ProjectTwo"]
}
]
},
// similar to `extention.json`
"extentions": {
"recommendations": [
"ms-vscode.cpptools-extension-pack",
"usernamehw.errorlens",
"ccagml.vscode-leetcode-problem-rating",
"llvm-vs-code-extensions.vscode-clangd"
]
}
}
```
#### 多根工作区的作用
参见[^工作区指南]
- **便捷地在同一个 VSCode 窗口中处理多个项目**
> 这些项目无需存储在磁盘上的同一父文件夹中，可以从任何地方选择文件夹添加到工作区。
- 为**多个项目采用同一套工作区配置**
> 工作区配置将覆盖全局用户设置，但不会覆盖各个项目目录下的设置）。
- 为**单个项目设置多个不同的工作区配置**
> 可以为单个项目文件夹保存多个 `.code-workspace` 文件来提供"项目中特定范围内的文件夹视图"，即只在VSCode中**显示项目根目录下的指定文件夹**，而过滤掉其它文件夹。
> 例如，两份 `client.code-workspace` 和 `server.code-workspace` 分别用于在VSCode Explore中过滤掉/隐藏不相关的文件夹。
- **处理多个插件之间的应用冲突**
> 不同项目之间可能需要使用不同插件，且这些插件彼此之间存在冲突，这时就需要通过工作区来为配置相应插件，避免冲突。
>
> 例如，在vscode中 vue2用的插件是Vetur，vue3用的插件是 Volar，电脑上即有基于vue2的老项目也有基于vue3的新项目，Vetur和Volar这两个插件就会冲突。
>
> 为此，可以**在一个工作区中禁用掉某些插件**（**仅对该工作区有效**，不影响其它工作区和全局配置），从而避免冲突。
>
> [!NOTE] 基于多根工作区避免插件冲突
>
> 推荐设置：
> **全局上只启用某些公用的插件**，其它针对性插件**保持全局"Disable"**，而**仅在需要用到的工作区中设置为 "Enable（Workspace）**"
>
> Ps：插件的使用情况（`Enable/Disable`） 不会记录在工作区对应的 `<name>.code-workspace` 文件中，只能在插件面板中查看。如下：
>
> 
>
> 
<br><br><br>
# VSCode IntelliSense 功能
智能感知[^3]（IntelliSense，也称 "Code Hinting"）
IntelliSense 是多种代码编辑功能的总称，主要包括：
- 代码补全（Code Completion）
- language server suggestions
- snippets
- simple word based textual completions
- 参数信息（Parameter Info）
- 快速信息（Quick Info）
- 成员列表（member lists）
VS Code 中的智能感知功能（IntelliSense features）由语言服务（language service）提供支持。语言服务提供**基于语言语义**和**源代码分析**的**智能代码补全**。
> [!info]
> VSCode本身为 `JavaScript`、`TypeScript`、`JSON`、`HTML`、`CSS`、`SCSS` 提供了开箱即用的IntelliSense功能。
>
> 对于其它编程语言，如`Python`、`C/C++`、`C#`、`Java`、`Go` 等，需要**安装相应的官方插件**，这些**官方插件提供了对应于语言的IntelliSense功能，以及其它的诸如代码高亮等功能**。
#### 智能补全图标含义
<br><br><br>
# VSCode 代码导航功能
VSCode 提供了代码导航功能（Code Navigation）[^4]， **包括**：
- **快速导航**：搜索文件或符号，并导航跳转到对应其位置
- **Breadcrumb导航栏**：提供当前文件路径中各层目录及其同级文件，以及当前文件内各代码层级间的跳转。
- **Peek 预览窗口**：提供对**符号定义或引用处**代码的**上下文快速预览以及编辑功能**，
- **转到定义**：提供对符号的声明/定义的悬停缩略预览，以及**跳转导航**
- **代码动作**：提供对警告和错误信息的操作建议或快速修复，以灯泡图标显示
### 快速导航（Quick Navigation）
快捷键 `Ctrl+P` 弹出"快速导航"面板，可搜索 **文件** 或 **符号** 并导航跳转到其位置。
#### 符号搜索（Search for Symbols）
对符号进行快速搜索及位置导航。有两种方式：
- 使用快速打开（`Ctrl+P`）：
- 键入 **“@” 在当前文件中**搜索符号；
- 键入 **“#” 命令在当前工作区**中搜索符号。
- 直接使用快捷键：
- `Ctrl+Shift+O`：“@”的快捷键，在**当前文件**中搜索
- `Ctrl+T`：“#”的快捷键，在**当前工作区**中搜索
### Breadcrumb 导航栏
编辑器的内容上方有一个导航栏，名为 breadcrumb。
该导航栏会显示 "**当前文件完整路径** 中的 **各层级目录**"，以及 "**当前文件内的代码层级**" ，支持在 **文件夹、文件和符号** 之间快速导航。
点击导航栏路径中的各**层级项**，将会显示**该项的同级目录中的内容**，也可进行导航。
> [!example]
>
> - 文件夹的同级目录
>
> 
>
> - 文件的同级目录
>
> 
>
> - 当前文件内的符号层级
>
> 
>
>
>
>
<br>
### 预览窗口 Peek
VSCode 提供了一个**Peek预览浮窗**，能够 **为光标所在处的符号**（类、函数等）提供对其**定义或实现代码** 的 **上下文快速预览及编辑**功能，同时支持在浮窗内双击左键从而跳转到对应位置。
触发Peek窗口的方式：
- 快捷键 `Alt + F12`（**Peek Definition**）；或右键菜单栏，选择 `Peek` 功能栏 <br> 
- 快捷键 `Shift + F12`（**Go to References**）；或右键菜单栏，选择对应功能。 <br> 
当出现定义冲突例如重载函数（competing definitions）时，或存在多个引用时，所有不同的定义/引用将在预览窗口右侧列出：
### 转到定义 (Go to Definition)
该功能需要对应的语言支持（语言插件提供支持）。
包含功能如下：
- **悬停预览**（Quick Info）<br>按住 `Ctrl` 并将**光标悬停在一个符号处**时，内联浮窗将**预览显示其缩略声明或定义**信息。
- **跳转导航**：跳转到符号**定义或实现处**。
> [!tip] 跳转导航的几种触发方式
>
> - **`Ctrl` + 左键单击符号**：直接跳转
> - `Ctrl + Alt` + 左键单击符号**：在一侧的**新分栏窗口中**打开并跳转
> >
> - 右键单击符号，菜单栏中提供了跳转导航：<br> 
> >
> - 等价快捷键：`F12` / `Ctrl+F12` <br>  <br> 
<br>
### 代码动作 Code Actions
代码动作（Code Actions），也称快速修复（Quick fixes）。
提供对警告和错误信息的**操作建议或快速修复**，以**灯泡图标**显示
<br><br><br>
# VSCode Debugging 功能
VSCode 提供了调试功能[^5]。
VSCode 内置调试器（Built-in Debugger）提供了对 `Node.js` 运行时的调试支持，
可以**调试 JavaScript、TypeScript 或任何其他被编译成 JavaScript 的语言**。
对于其它语言（如`Python`、`C/C++`、`C#`、`Java`、`Go` 等），需要安装相应的**官方插件**，这些**官方插件提供了对应于语言的调试功能**。
### 运行 / 调试
VSCode 支持以 **运行**（Run） 和 **调试**（Debug）两种方式启动程序。
- `Start Debugging (F5)` ：**启动并调试程序**
- `Run (Start Without Debugging) (Ctrl+F5)`：**仅运行程序，不调试**
> [!info] 调试模式的 UI 按钮
>
> - `RUN AND DEBUG` 视窗上的**三角运行按钮**：
> 
> >
> - 文件标签页右侧三角按钮旁的 `Debug ... File` 选项
> 
>
> [!info] 运行模式的 UI 按钮
> 文件标签页右侧**三角按钮**本身，以及旁边的 `Run ... File` 选项。
> 
>
### 启动配置文件
启动配置文件为 `launch.json`，存放于工作区目录（项目根目录）的`.vscode/` 子目录下。
在该文件中可定义多个 **启动配置项**（Launch Configuration），这些**自定义配置项**将显示在**配置栏**中。
启动 **调试会话** 或 **直接运行程序** 时，需要选择某一启动配置项来运行。
> [!example]
> `launch.json` 配置文件内容：
>
> 
>
> 启动配置项选择：
>
> 
#### 配置属性
必备属性
- `name`：该启动配置项的名称。
- `type`：调试器类型。VSCode内置的调试器类型是 `node`。其它语言则**由对应插件指定**，参见插件文档。
- `request`： 请求类型，`launch` 或 `attach`。
部分可选属性：
- `preLaunchTask`：在调试会话启动前**所需执行的任务**。该属性的值对应于 `tasks.json` 文件中定义的任务的`label` 属性。
- `postDebugTask`：在调试会话结束时**所需执行的任务**。该属性的值对应于 `tasks.json` 文件中定义的任务的`label` 属性。
- `internalConsoleOptions` ：DEBUG CONSOLE 面板在调试会话期间是否可见。
许多调试器支持的属性（不同调试器中的具体属性名可能不同）：
- `program`：启动调试时，所需运行的可执行文件的路径。
- `args`：传递给程序的参数
- `environment`：环境变量
- `cwd`：当前工作目录（用于查找依赖项或其它文件，一般设置为`${workspaceFolder}`）
- `port`：连接端口（需要连接到正在运行的进程时指定）
- `stopOnEntry`：程序启动后立即触发中断
平台特定属性（只在特定OS上生效）：
- `windows`、`linux`、`osx`（macOS）
### 两种调试模式
VSCode 提供了两种调试模式：
- `launch` 模式：以 `Debug` 模式启动并运行一个程序
- `Attach` 模式：将VSCode 调试器连接到一个已经在运行中的程序
### `RUN AND DEBUG` 视窗
VSCode 窗口左侧的 `RUN AND DEBUG` 视图显示了与**运行和调试**相关的所有信息。
- 顶部栏中包含**启动调试按钮**（`Start Debugging(F5)`）和 **Configuration项**
- 点击 **齿轮图标** 将打开 **调试配置文件** `.vscode/launch.json` 。
- 视图中包含 `VARIABLES` 、`WATCH`、`CALL STACK`、`BREAKPOINTS` 四个窗口栏，分别显示**当前变量**、**追踪变量**、**调用栈**、**调试断点** 信息。<br> 
- `BREAKPOINTS` 窗口栏中，可**细粒度**控制断点 (enable/disable/reapply)。<br> 
- VSCode 底部的 `DEBUG CONSOLE` 面板中会显示**调试相关输出**。<br> 
### "调试断点"与"日志点"
编辑器左侧行号之前，左键单击可添加调试 **断点（Breakpoint）**。
右键点击，弹出选项中可添加 **条件断点** 和 **日志点**：
- **==添加断点==**：<br> 
- **==断点编辑==**，包含 `Expression`、`Hit Count`、`Log Message` 三种选项：<br> 
- 条件断点的图标：<br> 
#### 断点类型
- **==断点==**（显示为**红色圆圈**，被禁用时为灰色圆圈）<br>调试过程中，当程序运行到断点所在的代码行（未执行）时，将会触发"中断"。
- **==条件断点==**（显示为**红色非实心圆圈**，被禁用时为灰色圆圈）
- `Expression`： 当表达式求值为true时，将触发**断点**。
- `Hit Count`：指定断点需要被 `hit `多少次才会 **触发“中断”**。
- **==日志点==**（显示为**红色菱形**，被禁用时为灰色菱形）<br>日志点是断点的一种变体，**不会“中断”到调试器**，而是**将一条消息输出到 DEBUG CONSOLE**。对应上图中的 `Log Message` 选项。<br>日志点对于在调试无法暂停或停止的生产服务器时注入日志记录特别有用。
<br><br><br>
# VSCode Tasks 任务
> 许多独立工具提供了代码检查（linting）、构建（building）、打包（packaging）、测试（testing）或软件系统部署（deploying software）等功能，这些工具大多**从命令行运行**，因此也可被 VSCode 调用。
VSCode 中的任务（tasks）提供了 **运行脚本或启动进程** 的功能[^6]，
可通过设置"任务"来快捷 **启用外部工具** 而无需再输入命令行或编写代码。
VSCode中的任务**默认为 "Workspace" 作用域**，在工作空间目录下的 `.vscode/tasks.json` 文件中进行定义。
可通过 `Tasks: Open User Tasks` 命令创建**用户级任务**，但只能是 `shell` 或 `process` 类型的任务。
### 任务配置文件
任务配置文件为 `tasks.json`，存放于工作空间目录下的 `.vscode` 目录中。
#### 相关属性
参见[^7]
##### 基本任务配置
- `label`：任务标签，也即**任务名**（自定义）。 `launch.json` 中将通过**该属性值来指定对应的任务**。
- `type`：任务类型。
- 如果为 `shell`，则命令将被解释为shell命令，在一个shell（bash, cmd 或 PowerShell）中执行。
- 如果为 `process`，则命令被解释为需要执行的程序。
- 也可以是其它选项，**由VSCode插件提供的**。
- `isBackgroud`：是否为后台任务，在后台执行（可选）
- `command`：需要被执行的具体命令。
- `args`：命令参数（可选）
- `options`：命令选项（可选）
- `windows`：指定Windows系统特定的任务配置。当在Windows系统上执行时，其中指定的属性值将覆盖该任务的默认设置。
- `linux`：指定Linux系统特定的任务配置。
- `osx`：指定macOS系统特定的任务配置
- `presentation` ：定义如何在用户界面中处理任务输出。集成终端面板中运行任务时的行为
- `group`：定义任务所属的组。同一组的任务可在命令面板中通过 `Run <gourp> Task` 命令一同执行。
- `problemMatcher`：指定问题匹配器。
##### 组合任务配置：
- `depentsOn`：指定多个已有任务（JSON数组），这些任务**默认将被并行执行**.
- `"dependsOrder": "sequence"`：指定时，`depentsOn`中列出的任务**将按顺序依次执行**。
**输出行为**：
通过在 `presentation` 属性中设置下列子属性来控制**任务执行时** VSCode集成终端面板（Intergrated Terminal Panel）的行为。
- `reveal`：运行任务时是否自动在前台显示 **集成终端面板** <br>可选值：`always`（默认）；`never` ； `silent`：仅当输出不包含错误和警告时显示终端面板。
- `revealProblems`：运行任务时是否自动在前台显示 **问题面板**（该选项优先级高于 `reveal`）。<br>可选值：`always`； `never` （默认）；`onProblem`：仅在发现问题时显示问题面板。
- `focus`：终端面板是否被聚焦，默认`false`。
- `echo`：是否在终端中回显执行的命令，默认`true`。
- `showReuseMessage`：是否显示“终端将被任务重用，按任意键关闭它”消息。
- `panel`：**终端实例**是否在运行多个任务时共享，可选值为：
- `shared` ：终端共享，其他任务运行的输出被添加到同一终端。
- `dedicated` ：终端专用于特定任务，如果再次执行该任务，则重用终端。不同任务的输出将显示在不同终端实例中。
- `new` ：每次执行任务都启用新的终端实例。
- `clear`：执行此任务前是否清除终端内容，默认 `false`。
- `close`：任务退出时，其所在的终端是否关闭，默认`false`。
- `group`：是否让同一组中的任务将在**同一个终端面板中**通过**不同分栏**显示。<br> 
示例："命令" 及 "命令参数"
```c++
{
"label": "dir",
"type": "shell",
"command": "dir 'folder with spaces'"
}
//或
{
"label": "dir",
"type": "shell",
"command": "dir",
"args": ["folder with spaces"]
}
```
示例：系统特定的任务属性：
```json
{
"label": "Run Node",
"type": "process",
"windows": {
"command": "C:\\Program Files\\nodejs\\node.exe"
},
"linux": {
"command": "/usr/bin/node"
}
}
```
示例：**组合任务**
```json
// 示例一: 任务`Build`将并行执行`Client Build` 以及 `Server Build`两个任务.
{
"version": "2.0.0",
"tasks": [
{
"label": "Client Build",
"command": "gulp",
"args": ["build"],
"options": {
"cwd": "${workspaceFolder}/client"
}
},
{
"label": "Server Build",
"command": "gulp",
"args": ["build"],
"options": {
"cwd": "${workspaceFolder}/server"
}
},
{
"label": "Build",
"dependsOn": ["Client Build", "Server Build"]
}
]
}
// 示例二: 下列任务将按顺序依次执行, 先执行Two, Three, 最后执行One.
{
"label": "One",
"type": "shell",
"command": "echo Hello ",
"dependsOrder": "sequence",
"dependsOn": ["Two", "Three"]
}
```
示例：定义全局属性
```json
{
"version": "2.0.0",
"presentation": { // 设置为全局属性, 所有任务在执行时都启用新的终端实例.
"panel": "new"
},
"tasks": [
{
"label": "TS - Compile current file",
"type": "shell",
"command": "tsc ${file}",
"problemMatcher": ["$tsc"]
}
]
}
```
### 任务相关菜单栏
VSCode 菜单栏中的 `Terminal` 为任务相关的选项，包括
- `Run Build Task`： 执行构建任务，同快捷键 `Ctrl+Shilft+B`。<br>将弹出 **任务选择面板**，选择**所要执行的构建任务**
- `Configure Tasks` ：打开 `tasks.json`文件并**自动跳转、选中相应任务项**。
`Run Build Task`
`Configure Task`：
### 任务相关命令
在命令面板中输入`Tasks`，可见任务相关的命令项：
<br><br><br>
# VSCode 内置变量
VS Code 将常用的路径和其他值定义为了**内置变量**，支持在 `launch.json` 以及 `tasks.json` 文件中使用 `${variableName}` 进行**变量值引用** 。[^8]
常用的内置变量：
- `${userHome}`： 用户家目录
- `${workspaceFolder}`：工作空间目录，即项目根目录
- `${file}`：当前打开的文件（文件的**完整路径名**）
- `${fileBasename}`：当前打开文件的文件名
- `${fileDirname}`：当前打开文件所在的目录路径
- `${fileExtname}`：当前打开文件的扩展名
- `${cwd}`： VSCode启动时的当前工作目录
- `${env:Name}` ：名为 `Name` 的系统环境变量
> [!example] 变量说明示例
> 
<br><br><br>
# VSCode Snippets
参见官方文档[^9]、两份博客[^10] [^11]
> [!tip] snippet 生成器（为给定代码段自动生成相应的 snippet）
>
> [snippet generator](https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode)
#### 自定义 snippets 配置文件
打开自定义 snippets 配置文件（三种方式）：
- **命令面板**：`Snippets: Configure User Snippets`
- **左下角齿轮图标**：`User Snippets`
- **菜单栏**：`File->Preferences->Configure User Snippets`
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-01DC9466D93A532E02F37FD261F5D8F9.png|496]]
#### Snippets 作用域
三种作用域：
- **全局**
- 配置文件为 `%APPDATA%/Code/User/Snippets/xxx.code-snippets` 文件，其中 `xxx` 为自定义名）
- **项目特定**
- 配置文件为项目工作区下 `.vscode/xxx.code-snippets` 文件，其中 `xxx` 为自定义名
- **语言特定**
- 配置文件为 `%APPDATA%/Code/User/Snippets/xxx.code-snippets` 文件，其中 `xxx` 为语言标识，例如 `cpp.json`、`c.json` 等
**不同作用域的 snippets 需要定义在不同文件中**，如下图所示：
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-D923E5207F59B26BC5F0DF6451311908.png|498]]
<br><br><br>
# VSCode 集成的 Git 支持
功能说明介绍参见官方文档[^12]，详细使用说明 [^13]
主要功能包括：
- 提供了一个 **左侧 "SOURCE CONTROL" 视窗**
- 点击相关按钮，可**执行 Git 操作**
- 点击左侧视窗下文件，将**显示 `diff` 对比**
- 提供了一个 **底部状态栏**，显示 "**当前分支**"，点击可**切换/创建分支**。
- Git 相关的 VSCode 命令。
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-5859D891A3DC8F72CE544B018988E782.png|889]]
### 使用说明
- 支持在 VSCode 内直接 `git clone` 项目，将弹窗指定**项目目录路径**
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-4CFB9E876E9F719B076C6DEB2DBFF209.png|504]]
- 三路合并编辑器：可以看到 **Current、Incomming change、Merge Result**，还可以显示 **Base（两个提交的最近公共祖先**）
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-DE3053E028030EF3A891980F00965444.png|787]]
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-3F7935A12928182942F0F0DF355E9362.png|781]]
- TIMELINE 视窗——查看一个文件**在当前分支上的==变更历史==**（每项对应一个提交）
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-1E0F2FA1349710C4CD3A5545B17EB43B.png|299]]
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-13148EC96F813186F7A1D30401EF1190.png|588]]
<br><br><br>
# VSCode 快捷键绑定
> - 快捷键（Keyboard Shortcuts）
> - 快捷键绑定（Key Bindings）
VSCode 中的 "快捷键" 实质是将 "**特定按键**" 绑定到 **特定命令**——**这些命令即是 VSCode 所提供的种种功能，均==可通过 VSCode 命令面板输入命令名来执行==**
VSCode 中提供了 "**快捷键编辑器**" 面板可供**查看、修改快捷键绑定**，
**在该面板中所指定的不同于 "默认快捷键" 的设置**都将**自动保存**到 "**==用户快捷键配置文件==**" 中。
VSCode 命令面板中提供了三项命令，可供打开"**快捷键编辑器面板**" 或 "**快捷键配置文件**"：
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-7A87706B187A9188C56A81D5ACDC50AD.png|606]]
### 快捷键配置文件
- **默认快捷键配置文件（只读）**：`keybindings.json`，只能在 VSCode 内通过命令面板打开
- **用户快捷键配置文件**：
- Windows 下路径：`%APPDATA%/Code/User/keybindings.json`
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-4869A84C9231FA4165CF058331E56B40.png|518]]
上述文件中保存的是 "**VSCode 内置默认快捷键**" 以及 "**用户自定义快捷键**"，而由**插件提供的默认快捷键设置**位于**插件的 "package.json" 文件**中。
### 快捷键编辑器
> 可通过**命令面板**，**菜单栏 `File->Preference->Keyboard Shortcuts`** 或 **快捷键 `<Ctrl-K><Ctrl-S>`** 打开。
该面板下**支持 "==增删改查==" 快捷键配置项**，所做修改将自动保存到 "**用户快捷键配置文件**" 中。
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-91983810CEADF211B5138BC8086EDA62.png|833]]
右上角菜单栏中，可过滤查看 "**VSCode 内置快捷键**"、"**插件提供的快捷键**"、"**用户自定义快捷键**"：
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-B09ED90EB5576BA81DF87F3EE6DC2002.png|836]]
> [!caution] 该面板中的 "Keybigding" 一列中**按键**均显示为 "**==大小字母==**"，但**并不表示 "大写 (`Shift-Key`)"**，**仅表示单个按键本身**
>
> ![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-B0DBA8E683F1DB9F1C6C87C71F250229.png|719]]
>
> 如上图，第二项按键就是 `gg`，第一项则是 `G`（按住`shift` + `g`）
>
<br>
### 查看快捷键冲突
> 参见 [^14]
- 方式一：在快捷键编辑器中 "**选中某项快捷键设置**" => 查看相同/冲突的配置项
- 方式二：在快捷键编辑器的**搜索框中开启 "按键记录"** => 按下快捷键，查看相同/冲突的配置项
- 方式三：命令面板中执行 "`Developer: Toggle Keyboard Shortcuts Troubleshooting`"，开启**按键日志记录**，按键快捷键，**查看日志显示**
###### 方式一&二
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-13EBC722D4EBF3DA74B50EB767CF639B.png|643]]
###### 方式三
### 修改快捷键设置
- 方式一：通过**快捷键编译器**修改
- 方式二：通过**直接编辑 "用户快捷键配置文件 `keybindings.json`"** 修改
###### 方式二
### 内置快捷键说明
参见 [[19-快捷键汇总/Vscode 快捷键|Vscode 快捷键]]
<br><br><br>
# VSCode 使用 Tips
参见[^15] [^16]
#### 比较任意两个文件——通过 diff view 视窗
方式一： ![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-6BE9DDAEBDAD73BEF726B16BBB083188.png|633]]
方式二：
![[_attachment/05-工具/VSCode/VSCode 说明.assets/IMG-VSCode 说明-B5C3EAB25C475888EB47D3827C1B789A.png|633]]
方式三：命令行启动 VSCode，比较两个文件—— `code --diff file1 file2`
<br><br><br>
# 彻底删除 VSCode 的方法
1. 卸载 VSCode
2. 删除 VSCode 插件：`C:\Users\DHDouglas\. vscode`，删除 `. vscode` 文件夹
3. 删除个人数据的缓存信息：`C:\Users\DHDouglas\AppData\Roaming\Code`，删除该 `Code` 文件夹
> 
<br><br>
<br><br>
# FAQ
#### ❓VSCode 内置终端无法识别 PATH 环境变量下的新增路径
问题描述：在 PATH 环境变量中新增路径后，VSCode 内置终端无法识别
解决办法：重启电脑。
# 参考
[VSCode工作区指南：回归轻量，打造全能编辑器](https://juejin.cn/post/7066032710778617892)
[第一次使用VS CODE时你应该指导的一切配置 | 夜法之书](https://blog.17lai.site/posts/44557ab0/#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5)
# Footnotes
[^1]: [User and Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings)
[^2]: [Workspaces in Visual Studio Code](https://code.visualstudio.com/docs/editor/workspaces)
[^3]: [VScode IntelliSense](https://code.visualstudio.com/docs/editor/intellisense)
[^4]: [VSCode Code Navigation](https://code.visualstudio.com/docs/editor/editingevolved#_errors-warnings)
[^5]: [Debugging]( https://code.visualstudio.com/docs/editor/debugging)
[^6]: [Integrate with External Tools via Tasks](https://code.visualstudio.com/docs/editor/tasks)
[^7]: [tasks.json Schema](https://code.visualstudio.com/docs/editor/tasks-appendix)
[^8]: [Variables Reference](https://code.visualstudio.com/docs/editor/variables-reference)
[^9]: [Snippets in Visual Studio Code](https://code.visualstudio.com/docs/editor/userdefinedsnippets)
[^10]: [VSCode 利用 Snippets 设置超实用的代码块 - 掘金](https://juejin.cn/post/6844903869424599053)
[^11]: [VS Code 代码片段完全入门指南](https://www.freecodecamp.org/chinese/news/definitive-guide-to-snippets-visual-studio-code/)
[^12]: [Source Control with Git in Visual Studio Code](https://code.visualstudio.com/docs/sourcecontrol/overview)
[^13]: [Introduction to Git in Visual Studio Code](https://code.visualstudio.com/docs/sourcecontrol/intro-to-git)
[^14]: [Visual Studio Code Key Bindings](https://code.visualstudio.com/docs/getstarted/keybindings#_customize-shortcuts-for-ui-actions)
[^15]: [Basic Editing in Visual Studio Code](https://code.visualstudio.com/docs/editor/codebasics)
[^16]: [Visual Studio Code Tips and Tricks](https://code.visualstudio.com/docs/getstarted/tips-and-tricks)