VS Code 从 0 到 1 完全教程

前言

欢迎来到 VS Code 的世界。

如果你是一名开发者------无论你是刚写第一行代码的新手，还是已经用过其他编辑器的老手------Visual Studio Code（简称 VS Code）都是你值得认真学习的工具。

为什么是 VS Code？

维度	说明
免费开源	完全免费，由微软维护，GitHub 开源
跨平台	Windows、macOS、Linux 全支持
轻量快速	启动快、内存占用合理，老电脑也能流畅运行
扩展生态	全球最大的编辑器扩展市场，任何语言/工具都能找到支持
内置 Git	图形化 Git 操作，告别命令行恐惧
智能提示	强大的 IntelliSense 代码补全
调试集成	无需离开编辑器就能断点调试

本教程的目标是：从零开始，带你掌握 VS Code 的核心使用场景，并建立一套高效的开发环境。

你会学到：

✅ 安装与首日配置（主题、字体、中文）
✅ 核心编辑操作与快捷键（多光标、批量编辑）
✅ 扩展生态与必装推荐
✅ 集成终端与 Git 可视化
✅ 调试配置与任务系统
✅ 个性化定制（settings.json、代码片段、工作区）

对于更深度的内容（如特定语言的调试配置、复杂 tasks.json 编写），附录中会提供学习资源链接，供你按需进阶。

现在，让我们开始吧。

第一部分：入门与首日配置

1. VS Code 是什么？

1.1 编辑器 vs IDE

在正式使用之前，先理清一个概念：VS Code 是一个编辑器，而不是 IDE（集成开发环境）。

类型	代表产品	特点
编辑器	VS Code、Sublime Text、Vim	轻量、快速、通过扩展增强功能
IDE	Visual Studio、PyCharm、Eclipse	开箱即用功能全面、但体积大、启动慢

VS Code 的独特之处在于：它本身只是一个轻量编辑器，但通过扩展，可以变成近乎 IDE 的强大工具。

💡 你可以这样理解：VS Code 是一套精装修的毛坯房------基础结构很好，但家具（扩展）要你自己选配。

1.2 VS Code 的核心优势

优势	说明
启动速度	冷启动 1-2 秒，热启动几乎瞬间
内存占用	空载约 200-300MB，比 IDE 轻量很多
扩展市场	超过 5 万个扩展，覆盖所有主流语言和工具
内置功能	Git 集成、终端、调试器、任务系统，无需额外安装
持续更新	微软每月发布一次更新，新功能不断
远程开发	通过 Remote 扩展，可以开发 Docker 容器、WSL、SSH 服务器上的代码

1.3 谁在用 VS Code？

根据 Stack Overflow 年度开发者调查，VS Code 连续多年稳居最受欢迎开发者工具第一名，使用率超过 70%。

前端开发者：React、Vue、Angular 项目的第一选择
Python 开发者：轻量级 Python 开发，配合扩展不输 PyCharm
Go/Rust 开发者：官方扩展质量极高
数据科学家：Jupyter 扩展支持 .ipynb
DevOps 工程师：YAML、Docker、Kubernetes 扩展完善

2. 下载与安装

2.1 下载

访问 VS Code 官网：code.visualstudio.com

点击首页的蓝色按钮 Download for Windows/Mac/Linux，系统会自动识别你的操作系统并提供对应版本。

各平台版本说明：

平台	推荐版本	说明
Windows	User Installer（用户安装版）	不需要管理员权限，推荐
macOS	Intel Chip 或 Apple Silicon	根据 Mac 芯片选择
Linux	.deb（Debian/Ubuntu）或 .rpm（Fedora/RHEL）	也可用 Snap/Flatpak

2.2 安装

Windows 安装步骤：

双击下载的 .exe 文件
同意许可协议
选择安装路径（默认即可）
重要：在"选择附加任务"页面，建议勾选以下选项：
- ✅ 添加到 PATH（重启后可在终端使用 code 命令）
- ✅ 将"通过 Code 打开"添加到右键菜单
- ✅ 注册为受支持的文件类型的编辑器
点击"安装"，等待完成

macOS 安装步骤：

打开下载的 .zip 文件
将 Visual Studio Code.app 拖拽到 Applications 文件夹
首次打开时，可能需要右键点击"打开"并确认信任
（可选）打开 VS Code，按 Cmd+Shift+P，输入 shell command，选择 Install 'code' command in PATH

Linux (Ubuntu/Debian) 安装步骤：

bash 复制代码

# 方法一：通过 .deb 包
sudo dpkg -i code_*.deb
sudo apt-get install -f

# 方法二：通过官方仓库（推荐，自动更新）
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg
sudo sh -c 'echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update
sudo apt install code

2.3 验证安装

安装完成后，启动 VS Code。你应该能看到类似这样的欢迎界面：

📷 VS Code 首次启动的欢迎界面

图片说明：欢迎界面包含"开始"、"最近"、"帮助"等板块，底部有"设置同步"选项。

3. 界面布局初识

打开 VS Code 后，我们先熟悉一下整体界面布局。这是你未来每天都在使用的环境。

复制代码

┌─────────────────────────────────────────────────────────────────────────┐
│  活动栏   │                    编辑器区域                                  │
│  ┌─────┐ │  ┌─────────────────────────────────────────────────────┐     │
│  │ 📁  │ │  │  标签页栏（文件名标签）                                │      │
│  ├─────┤ │  ├─────────────────────────────────────────────────────┤   │
│  │ 🔍  │ │  │                                                     │   │
│  ├─────┤ │  │                                                     │   │
│  │ 🧩  │ │  │               代码编辑区                             │   │
│  ├─────┤ │  │                                                     │   │
│  │ 🐛  │ │  │                                                     │   │
│  ├─────┤ │  ├─────────────────────────────────────────────────────┤   │
│  │ 🔌  │ │  │  缩略图/滚动条（右侧）                               │   │
│  └─────┘ │  └─────────────────────────────────────────────────────┘   │
│          │                                                             │
│  侧边栏   │                                                             │
│  （当前   │                                                             │
│   激活的  │                                                             │
│   视图）  │                                                             │
└──────────┴─────────────────────────────────────────────────────────────┘
│  状态栏（底部）                                                           │
│  Git 分支 │ 错误/警告数 │ 光标位置 │ 制表符大小 │ 编码 │ 语言模式 │  👍  │
└─────────────────────────────────────────────────────────────────────────┘

3.1 活动栏（Activity Bar）

位于最左侧的竖排图标栏，是 VS Code 的核心导航入口。

图标	名称	功能	快捷键
📁	资源管理器	浏览文件和文件夹	`Ctrl+Shift+E`
🔍	搜索	全局搜索和替换	`Ctrl+Shift+F`
🧩	扩展	管理扩展市场	`Ctrl+Shift+X`
🐛	运行和调试	调试配置与控制	`Ctrl+Shift+D`
🔌	源代码管理	Git 操作	`Ctrl+Shift+G`
⚙️	远程资源管理器	远程开发（需安装扩展）	-

3.2 侧边栏（Side Bar）

点击活动栏的图标后，这里会显示对应的内容面板。例如：

点击 📁 资源管理器 → 显示文件和文件夹树
点击 🔍 搜索 → 显示搜索输入框和结果
点击 🧩 扩展 → 显示扩展商店和已安装列表

3.3 编辑器区域（Editor Area）

这是你写代码的主要区域。

核心特性：

多标签页：打开多个文件，通过标签页切换
分屏编辑 ：将一个编辑器拆分为多个（Ctrl+\）
缩略图：右侧的代码小地图，快速定位
面包屑导航：编辑器顶部的路径导航，点击可快速跳转

3.4 面板区（Panel）

位于编辑器下方的区域，默认折叠。包含以下标签页：

标签	功能	快捷键
问题	显示代码错误和警告（来自 ESLint、Pylint 等）	`Ctrl+Shift+M`
输出	显示扩展和 VS Code 的日志	-
终端	集成终端（命令行）	`Ctrl+` `
调试控制台	调试时显示输出	-

💡 技巧：按 Ctrl+J 可以快速显示/隐藏面板区。

3.5 状态栏（Status Bar）

底部的蓝色/灰色横条，显示当前环境信息（从左到右）：

区域	显示内容	点击效果
左侧	Git 分支名	切换分支
左侧第二个	错误/警告数量	跳转到"问题"面板
中部	光标位置（行号:列号）	-
中部	缩进设置（如 Spaces: 4）	修改缩进
中部	编码格式（如 UTF-8）	修改编码
右侧	语言模式（如 Python）	切换语言
最右侧	通知按钮	查看通知

4. 首日必做配置

第一次启动 VS Code，强烈建议先完成以下配置。这会让你后续的使用体验提升一个档次。

4.1 设置中文界面

VS Code 默认是英文界面，但官方提供了中文语言包。

操作步骤：

点击活动栏的 扩展图标 🧩（或按 Ctrl+Shift+X）
在搜索框中输入 Chinese
找到 Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
点击 Install 安装
安装完成后，右下角会弹出提示 "Would you like to change VS Code's display language to 简体中文?"
点击 Yes，VS Code 会自动重启，界面变为中文

💡 如果没有弹出提示，可以按 Ctrl+Shift+P 打开命令面板，输入 Configure Display Language，手动选择 zh-cn。

4.2 选择主题（配色方案）

VS Code 内置了多种主题，选择一个你看着舒服的。

操作步骤：

按 Ctrl+K 然后按 Ctrl+T（或者：文件 → 首选项 → 主题 → 颜色主题）
用上下箭头浏览主题，实时预览效果
按回车确认选择

推荐内置主题：

主题名称	特点	适合人群
Dark+ (default dark)	默认深色主题，对比度适中	大多数人，长时间编码
Light+ (default light)	默认浅色主题	明亮环境下使用
Quiet Light	柔和浅色	喜欢浅色但不喜欢刺眼
Solarized Dark	护眼绿色调	追求低对比度护眼
Tomorrow Night Blue	蓝色调深色	喜欢冷色调

推荐第三方主题（需从扩展市场安装）：

主题名称	安装量	特点
One Dark Pro	1000万+	Atom 经典主题
Dracula Official	500万+	紫色调，非常流行
GitHub Theme	300万+	还原 GitHub 的配色
Material Theme	200万+	Google Material Design 风格

4.3 设置字体

好的编程字体能让代码更易读，减轻视觉疲劳。

操作步骤：

按 Ctrl+, 打开设置（或：文件 → 首选项 → 设置）
在搜索框中输入 font family
修改 Editor: Font Family 的值

推荐编程字体：

字体名称	特点	下载地址
Fira Code	支持连字（ligatures），`!=` 显示为 `≠`	github.com/tonsky/FiraCode
JetBrains Mono	JetBrains 出品，清晰优雅	jetbrains.com/mono
Cascadia Code	微软官方，Windows Terminal 默认字体	github.com/microsoft/cascadia-code
Monaco	macOS 经典字体	系统自带
Consolas	Windows 经典字体	系统自带

推荐配置（以 Fira Code 为例）：

复制代码

'Fira Code', 'JetBrains Mono', Consolas, 'Courier New', monospace

额外设置（开启连字）：

在设置中搜索 font ligatures，勾选 Editor: Font Ligatures。

开启连字后，!= 会显示为 ≠，=> 会显示为 ⇒，-> 会显示为 →，非常美观。

4.4 开启自动保存

这是新手最容易忽略但极其重要的设置。开启后，你切换文件或关闭编辑器时，VS Code 会自动保存，再也不用担心忘记保存代码。

操作步骤：

按 Ctrl+, 打开设置
搜索 auto save
将 Files: Auto Save 下拉菜单改为以下任一选项：

选项	行为	推荐场景
afterDelay	停止输入后延迟保存	✅ 最常用
onFocusChange	切换文件时保存	多文件编辑
onWindowChange	切换窗口时保存	经常切换应用

选择 afterDelay 后，还可以设置延迟时间（默认 1000 毫秒 = 1 秒）。

⚠️ 注意：自动保存不会影响 Git 提交，你仍然需要手动 git add 和 git commit。

4.5 其他推荐的基础设置

设置项	搜索关键词	推荐值	说明
字体大小	`font size`	16（根据屏幕调整）	代码字号
行高	`line height`	1.5	增加行间距，更易读
缩进大小	`tab size`	2 或 4	根据项目规范选择
空格 vs Tab	`insert spaces`	✅ 勾选	推荐用空格代替 Tab
显示行号	`line numbers`	on	调试时需要
小地图	`minimap`	✅ 勾选	右侧代码概览
自动格式化	`format on save`	✅ 勾选	保存时自动格式化代码
括号对颜色	`bracket pair colorization`	✅ 勾选	让括号更容易匹配
垂直参考线	`rulers`	80, 100, 120	提示代码长度

第一部分小结

恭喜你完成了 VS Code 的入门配置！

你学会了：

✅ VS Code 是什么、与 IDE 的区别
✅ 下载安装 VS Code（Windows/Mac/Linux）
✅ 熟悉界面布局（活动栏、侧边栏、编辑器、面板、状态栏）
✅ 设置中文界面
✅ 选择主题和编程字体
✅ 开启自动保存及其他基础设置

现在，你的 VS Code 已经是一个可以舒适使用的中文开发环境了。

好的，我们继续撰写第二部分：核心编辑操作。我会用文字描述清楚，不再预留截图位置。

第二部分：核心编辑操作

在第一部分中，你完成了 VS Code 的安装和基础配置。现在，你的编辑器已经是一个可以舒适使用的中文环境了。

第二部分将带你学习 VS Code 最核心的编辑功能。这些操作是你每天都会用到的，掌握它们可以大幅提升编码效率。

如果说第一部分是"装修房子"，那么第二部分就是"学会使用房子里的各种工具"。

5. 基础编辑

5.1 打开文件/文件夹

VS Code 有两种工作模式：打开单个文件，或者打开整个文件夹（项目）。

方式一：打开单个文件

菜单栏：文件 → 打开文件
快捷键：Ctrl+O（Windows/Linux）或 Cmd+O（Mac）
然后选择你要编辑的文件

这种方式适合快速查看或编辑一两个文件，不推荐用于日常开发。

方式二：打开文件夹（推荐）

菜单栏：文件 → 打开文件夹
快捷键：Ctrl+K 然后 Ctrl+O（Windows/Linux）或 Cmd+K 然后 Cmd+O（Mac）
选择一个文件夹（比如你的项目根目录）

打开文件夹后，VS Code 会在侧边栏的"资源管理器"中显示该文件夹下的所有文件和子文件夹。这是推荐的开发方式，因为 VS Code 的很多功能（如搜索、Git、调试）都依赖文件夹上下文。

从命令行打开（如果你在安装时添加了 PATH）

在终端中进入项目目录，输入：

bash 复制代码

code .

点号表示当前目录。这个命令会启动 VS Code 并打开当前文件夹。

拖拽打开

直接将文件夹从文件资源管理器拖拽到 VS Code 窗口中，也可以打开。

5.2 新建、保存、关闭文件

新建文件

快捷键：Ctrl+N（Windows/Linux）或 Cmd+N（Mac）
或者：资源管理器顶部的"新建文件"图标（带加号的文件图标）

新文件默认标题是"Untitled-1"，没有语言模式。保存时会让你选择文件名和位置。

保存文件

快捷键：Ctrl+S（Windows/Linux）或 Cmd+S（Mac）
如果开启了自动保存（第一部分已配置），则不需要手动保存

另存为

快捷键：Ctrl+Shift+S（Windows/Linux）或 Cmd+Shift+S（Mac）

关闭当前文件

快捷键：Ctrl+F4（Windows/Linux）或 Cmd+W（Mac）
或者：点击编辑器标签页上的 × 图标

关闭所有文件

菜单栏：文件 → 关闭所有
没有默认快捷键，可以自己设置

5.3 光标移动与文本选中

VS Code 的光标移动和文本选中遵循标准的键盘操作，但增加了一些效率增强。

基础光标移动

操作	Windows/Linux	Mac
上/下/左/右移动一行/字符	方向键	方向键
移动到行首	`Home`	`Cmd+左箭头`
移动到行尾	`End`	`Cmd+右箭头`
移动到文档开头	`Ctrl+Home`	`Cmd+上箭头`
移动到文档结尾	`Ctrl+End`	`Cmd+下箭头`
按单词移动	`Ctrl+左/右箭头`	`Alt+左/右箭头`

文本选中

按住 Shift 键的同时进行光标移动操作，即可选中从光标原位置到新位置之间的文本。

操作	Windows/Linux	Mac
选中从光标到行首	`Shift+Home`	`Shift+Cmd+左箭头`
选中从光标到行尾	`Shift+End`	`Shift+Cmd+右箭头`
选中整行	`Ctrl+L`（再次按扩展）	`Cmd+L`
选中当前单词	`Ctrl+D`（多次按会选中下一个相同词）	`Cmd+D`

快速技巧：

双击一个单词，会选中该单词
三击一行，会选中整行
在行号上单击，会选中整行

5.4 复制、剪切、粘贴、删除

这些操作和大多数编辑器一致：

操作	Windows/Linux	Mac
复制	`Ctrl+C`	`Cmd+C`
剪切	`Ctrl+X`	`Cmd+X`
粘贴	`Ctrl+V`	`Cmd+V`
删除光标后字符	`Delete`	`Delete`
删除光标前字符	`Backspace`	`Backspace`
删除当前行	`Ctrl+Shift+K`	`Cmd+Shift+K`
复制当前行（不选中直接复制）	`Ctrl+C`（光标在行上）	`Cmd+C`

复制当前行这个操作非常实用：光标停在一行的任意位置，直接按复制快捷键，就会复制整行，不需要先选中整行。

5.5 撤销与重做

操作	Windows/Linux	Mac
撤销	`Ctrl+Z`	`Cmd+Z`
重做	`Ctrl+Y` 或 `Ctrl+Shift+Z`	`Cmd+Shift+Z`

VS Code 的撤销历史很长（默认 100 次），而且可以跨文件。也就是说，你撤销某个操作后，再切换到另一个文件，仍然可以重做回来。

6. 搜索与替换

搜索是编码中最频繁的操作之一。VS Code 提供了两种搜索模式：当前文件搜索和全局搜索。

6.1 当前文件搜索

在单个文件中查找文本。

快捷键：Ctrl+F（Windows/Linux）或 Cmd+F（Mac）
按下后，编辑器顶部会出现搜索框

搜索框的功能按钮（从左到右）：

按钮	图标	功能
大小写匹配	`Aa`	开启后，区分大小写
全词匹配	`ab	`
正则表达式	`.*`	开启后，支持正则表达式搜索

搜索后的操作：

按 Enter 跳转到下一个匹配项
按 Shift+Enter 跳转到上一个匹配项
所有匹配项会被高亮显示
编辑器右侧的滚动条上会出现黄色标记，表示匹配项的位置

替换模式：

在搜索框旁边，有一个向下的箭头，点击可以展开替换框。或者按 Ctrl+H（Windows/Linux）或 Cmd+Alt+F（Mac）直接进入替换模式。

替换模式的操作：

在上方输入要查找的内容
在下方输入要替换成的内容
点击"全部替换"按钮替换所有匹配项
点击"替换"按钮逐个替换

⚠️ 注意：替换操作不可直接撤销（除非你立即按 Ctrl+Z），执行"全部替换"前建议先预览一下。

6.2 全局搜索（跨文件）

在整个项目文件夹中搜索所有文件。

快捷键：Ctrl+Shift+F（Windows/Linux）或 Cmd+Shift+F（Mac）
按下后，侧边栏会切换到搜索视图

搜索视图的功能：

搜索输入框：输入要搜索的内容
替换输入框（可展开）：输入要替换的内容
筛选条件 ：
- 大小写匹配
- 全词匹配
- 正则表达式
包含的文件模式 ：例如 *.js 只搜索 JavaScript 文件
排除的文件模式 ：例如 node_modules 排除依赖目录

搜索结果展示：

搜索结果按文件分组显示。每个文件下方会列出匹配的行及其上下文。点击任意结果即可跳转到该文件中的对应位置。

在搜索结果中快速导航：

F4：跳转到下一个搜索结果文件
Shift+F4：跳转到上一个搜索结果文件

全局替换：

点击搜索框左侧的展开箭头，或者按 Ctrl+Shift+H（Windows/Linux）或 Cmd+Shift+H（Mac），可以展开替换界面。

全局替换是批量修改代码的有力工具，但使用时需要格外小心。建议先在"包含的文件"中限制搜索范围，执行替换前预览一下匹配结果。

6.3 正则表达式搜索

VS Code 的搜索框支持正则表达式，这是一个非常强大的功能。

启用正则：

点击搜索框右侧的 .* 图标，或者按 Alt+R（Windows/Linux）或 Cmd+Option+R（Mac）。

常用正则表达式示例：

需求	正则表达式
查找所有数字	`\d+`
查找所有邮箱	`\w+@\w+\.\w+`
查找所有以"test"开头的行	`^test.*`
查找所有 HTML 标签	`<[^>]+>`
查找所有空行	`^\s*$`

💡 正则表达式学习建议：如果你不熟悉正则，推荐花 30 分钟看一下基础教程（附录有资源推荐）。这是一个投入产出比很高的技能。

7. 多光标与批量编辑

这是 VS Code 最令人惊叹的功能之一，也是效率提升最大的地方。

多光标让你可以同时在多个位置输入相同的文本，或者同时编辑多行。

7.1 添加额外光标的基本方法

方法一：鼠标 + Alt 键

按住 Alt（Windows/Linux）或 Option（Mac），然后在你想添加光标的位置单击鼠标左键。每单击一次，就会多出一个光标。

方法二：Ctrl + 鼠标点击

按住 Ctrl（Windows/Linux）或 Cmd（Mac），然后在你想添加光标的位置单击鼠标左键。效果和方法一相同。

方法三：Ctrl+Alt+上/下箭头

按 Ctrl+Alt+上箭头（Windows/Linux）或 Cmd+Option+上箭头（Mac）可以在上方添加一个光标。按 Ctrl+Alt+下箭头 可以在下方添加一个光标。

这个方法适合快速在当前列的上方或下方添加光标。

7.2 选中下一个相同词

这是一个极其常用的功能：Ctrl+D（Windows/Linux）或 Cmd+D（Mac）

操作步骤：

选中一个单词（双击单词，或者用光标选中一部分）
按 Ctrl+D
你会看到下一个相同的单词也被选中，并且增加了一个光标
继续按 Ctrl+D，会继续选中下一个相同的词
此时你可以直接输入，所有被选中的位置会同时被修改

示例场景：

假设你有这样一段代码：

javascript 复制代码

let name = "张三";
let age = 18;
let city = "北京";

你想把所有的 let 改成 const。操作步骤：

选中第一个 let
按三次 Ctrl+D，会选中全部三个 let
输入 const，三个位置同时改变

跳过某个匹配项：

如果你不想选中某个匹配项，按 Ctrl+K 然后 Ctrl+D，可以跳过当前项并选中下一个。

撤销最近选中的匹配项：

按 Ctrl+U（Windows/Linux）或 Cmd+U（Mac）可以回退上一步的选中。

7.3 在所有匹配项上添加光标

如果你想把文档中某个词的所有出现都选中，可以用 Ctrl+F2（Windows/Linux）或 Cmd+F2（Mac）。

操作步骤：

选中一个单词
按 Ctrl+F2
文档中所有相同的单词都会被选中，每个位置都有一个光标

这个功能适合全局重命名变量，但要注意它不会区分作用域（不像语言服务提供的重命名那样智能）。

7.4 列选择（框选）

按住 Shift+Alt（Windows/Linux）或 Shift+Option（Mac），然后用鼠标拖拽，可以画出一个矩形选择区域。这个区域内的所有位置都会被选中，可以在每一行的相同列位置同时编辑。

示例场景：

假设你有这样的代码：

javascript 复制代码

const user1 = { name: "张三", age: 18 };
const user2 = { name: "李四", age: 20 };
const user3 = { name: "王五", age: 22 };

你想删除所有 const 后面的空格，或者在每行前面添加注释符号，列选择可以快速完成。

7.5 在每行末尾添加光标

Shift+Alt+I（Windows/Linux）或 Shift+Option+I（Mac）是一个非常有用的快捷键。

操作步骤：

选中多行文本（可以全选 Ctrl+A）
按 Shift+Alt+I
每一行的末尾都会出现一个光标

这个功能非常适合批量添加分号、逗号或者行末注释。

7.6 多光标操作的实用场景总结

场景	推荐方法
批量修改变量名	`Ctrl+D` 逐个选中相同词
全局修改变量名	`Ctrl+F2` 选中所有匹配
在每行开头加注释	列选择（拖拽）后输入 `//`
在每行末尾加分号	`Shift+Alt+I` 后输入 `;`
在多行相同列加内容	列选择（拖拽）或 `Ctrl+Alt+下箭头`
删除多行中的特定字符	列选择后按 `Delete`

8. 代码折叠与缩进

8.1 代码折叠

当代码文件很长时，折叠可以让你暂时隐藏不关注的代码块。

折叠的图标：

在编辑器左侧的行号旁边，代码块的开头位置会有一个小三角形（向下箭头）。点击它可以折叠该代码块，三角形会变成向右箭头。再次点击展开。

折叠的快捷键：

操作	Windows/Linux	Mac
折叠当前代码块	`Ctrl+Shift+[`	`Cmd+Option+[`
展开当前代码块	`Ctrl+Shift+]`	`Cmd+Option+]`
递归折叠（折叠内部所有块）	`Ctrl+K` 然后 `Ctrl+[`	`Cmd+K` 然后 `Cmd+[`
递归展开	`Ctrl+K` 然后 `Ctrl+]`	`Cmd+K` 然后 `Cmd+]`
折叠所有代码块	`Ctrl+K` 然后 `Ctrl+0`	`Cmd+K` 然后 `Cmd+0`
展开所有代码块	`Ctrl+K` 然后 `Ctrl+J`	`Cmd+K` 然后 `Cmd+J`

折叠范围的设置：

VS Code 默认会根据代码结构自动判断折叠范围（函数、类、循环等）。你可以在设置中搜索 folding，修改 Editor: Folding Strategy：

auto：自动检测（默认）
indentation：根据缩进层级折叠

8.2 缩进调整

保持一致的缩进是代码可读性的基础。

调整选中行的缩进：

操作	Windows/Linux	Mac
增加缩进（向右）	`Tab`	`Tab`
减少缩进（向左）	`Shift+Tab`	`Shift+Tab`

你可以选中多行，然后按 Tab 或 Shift+Tab 批量调整缩进。

自动格式化缩进：

VS Code 可以根据代码语法自动调整缩进：

格式化整个文档：Shift+Alt+F（Windows/Linux）或 Shift+Option+F（Mac）
格式化选中的代码块：Ctrl+K 然后 Ctrl+F（Windows/Linux）或 Cmd+K 然后 Cmd+F（Mac）

缩进设置：

在 VS Code 右下角的状态栏，你会看到类似"Spaces: 4"或"Tab Size: 4"的信息。点击它可以快速修改当前文件的缩进设置。

常用的缩进规范：

JavaScript/TypeScript：2 个空格
Python：4 个空格（PEP8 强制）
Go：使用 Tab（gofmt 强制）
HTML/CSS：2 个空格

8.3 括号匹配与跳转

高亮匹配的括号：

当光标放在一个括号（()、{}、[]）旁边时，VS Code 会用下划线高亮当前括号，同时高亮与之匹配的另一个括号。这个功能默认开启，可以在设置中搜索 bracket 调整颜色。

跳转到匹配的括号：

快捷键：Ctrl+Shift+\（Windows/Linux）或 Cmd+Shift+\（Mac）

这个功能非常实用：如果你在一个深层嵌套的函数中，想快速跳到函数的开头或结尾括号，把光标放在任意一个括号上，按快捷键就会跳转到匹配的括号。

括号对颜色化：

这是一个非常有用的视觉辅助功能。在设置中搜索 bracket pair colorization，勾选启用。启用后，不同层级的括号会显示为不同的颜色，让你一眼看出括号的嵌套关系。

例如：

第一层括号是红色
第二层是黄色
第三层是绿色

第二部分小结

在第二部分中，你学会了：

✅ 打开文件/文件夹的多种方式
✅ 新建、保存、关闭文件的操作
✅ 光标移动与文本选中的快捷键
✅ 当前文件搜索与全局搜索
✅ 正则表达式搜索（基础）
✅ 多光标编辑（Ctrl+D、列选择、行尾光标等）
✅ 代码折叠与展开
✅ 缩进调整与自动格式化
✅ 括号匹配与跳转

这些编辑操作是你每天写代码的核心动作。熟练掌握它们，你的编码速度会有质的提升。

第三部分：快捷键与效率提升

通过第二部分的学习，你已经掌握了 VS Code 的核心编辑操作。但你可能已经注意到：频繁使用鼠标会拖慢你的速度。

第三部分将带你系统学习 VS Code 的快捷键体系。这可能是本教程中最有价值的部分------因为快捷键的熟练程度直接影响你的编码效率。

请记住一个原则：如果你发现自己反复用鼠标点击某个功能，就去找它的快捷键。

9. 命令面板：VS Code 的核心入口

9.1 什么是命令面板？

命令面板是 VS Code 最重要的功能入口。几乎所有你能通过菜单或鼠标完成的操作，都可以通过命令面板调用。

打开命令面板：

快捷键：Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac）
或者：按 F1 键

按下后，编辑器顶部会出现一个下拉输入框。

命令面板的工作原理：

输入你想要的命令的关键词（支持模糊搜索）
下拉列表中会显示所有匹配的命令
选中某个命令，按回车执行

示例：

想改变颜色主题？输入 theme，选择"首选项: 颜色主题"
想打开设置？输入 setting，选择"首选项: 打开设置"
想格式化代码？输入 format，选择"格式化文档"

💡 命令面板是你学习 VS Code 的"探索工具"。当你不知道某个功能在哪里时，打开命令面板，输入你猜的关键词，大概率能找到。

9.2 命令面板的常见用法

执行没有快捷键的操作

很多操作没有默认快捷键，或者快捷键太难记。这时候命令面板就是最好的方式。

例如：

"重新打开关闭的编辑器"（相当于浏览器恢复关闭标签页）
"更改语言模式"（切换文件的语法高亮类型）
"打开用户代码片段"

查看命令的快捷键

当你在命令面板中看到一个命令时，如果它有快捷键，右侧会显示。这是一个学习快捷键的好方法。

例如：

"文件: 保存" 右侧显示 Ctrl+S
"编辑: 撤销" 右侧显示 Ctrl+Z

运行多命令

你可以连续打开命令面板执行多个命令，而不用关闭它。每次执行完一个命令后，命令面板会自动关闭。如果想连续执行，可以在执行时按住 Shift，这样命令面板会保持打开。

9.3 快速打开文件

命令面板旁边有一个"快速打开"功能，专门用于快速跳转到文件。

打开快速打开：

快捷键：Ctrl+P（Windows/Linux）或 Cmd+P（Mac）

使用方法：

按 Ctrl+P，输入文件名的一部分（支持模糊匹配）
下拉列表中显示匹配的文件
用上下箭头选择，按回车打开

模糊匹配示例：

假设你想打开 UserProfileService.js，你只需要输入：

userprofile（部分单词）
ups（每个单词的首字母）
profile.js（文件名的一部分）

VS Code 会智能匹配。

快速打开的扩展用法：

输入内容	作用
`?`	显示帮助，列出所有可用命令
`文件名`	打开该文件
`@`	列出当前文件中的所有符号（函数、变量、类等）
`@:`	按类别分组显示符号
`#`	在工作区中搜索符号（跨文件）
`:`	跳转到指定行号（例如 `:120` 跳转到第120行）

组合使用示例：

打开文件并跳转到指定行：Ctrl+P，输入 文件名:行号，例如 app.js:42
打开文件并跳转到符号：Ctrl+P，输入 文件名@符号名，例如 utils.js@formatDate

10. 必记快捷键大全

以下是 VS Code 最常用、最值得记忆的快捷键。按使用频率和重要性分类。

10.1 文件操作

操作	Windows/Linux	Mac	频率
新建文件	`Ctrl+N`	`Cmd+N`	⭐⭐⭐⭐⭐
保存	`Ctrl+S`	`Cmd+S`	⭐⭐⭐⭐⭐
另存为	`Ctrl+Shift+S`	`Cmd+Shift+S`	⭐⭐
关闭编辑器	`Ctrl+F4`	`Cmd+W`	⭐⭐⭐⭐
关闭所有编辑器	`Ctrl+K` 然后 `Ctrl+W`	`Cmd+K` 然后 `Cmd+W`	⭐⭐
打开文件（快速打开）	`Ctrl+P`	`Cmd+P`	⭐⭐⭐⭐⭐
打开最近的文件	`Ctrl+Tab`	`Ctrl+Tab`	⭐⭐⭐
重新打开关闭的编辑器	`Ctrl+Shift+T`	`Cmd+Shift+T`	⭐⭐⭐

10.2 编辑操作

操作	Windows/Linux	Mac	频率
撤销	`Ctrl+Z`	`Cmd+Z`	⭐⭐⭐⭐⭐
重做	`Ctrl+Y` 或 `Ctrl+Shift+Z`	`Cmd+Shift+Z`	⭐⭐⭐⭐
复制	`Ctrl+C`	`Cmd+C`	⭐⭐⭐⭐⭐
剪切	`Ctrl+X`	`Cmd+X`	⭐⭐⭐⭐
粘贴	`Ctrl+V`	`Cmd+V`	⭐⭐⭐⭐⭐
复制当前行	`Ctrl+C`（光标在行上）	`Cmd+C`（光标在行上）	⭐⭐⭐⭐
剪切当前行	`Ctrl+X`（光标在行上）	`Cmd+X`（光标在行上）	⭐⭐⭐⭐
删除当前行	`Ctrl+Shift+K`	`Cmd+Shift+K`	⭐⭐⭐⭐
向上复制行	`Shift+Alt+上箭头`	`Shift+Option+上箭头`	⭐⭐⭐
向下复制行	`Shift+Alt+下箭头`	`Shift+Option+下箭头`	⭐⭐⭐
向上移动行	`Alt+上箭头`	`Option+上箭头`	⭐⭐⭐
向下移动行	`Alt+下箭头`	`Option+下箭头`	⭐⭐⭐

10.3 选择操作

操作	Windows/Linux	Mac	频率
全选	`Ctrl+A`	`Cmd+A`	⭐⭐⭐⭐
选中当前行	`Ctrl+L`（多次按扩展）	`Cmd+L`	⭐⭐⭐⭐
选中当前单词	`Ctrl+D`（多次按选下一个相同词）	`Cmd+D`	⭐⭐⭐⭐⭐
选中所有匹配项	`Ctrl+F2`	`Cmd+F2`	⭐⭐⭐
列选择（框选）	`Shift+Alt+鼠标拖拽`	`Shift+Option+鼠标拖拽`	⭐⭐⭐
在每行末尾添加光标	`Shift+Alt+I`	`Shift+Option+I`	⭐⭐⭐⭐
向上添加光标	`Ctrl+Alt+上箭头`	`Cmd+Option+上箭头`	⭐⭐⭐
向下添加光标	`Ctrl+Alt+下箭头`	`Cmd+Option+下箭头`	⭐⭐⭐
向左扩展选中	`Shift+左箭头`	`Shift+左箭头`	⭐⭐⭐⭐
向右扩展选中	`Shift+右箭头`	`Shift+右箭头`	⭐⭐⭐⭐
按单词向左扩展选中	`Ctrl+Shift+左箭头`	`Option+Shift+左箭头`	⭐⭐⭐
按单词向右扩展选中	`Ctrl+Shift+右箭头`	`Option+Shift+右箭头`	⭐⭐⭐

10.4 导航操作

操作	Windows/Linux	Mac	频率
跳转到文件（快速打开）	`Ctrl+P`	`Cmd+P`	⭐⭐⭐⭐⭐
跳转到行	`Ctrl+G`	`Cmd+G`	⭐⭐⭐⭐
跳转到符号（当前文件）	`Ctrl+Shift+O`	`Cmd+Shift+O`	⭐⭐⭐
跳转到符号（工作区）	`Ctrl+T`	`Cmd+T`	⭐⭐⭐
跳转到定义	`F12`	`F12`	⭐⭐⭐⭐
跳转到实现	`Ctrl+F12`	`Cmd+F12`	⭐⭐
返回上一位置	`Alt+左箭头`	`Ctrl+-`	⭐⭐⭐⭐⭐
前往下一位置	`Alt+右箭头`	`Ctrl+Shift+-`	⭐⭐⭐⭐
在文件中查找	`Ctrl+F`	`Cmd+F`	⭐⭐⭐⭐⭐
在文件中替换	`Ctrl+H`	`Cmd+Option+F`	⭐⭐⭐
全局查找	`Ctrl+Shift+F`	`Cmd+Shift+F`	⭐⭐⭐⭐
全局替换	`Ctrl+Shift+H`	`Cmd+Shift+H`	⭐⭐
切换侧边栏	`Ctrl+B`	`Cmd+B`	⭐⭐⭐⭐
切换面板（终端）	`Ctrl+J`	`Cmd+J`	⭐⭐⭐⭐
打开终端	Ctrl+`` （反引号）	Ctrl+`` （反引号）	⭐⭐⭐⭐⭐

10.5 代码编辑辅助

操作	Windows/Linux	Mac	频率
格式化文档	`Shift+Alt+F`	`Shift+Option+F`	⭐⭐⭐⭐
格式化选中区域	`Ctrl+K` 然后 `Ctrl+F`	`Cmd+K` 然后 `Cmd+F`	⭐⭐⭐
注释/取消注释行	`Ctrl+/`	`Cmd+/`	⭐⭐⭐⭐⭐
注释/取消注释块	`Shift+Alt+A`	`Shift+Option+A`	⭐⭐⭐
折叠当前块	`Ctrl+Shift+[`	`Cmd+Option+[`	⭐⭐⭐
展开当前块	`Ctrl+Shift+]`	`Cmd+Option+]`	⭐⭐⭐
折叠所有块	`Ctrl+K` 然后 `Ctrl+0`	`Cmd+K` 然后 `Cmd+0`	⭐⭐
展开所有块	`Ctrl+K` 然后 `Ctrl+J`	`Cmd+K` 然后 `Cmd+J`	⭐⭐
增加缩进	`Tab`（选中行）	`Tab`（选中行）	⭐⭐⭐⭐⭐
减少缩进	`Shift+Tab`（选中行）	`Shift+Tab`（选中行）	⭐⭐⭐⭐⭐
跳转到匹配括号	`Ctrl+Shift+\`	`Cmd+Shift+\`	⭐⭐⭐

10.6 调试与运行

操作	Windows/Linux	Mac	频率
开始调试	`F5`	`F5`	⭐⭐⭐
单步执行	`F10`	`F10`	⭐⭐⭐
单步进入	`F11`	`F11`	⭐⭐⭐
单步跳出	`Shift+F11`	`Shift+F11`	⭐⭐
重新开始调试	`Ctrl+Shift+F5`	`Cmd+Shift+F5`	⭐⭐
停止调试	`Shift+F5`	`Shift+F5`	⭐⭐⭐
切换断点	`F9`	`F9`	⭐⭐⭐

10.7 视图与显示

操作	Windows/Linux	Mac	频率
打开命令面板	`Ctrl+Shift+P` 或 `F1`	`Cmd+Shift+P`	⭐⭐⭐⭐⭐
打开设置	`Ctrl+,`	`Cmd+,`	⭐⭐⭐
切换全屏	`F11`	`Ctrl+Cmd+F`	⭐⭐
放大视图	`Ctrl+=`	`Cmd+=`	⭐⭐⭐
缩小视图	`Ctrl+-`	`Cmd+-`	⭐⭐⭐
重置缩放	`Ctrl+Numpad0`	`Cmd+Numpad0`	⭐⭐
切换禅模式	`Ctrl+K` 然后 `Z`	`Cmd+K` 然后 `Z`	⭐⭐

11. 多文件与多窗口管理

当项目变大后，你经常需要同时处理多个文件。VS Code 提供了多种方式来管理多文件编辑。

11.1 分屏编辑（编辑器组）

VS Code 允许你将编辑器区域拆分成多个"编辑器组"，就像分屏一样。

拆分编辑器的快捷键：

操作	Windows/Linux	Mac
向右拆分	`Ctrl+\`	`Cmd+\`
向左拆分	先拆分，再拖拽移动	先拆分，再拖拽移动
向下拆分	`Ctrl+K` 然后 `Ctrl+\`	`Cmd+K` 然后 `Cmd+\`

拆分后的操作：

每个编辑器组都有自己的标签页栏
你可以在不同组中打开不同的文件
可以将标签页从一个组拖拽到另一个组
按 Ctrl+数字（1,2,3...）可以切换到对应的编辑器组

关闭当前编辑器组：

Ctrl+K 然后 Ctrl+Shift+方向键 可以移动组
当组中最后一个标签页关闭时，组会自动关闭
或者用 Ctrl+K 然后 Shift+W 关闭所有组

实际使用场景：

左右分屏：左边写代码，右边看文档或测试文件
上下分屏：上边写代码，下边看终端输出
三屏：主编辑器 + 参考文件 + 调试控制台

11.2 编辑器标签页的管理

快速切换标签页：

操作	Windows/Linux	Mac
切换到下一个标签页	`Ctrl+PageDown`	`Ctrl+Shift+右箭头`
切换到上一个标签页	`Ctrl+PageUp`	`Ctrl+Shift+左箭头`
按编号切换（第1-9个）	`Ctrl+数字`	`Cmd+数字`

标签页布局设置：

在设置中搜索 workbench.editor，可以调整标签页的行为：

设置项	推荐值	说明
`workbench.editor.showTabs`	勾选	显示标签页栏
`workbench.editor.wrapTabs`	根据喜好	标签页过多时是否换行
`workbench.editor.pinnedTabSizing`	`normal`	固定标签页的宽度
`workbench.editor.splitInGroupLayout`	`vertical`	新编辑器组的位置

固定标签页（Pinned Tab）：

当你打开一个重要的文件，希望它一直停留在标签页栏左侧，不被其他文件挤走，可以右键点击标签页，选择"固定"。固定的标签页会显示在图钉图标。

11.3 工作区与多根目录

什么是工作区（Workspace）？

当你打开一个文件夹时，VS Code 会在内部创建一个"工作区"。这个工作区包含了：

你打开的所有文件
侧边栏的展开/折叠状态
断点信息
设置覆盖

保存工作区：

如果你经常处理一组特定的文件（比如多个相关项目），可以将当前工作区保存下来。

操作步骤：

菜单栏：文件 → 将工作区另存为
输入工作区名称（如 my-project.code-workspace）
以后打开这个工作区文件，就能恢复之前的布局

多根目录工作区：

VS Code 允许一个工作区包含多个根文件夹。这意味着你可以同时打开多个独立的项目，并在同一个窗口中管理它们。

创建多根目录工作区的方法：

打开第一个项目文件夹
点击资源管理器顶部的"将文件夹添加到工作区"按钮（三个点菜单中）
选择第二个文件夹
两个文件夹会并列显示在资源管理器中

这个功能适用于：

前后端分离的项目（前端一个文件夹，后端一个文件夹）
微服务项目（多个服务）
组件库项目（多个独立组件）

11.4 跳转与导航

跳转到定义：

当你阅读代码时，经常需要跳转到函数或变量的定义位置。

将光标放在函数名上，按 F12
或者按住 Ctrl（Windows/Linux）或 Cmd（Mac），然后点击函数名

VS Code 会打开一个新标签页，显示定义位置的代码。

跳转到实现：

对于接口或抽象类，定义和实现是分开的。按 Ctrl+F12（Windows/Linux）或 Cmd+F12（Mac）可以直接跳转到实现。

返回上一位置：

跳转后，你可能想回到原来的位置。

返回：Alt+左箭头（Windows/Linux）或 Ctrl+-（Mac）
前进：Alt+右箭头（Windows/Linux）或 Ctrl+Shift+-（Mac）

这两个快捷键非常实用，建议记住。它们和浏览器的前进后退逻辑完全一致。

查看所有引用：

将光标放在符号上，按 Shift+F12
侧边栏会显示该符号在项目中的所有引用位置

面包屑导航（Breadcrumbs）：

编辑器顶部有一条路径导航，叫做面包屑。它显示当前文件在项目中的位置，以及当前光标所在的代码结构（函数、类等）。

点击面包屑的任意部分，可以快速跳转
按 Ctrl+Shift+.（Windows/Linux）或 Cmd+Shift+.（Mac）可以聚焦到面包屑，然后用键盘导航

第三部分小结

在第三部分中，你学会了：

✅ 命令面板 （Ctrl+Shift+P）：VS Code 的核心入口，可以调用任何功能
✅ 快速打开 （Ctrl+P）：快速跳转到文件、符号、行号
✅ 文件操作快捷键：新建、保存、关闭等
✅ 编辑操作快捷键：复制、剪切、粘贴、删除行等
✅ 选择操作快捷键：多光标、列选择、行尾光标等
✅ 导航操作快捷键：跳转定义、返回上一位置、全局搜索等
✅ 代码辅助快捷键：格式化、注释、折叠等
✅ 分屏编辑：拆分编辑器组、管理标签页
✅ 工作区：保存状态、多根目录
✅ 跳转与导航：跳转定义、查看引用、面包屑

快捷键是 VS Code 使用中投入产出比最高的技能。建议你：

不必一次记住所有快捷键，先从频率最高的学起
把本节的快捷键表收藏起来，需要时查阅
每当你发现自己用鼠标点某个操作超过三次，就去查它的快捷键

第四部分：扩展生态

通过前三部分的学习，你已经能够熟练使用 VS Code 进行日常编辑操作了。但你可能会有这样的疑问：VS Code 本身功能似乎并不算多，它凭什么成为最受欢迎的编辑器？

答案是：扩展（Extensions）。

VS Code 的核心是一个轻量级的编辑器。它的所有"重量级"功能------语言支持、代码检查、格式化、主题、Git 增强、远程开发等------都是通过扩展实现的。

第四部分将带你进入 VS Code 的扩展世界。你将学会：

如何找到、安装、管理扩展
哪些扩展是必装的（按类别推荐）
如何配置扩展
如何避免"扩展太多"导致编辑器卡顿

12. 扩展市场入门

12.1 什么是扩展？

扩展是为 VS Code 添加功能的插件。你可以把 VS Code 想象成一个操作系统，而扩展就是上面安装的应用程序。

扩展能做什么？

类别	功能示例
语言支持	为 Python、Go、Rust 等语言提供语法高亮、智能提示、调试
代码检查（Linter）	ESLint、Pylint、Stylelint 检查代码错误
代码格式化	Prettier、Black 自动格式化代码
主题	改变编辑器的颜色、图标
效率工具	Live Server、GitLens、TODO Highlight
协作	Live Share 实时协作编辑
远程开发	Remote - SSH、Remote - Containers
数据库	连接 MySQL、PostgreSQL、MongoDB

12.2 如何打开扩展市场

方法一：活动栏

点击左侧活动栏的扩展图标 （四个方块组成的图标，像拼图）。或者按快捷键 Ctrl+Shift+X（Windows/Linux）或 Cmd+Shift+X（Mac）。

方法二：命令面板

按 Ctrl+Shift+P，输入 Extensions，选择"视图：显示扩展"。

12.3 扩展市场的界面

打开扩展市场后，你会看到以下区域：

左侧：扩展列表

已安装（Installed）：你已经安装的扩展
热门推荐（Popular）：社区使用最多的扩展
推荐（Recommended）：基于你的项目类型，VS Code 推荐的扩展
最近使用（Recently Used）：你最近操作过的扩展

右侧：扩展详情

点击任意扩展，右侧会显示详细信息：

扩展名称、作者、版本
安装量（Install Count）
评分（星标）
功能描述
使用说明
扩展设置项
更新日志

顶部：搜索框

可以搜索扩展名称或关键词。搜索时支持按类别筛选：

@popular：热门扩展
@recommended：推荐扩展
@category:themes：主题类扩展
@installed：已安装的扩展
@outdated：需要更新的扩展

12.4 安装、禁用、卸载扩展

安装扩展：

在搜索框中输入扩展名称
在搜索结果中找到目标扩展
点击蓝色的 Install 按钮
等待安装完成（通常几秒钟）
某些扩展需要重新加载 VS Code，点击 Reload 按钮

禁用扩展：

如果你暂时不需要某个扩展，但又不想卸载：

进入已安装扩展列表
找到目标扩展
点击齿轮图标 → 禁用
可以选择"禁用所有工作区"（仅在当前项目禁用）或"禁用"（全局禁用）

卸载扩展：

进入已安装扩展列表
找到目标扩展
点击齿轮图标 → 卸载
需要重新加载 VS Code 完成卸载

更新扩展：

扩展会定期更新。当有更新时，扩展列表中该扩展会显示"Update"按钮。你也可以在扩展市场顶部的"..."菜单中，选择"检查更新"。

💡 建议定期更新扩展，以获得新功能和错误修复。但如果你的项目非常稳定，也可以不更新------新版本有时会引入破坏性变化。

12.5 扩展配置文件（settings.json）

每个扩展都有自己的配置项。配置方法有两种：

方法一：图形界面

进入扩展详情页
点击齿轮图标 → 扩展设置
在设置页面中修改

方法二：直接编辑 settings.json

按 Ctrl+, 打开设置
点击右上角的 {} 图标（打开设置 JSON）
在 settings.json 中添加配置

例如，配置 Prettier 扩展：

json 复制代码

{
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2
}

💡 settings.json 是 VS Code 的"终极配置方式"。熟悉后，直接编辑 JSON 比在图形界面中搜索更快。

12.6 导出/导入扩展列表

当你换电脑或者重装系统时，重新一个个安装扩展很麻烦。VS Code 支持导出和导入扩展列表。

导出扩展列表：

在终端中执行：

bash 复制代码

code --list-extensions > extensions.txt

这会把所有已安装扩展的名称写入 extensions.txt 文件。

导入扩展列表：

在新电脑上，执行：

bash 复制代码

cat extensions.txt | xargs -n 1 code --install-extension

（Windows 上可能需要使用 PowerShell 或 Git Bash）

13. 必装扩展推荐

以下扩展按类别推荐。建议你先安装"核心推荐"中的扩展，其他扩展根据你的需求选择。

13.1 美化类

美化类扩展让你的编辑器更漂亮，提升编码愉悦感。

图标主题：Material Icon Theme

扩展ID：PKief.material-icon-theme
安装量：1200万+
功能：为不同类型的文件提供精美的图标，让资源管理器一目了然

安装后，需要手动激活：文件 → 首选项 → 主题 → 文件图标主题 → Material Icon Theme

图标主题：vscode-icons

扩展ID：vscode-icons-team.vscode-icons
安装量：1100万+
功能：Material Icon Theme 的替代品，也很优秀

两个图标主题选一个即可。

代码高亮主题：One Dark Pro

扩展ID：zhuangtongfa.Material-theme
安装量：1000万+
功能：基于 Atom 的 One Dark 主题，非常流行

代码高亮主题：Dracula Official

扩展ID：dracula-theme.theme-dracula
安装量：500万+
功能：紫色调主题，护眼且独特

代码高亮主题：GitHub Theme

扩展ID：GitHub.github-vscode-theme
安装量：300万+
功能：还原 GitHub 网站的配色方案

你可以尝试几个主题，选择最顺眼的。颜色主题可以在"文件 → 首选项 → 主题 → 颜色主题"中随时切换。

13.2 代码辅助类

这类扩展直接提升你的编码效率和代码质量。

Prettier - Code formatter

扩展ID：esbenp.prettier-vscode
安装量：3000万+
功能：自动格式化代码，保持代码风格统一

配置建议：

在 settings.json 中添加：

json 复制代码

{
  "editor.formatOnSave": true,
  "prettier.semi": false,
  "prettier.singleQuote": true
}

这样每次保存文件时，Prettier 会自动格式化。

ESLint

扩展ID：dbaeumer.vscode-eslint
安装量：3000万+
功能：JavaScript/TypeScript 代码检查，实时提示错误

配置建议：

确保项目根目录有 .eslintrc.js 配置文件。安装后，ESLint 会自动工作。

GitLens - Git supercharged

扩展ID：eamodio.gitlens
安装量：2000万+
功能：大幅增强 Git 功能，可以查看每一行代码是谁写的、什么时候写的

常用功能：

行内注释：鼠标停在某行代码上，会显示该行的作者和提交时间
文件历史：查看文件的完整修改历史
对比分支：可视化对比不同分支的差异

Better Comments

扩展ID：aaron-bond.better-comments
安装量：500万+
功能：给注释添加颜色分类

效果：

! 红色注释（警告）
? 蓝色注释（疑问）
TODO 橙色注释（待办）
* 绿色注释（高亮）

TODO Highlight

扩展ID：wayou.vscode-todo-highlight
安装量：300万+
功能：高亮代码中的 TODO、FIXME 等标记

在 settings.json 中可以自定义要高亮的关键词：

json 复制代码

{
  "todohighlight.keywords": [
    "TODO:",
    "FIXME:",
    "BUG:",
    "HACK:"
  ]
}

13.3 语言支持类

根据你使用的编程语言，选择对应的扩展。

Python

扩展ID：ms-python.python
安装量：5000万+
功能：Python 语言支持（智能提示、调试、代码检查、Jupyter 支持）

安装后推荐配置：

json 复制代码

{
  "python.linting.enabled": true,
  "python.linting.pylintEnabled": true,
  "python.formatting.provider": "black"
}

JavaScript/TypeScript

VS Code 对 JavaScript 和 TypeScript 有原生支持，不需要额外安装扩展。但建议配合 ESLint 和 Prettier 使用。

扩展ID：golang.go
安装量：500万+
功能：Go 语言官方扩展，提供智能提示、调试、测试、代码导航

安装后，打开 .go 文件时会自动提示安装 Go 工具（gopls、dlv 等），全部安装即可。

Rust

扩展ID：rust-lang.rust-analyzer
安装量：300万+
功能：Rust 官方推荐扩展，提供智能提示、调试、类型检查

Java

扩展ID：redhat.java
安装量：1000万+
功能：Java 语言支持（需要安装 Extension Pack for Java）

建议直接安装 Extension Pack for Java （扩展ID：vscjava.vscode-java-pack），这是一个扩展包，包含 Java 开发所需的所有扩展。

C/C++

扩展ID：ms-vscode.cpptools
安装量：5000万+
功能：C/C++ 语言支持

13.4 效率工具类

这些扩展能显著提升你的开发效率。

Live Server

扩展ID：ritwickdey.LiveServer
安装量：3000万+
功能：启动一个本地开发服务器，支持热重载（修改 HTML/CSS/JS 后自动刷新浏览器）

使用方法：

右键点击 HTML 文件 → Open with Live Server
或者点击状态栏的 "Go Live" 按钮

Thunder Client

扩展ID：rangav.vscode-thunder-client
安装量：100万+
功能：轻量级 API 测试工具，类似 Postman

使用方法：

点击活动栏的 Thunder Client 图标
新建请求，输入 URL 和参数
发送请求，查看响应

REST Client

扩展ID：humao.rest-client
安装量：500万+
功能：在 VS Code 中直接发送 HTTP 请求（通过编写 .http 文件）

使用方法：

创建一个 .http 文件，写入：

http 复制代码

GET https://api.example.com/users

然后点击 "Send Request"，响应会显示在右侧。

Path Intellisense

扩展ID：christian-kohler.path-intellisense
安装量：1000万+
功能：自动补全文件路径

输入 ./ 或 ../ 时，会自动显示文件夹和文件列表。

Auto Rename Tag

扩展ID：formulahendry.auto-rename-tag
安装量：1000万+
功能：修改 HTML/XML 标签时，自动修改对应的闭合标签

例如把 <div> 改成 <section>，</div> 会自动变成 </section>。

Bracket Pair Colorizer（已内置）

从 VS Code 1.60 版本开始，括号对颜色化功能已经内置。你不需要再安装第三方扩展。

开启方法：在设置中搜索 bracket pair colorization，勾选启用。同时可以设置 bracket pair guides 来显示括号连接线。

Code Runner

扩展ID：formulahendry.code-runner
安装量：2000万+
功能：一键运行代码片段，支持几乎所有语言

使用方法：

选中代码，按 Ctrl+Alt+N（Windows/Linux）或 Ctrl+Option+N（Mac）
或者点击编辑器右上角的运行三角形图标

13.5 协作类

Live Share

扩展ID：ms-vsliveshare.vsliveshare
安装量：1000万+
功能：实时协作编辑，类似于 Google Docs 但针对代码

使用方法：

点击活动栏的 Live Share 图标
点击 "Start collaboration session"
复制邀请链接发送给队友
队友点击链接即可加入

加入后，双方可以同时编辑同一个文件，看到对方的光标和操作。还支持共享终端、本地服务器等。

13.6 按语言分类的扩展速查表

语言	必装扩展	可选扩展
Python	Python (ms-python.python)	Pylance, Jupyter
JavaScript/TS	ESLint, Prettier	-
Go	Go (golang.go)	-
Rust	rust-analyzer	-
Java	Extension Pack for Java	-
C/C++	C/C++ (ms-vscode.cpptools)	CMake Tools
HTML/CSS	Live Server, Auto Rename Tag	HTML CSS Support
Markdown	Markdown All in One	markdownlint

13.7 扩展的注意事项

不要安装过多扩展

每个扩展都会消耗一定内存和 CPU。安装几十个扩展后，VS Code 启动速度和运行流畅度会明显下降。

建议：

只安装你真正需要的扩展
定期检查已安装扩展，卸载不再使用的
使用"禁用"功能临时关闭不用的扩展

注意扩展的权限

某些扩展会收集使用数据。建议：

只从官方市场安装扩展
查看扩展的安装量和评分
优先选择微软官方或知名开发者发布的扩展

扩展冲突

某些扩展之间可能功能重叠，导致冲突。例如多个格式化扩展同时工作，可能互相干扰。解决方法：

在 settings.json 中指定默认格式化工具："editor.defaultFormatter": "esbenp.prettier-vscode"
或者禁用不用的格式化扩展

第四部分小结

在第四部分中，你学会了：

✅ 扩展市场的打开方式、界面布局
✅ 安装、禁用、卸载、更新扩展的方法
✅ settings.json 中配置扩展
✅ 导出/导入扩展列表，方便迁移环境
✅ 美化类扩展：Material Icon Theme、One Dark Pro 等
✅ 代码辅助类扩展：Prettier、ESLint、GitLens、Better Comments
✅ 语言支持类扩展：Python、Go、Rust、Java、C/C++
✅ 效率工具类扩展：Live Server、Thunder Client、Path Intellisense、Auto Rename Tag、Code Runner
✅ 协作类扩展：Live Share
✅ 扩展安装的注意事项（不要过多、注意权限、避免冲突）

现在，你的 VS Code 已经装备了强大的扩展，可以从一个轻量编辑器变成一个功能齐全的开发环境。

第五部分：集成终端与版本控制

通过第四部分的学习，你已经为 VS Code 装备了丰富的扩展。现在，你的编辑器已经具备了强大的开发能力。

但一个完整的开发环境还需要两样东西：命令行终端 和版本控制。VS Code 将这两者都内置了进来，让你无需切换窗口就能完成几乎所有开发任务。

第五部分将带你学习：

集成终端的使用（打开、拆分、多终端管理）
终端的个性化配置
内置 Git 的可视化操作
查看差异、解决冲突
GitLens 扩展增强

14. 集成终端使用

14.1 什么是集成终端？

集成终端是 VS Code 内置的命令行工具。它本质上是把你电脑上的默认终端（Windows 上是 PowerShell 或 cmd，macOS/Linux 上是 bash 或 zsh）嵌入到编辑器底部面板中。

为什么要用集成终端？

场景	不用集成终端	用集成终端
运行 `npm install`	切换到独立的终端窗口	在编辑器底部直接运行
执行 `git push`	Alt+Tab 切换窗口	不离开编辑器
启动开发服务器	另一个窗口显示日志	在面板中实时查看
调试时查看输出	来回切换	并排查看代码和输出

一句话总结：集成终端让你不用离开 VS Code 就能执行任何命令行操作。

14.2 打开和关闭终端

打开终端：

快捷键：Ctrl+`` （反引号，位于 Esc 键下方）
菜单栏：终端 → 新建终端
命令面板：Ctrl+Shift+P → 输入 Terminal

关闭终端：

点击终端面板右上角的垃圾桶图标
快捷键：Ctrl+`` （再次按，如果终端是焦点）
或者在终端中输入 exit 按回车

显示/隐藏终端面板：

快捷键：Ctrl+J（切换整个面板区的显示）

💡 提示：反引号键（`````）的位置在 Esc 键下方，数字 1 键的左边。如果按了没反应，检查键盘布局或尝试 Ctrl+Shift+`` 。

14.3 终端的界面布局

打开终端后，底部面板会显示以下内容：

标签页栏：

每个终端都有一个标签页，显示终端类型（如 PowerShell、bash、zsh）
点击标签页可以切换当前活跃终端
点击标签页右侧的 + 号可以新建终端
点击垃圾桶图标可以关闭当前终端
点击分割图标（两个矩形）可以拆分终端

终端区域：

显示命令行的输入和输出
支持标准命令行操作（Tab 补全、上下箭头历史命令等）
支持鼠标选中和复制粘贴

右侧工具栏：

加号图标：新建终端
垃圾桶图标：杀死当前终端（关闭）
分割图标：将当前终端拆分为左右两个
上箭头图标：滚动到上一个命令
下箭头图标：滚动到下一个命令

14.4 新建和管理多个终端

新建终端：

点击终端面板右上角的 + 号
快捷键：Ctrl+Shift+`` （新建一个终端）

在多个终端之间切换：

点击标签页切换
快捷键：Ctrl+PageDown（下一个终端）、Ctrl+PageUp（上一个终端）
快捷键：Ctrl+`` （在当前和终端之间切换焦点）

给终端重命名：

右键点击终端标签页，选择"重命名"，输入一个有意义的名字（如"前端服务器"、"数据库"）。

杀死终端：

在终端中输入 exit 按回车
点击标签页上的垃圾桶图标
右键标签页 → 杀死终端

14.5 拆分终端

拆分终端让你在同一个面板中并排显示多个终端。

拆分当前终端：

点击终端面板右上角的分割图标（两个矩形）
快捷键：Ctrl+Shift+5（Windows/Linux）或 Cmd+Shift+5（Mac）

在拆分的终端之间切换：

快捷键：Alt+左箭头 和 Alt+右箭头（Windows/Linux）或 Option+左/右箭头（Mac）
或者直接用鼠标点击

调整拆分区域的大小：

鼠标拖拽两个区域之间的分割线。

关闭拆分出来的终端：

将该终端焦点激活，按 Ctrl+Shift+W（Windows/Linux）或 Cmd+Shift+W（Mac）
或者点击该终端标签页的垃圾桶图标

14.6 终端的基本操作

复制粘贴：

复制：选中文本后按 Ctrl+C（Windows/Linux）或 Cmd+C（Mac）
粘贴：按 Ctrl+V（Windows/Linux）或 Cmd+V（Mac）
注意：在终端中，Ctrl+C 通常用于中断正在运行的程序，复制文本需要用鼠标右键或 Ctrl+Shift+C

推荐使用右键粘贴：

在 VS Code 终端中，右键点击会自动粘贴剪贴板内容。这是最快的方式。

清屏：

输入 clear 或 cls（Windows）按回车
快捷键：Ctrl+K（Windows/Linux/Mac 通用）

中断当前运行的程序：

按 Ctrl+C。这会发送中断信号给正在运行的程序（比如开发服务器、Python 脚本等）。

滚动查看历史输出：

使用鼠标滚轮
使用键盘的 PageUp、PageDown、上箭头、下箭头

搜索终端输出：

快捷键：Ctrl+F
在终端面板顶部会出现搜索框，输入关键词即可搜索

14.7 在终端中运行常见命令

Node.js / npm 项目：

bash 复制代码

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 运行测试
npm test

Python 项目：

bash 复制代码

# 创建虚拟环境
python -m venv venv

# 激活虚拟环境（Windows）
venv\Scripts\activate

# 激活虚拟环境（Mac/Linux）
source venv/bin/activate

# 运行脚本
python main.py

# 安装包
pip install requests

Git 命令：

bash 复制代码

# 查看状态
git status

# 添加文件
git add .

# 提交
git commit -m "message"

# 推送
git push

# 拉取
git pull

14.8 终端的配置

修改默认终端类型：

VS Code 默认使用你系统的默认终端。你可以手动指定。

在设置中搜索 terminal.integrated.defaultProfile：

操作系统	可选值
Windows	`PowerShell`、`Command Prompt`、`Git Bash`、`WSL`
macOS	`bash`、`zsh`（默认）
Linux	`bash`、`zsh`、`fish`

推荐配置（Windows）：

如果你安装了 Git for Windows，建议将默认终端改为 Git Bash，因为它提供了更接近 Linux 的命令行体验。

json 复制代码

{
  "terminal.integrated.defaultProfile.windows": "Git Bash"
}

推荐配置（macOS）：

macOS 从 Catalina 开始默认使用 zsh，可以保持默认：

json 复制代码

{
  "terminal.integrated.defaultProfile.osx": "zsh"
}

设置终端字体大小：

json 复制代码

{
  "terminal.integrated.fontSize": 14
}

设置终端字体：

json 复制代码

{
  "terminal.integrated.fontFamily": "Fira Code, Consolas, 'Courier New', monospace"
}

设置终端光标样式：

json 复制代码

{
  "terminal.integrated.cursorStyle": "line"  // line、block、underline
}

设置终端行高：

json 复制代码

{
  "terminal.integrated.lineHeight": 1.2
}

开启终端滚动缓存：

终端的输出历史默认只有 1000 行，可以调大：

json 复制代码

{
  "terminal.integrated.scrollback": 10000
}

15. Git 集成

15.1 VS Code 内置的 Git 功能

VS Code 内置了 Git 支持，无需安装任何扩展就能完成大部分 Git 操作。你可以：

可视化地查看文件修改状态
暂存和提交代码
推送和拉取远程仓库
查看差异（diff）
查看提交历史
创建和切换分支
解决合并冲突

打开源代码管理面板：

点击活动栏的源代码管理图标（分支形状的图标，第三个）
快捷键：Ctrl+Shift+G（Windows/Linux）或 Cmd+Shift+G（Mac）

15.2 源代码管理面板的界面

打开源代码管理面板后，你会看到以下区域：

顶部：

消息输入框：输入提交信息
提交按钮 ：Ctrl+Enter 提交（带对勾图标）
更多操作菜单（三个点）：包含拉取、推送、同步、创建分支等

中间（更改列表）：

显示所有被修改的文件
分为"更改"（已修改但未暂存）和"暂存的更改"（已 add）
每个文件右侧有图标：
- + 号：暂存该文件
- - 号：取消暂存
- 还原图标：放弃修改

底部（分支信息）：

显示当前分支名称
显示当前仓库状态（有无待推送的提交）

15.3 基本 Git 操作的可视化流程

假设你修改了一些代码，想要提交到 GitHub。以下是完整的可视化操作流程：

步骤 1：查看修改

修改文件后，打开源代码管理面板。所有修改过的文件会显示在"更改"列表中。

步骤 2：查看差异（Diff）

点击任意文件，右侧会打开一个差异视图。上半部分是修改前的版本，下半部分是修改后的版本：

红色背景：删除的行
绿色背景：新增的行

你可以在这个视图中仔细检查修改是否正确。

步骤 3：暂存文件

有三种方式暂存文件：

点击文件右侧的 + 号（暂存单个文件）
鼠标悬停在"更改"标题上，点击出现的 + 号（暂存所有文件）
或者直接在差异视图中点击"暂存"按钮

暂存后，文件会移动到"暂存的更改"区域。

步骤 4：填写提交信息

在顶部的消息输入框中填写提交信息。推荐格式：

复制代码

简短描述（不超过50字）

详细说明（可选，每行不超过72字）

例如：

复制代码

修复登录页面在移动端的样式问题

- 调整了按钮的padding
- 修复了输入框宽度溢出

步骤 5：提交

点击提交按钮（对勾图标）
或者按 Ctrl+Enter
提交成功后，"更改"区域会清空

步骤 6：推送到远程

点击更多操作菜单（三个点）
选择"推送"
或者点击底部状态栏的同步图标

💡 提示：如果你忘记了先拉取远程更新，推送时会报错。这时先点击"拉取"，解决可能的冲突，再推送。

15.4 在 VS Code 中查看提交历史

查看文件历史：

右键点击某个文件 → 选择"打开时间线"。底部会显示该文件的所有提交记录，点击任意提交可以查看当时的文件内容。

查看整个仓库的历史：

安装 GitLens 扩展后，点击活动栏的 GitLens 图标
或者使用命令面板，搜索"Git: 查看提交历史"

15.5 创建和切换分支

创建新分支：

点击底部状态栏左下角的分支名称（通常显示 main）
在弹出的菜单中选择 + 从...创建新分支
输入新分支名称（如 feature-add-login）
选择基于哪个分支创建（通常选 main）

切换分支：

点击底部状态栏的分支名称
在弹出的分支列表中选择要切换的分支
或者使用快捷键 Ctrl+Shift+B（需设置）

推送新分支到远程：

创建新分支后，第一次推送需要指定上游：

点击更多操作菜单（三个点）
选择"推送"
VS Code 会提示"此分支没有上游分支，是否要发布？"
点击"确定"

15.6 解决合并冲突

当你执行 git pull 或合并分支时，如果遇到冲突，VS Code 会高亮显示冲突文件。

冲突标记的格式：

javascript 复制代码

<<<<<<< HEAD
这是你本地的代码
=======
这是远程/其他分支的代码
>>>>>>> main

解决冲突的步骤：

在源代码管理面板中，冲突文件会显示"C"标记
点击该文件，编辑器会显示冲突内容
VS Code 提供了快捷操作按钮：
- Accept Current Change：保留你本地的代码
- Accept Incoming Change：保留远程/其他分支的代码
- Accept Both Changes：两边的代码都保留
- Compare Changes：对比差异
选择你想要的解决方式，或者手动编辑删除冲突标记
解决后，将该文件标记为已解决（点击文件右侧的 + 号暂存）
提交合并结果

15.7 放弃修改

放弃单个文件的修改：

在源代码管理面板中，点击文件右侧的还原图标（↶）
确认后，该文件会恢复到上次提交的状态

放弃所有修改：

点击更多操作菜单（三个点）
选择"放弃所有更改"
确认后，所有修改都会被丢弃

⚠️ 警告：放弃修改是不可逆的操作。如果只是想临时保存，建议先用 git stash（储藏）。

15.8 Git 状态栏信息

VS Code 底部状态栏会显示当前 Git 仓库的状态：

显示内容	含义
`main`	当前分支名称
`↑1`	本地有 1 个提交未推送
`↓1`	远程有 1 个提交未拉取
`↻`	正在同步
`*`	有未提交的修改
`✘`	有合并冲突

点击这些状态项可以执行相应的操作：

点击分支名称：切换分支
点击 ↑1：推送
点击 ↓1：拉取
点击 ✘：查看冲突

16. GitLens 扩展增强

虽然 VS Code 内置的 Git 功能已经够用，但如果你想要更强大的 Git 体验，强烈推荐安装 GitLens 扩展。

16.1 GitLens 的核心功能

行内注释（Blame）：

安装 GitLens 后，每行代码的末尾会出现淡灰色的注释，显示这行代码是谁、什么时候、在哪个提交中写的。

鼠标悬停在注释上，会显示更详细的信息（完整的提交信息、修改的文件等）。

文件历史：

右键点击文件 → 选择"Open File History"（GitLens 版本）。可以看到该文件的完整修改历史，并以时间线的形式展示。

对比分支：

点击活动栏的 GitLens 图标
选择"Compare References"
选择两个分支，VS Code 会显示它们之间的所有差异

查找提交：

GitLens 提供了强大的提交搜索功能，可以按作者、时间、提交信息关键词搜索。

16.2 GitLens 的安装和配置

安装：

在扩展市场搜索 GitLens，作者是 eamodio，安装量超过 2000 万，点击安装。

可选配置：

如果你觉得行内注释太干扰视线，可以调整：

json 复制代码

{
  "gitlens.currentLine.enabled": false,  // 关闭当前行的注释
  "gitlens.blame.highlight.enabled": false,  // 关闭高亮
  "gitlens.blame.compact": true  // 紧凑模式
}

第五部分小结

在第五部分中，你学会了：

✅ 集成终端的打开、关闭、新建、切换
✅ 拆分终端，并排运行多个命令
✅ 终端的基本操作（复制粘贴、清屏、中断程序）
✅ 终端的配置（默认终端类型、字体、行高）
✅ 源代码管理面板的界面布局
✅ 可视化 Git 操作：查看差异、暂存、提交、推送、拉取
✅ 创建和切换分支
✅ 解决合并冲突（使用快捷按钮）
✅ 放弃修改（单个文件或全部）
✅ Git 状态栏信息的含义
✅ GitLens 扩展的核心功能（行内注释、文件历史、对比分支）

现在，你已经可以在 VS Code 中完成从代码编辑到命令行操作再到 Git 提交的全流程，无需切换任何窗口。

第六部分：调试与运行

通过第五部分的学习，你已经可以在 VS Code 中完成代码编辑、终端命令和 Git 操作的全流程。但一个完整的开发环境还缺少一个关键能力：调试。

调试（Debugging）是找出和修复代码问题的过程。在没有 IDE 的年代，调试意味着在代码中写满 console.log，然后一遍遍运行、查看输出、猜测问题所在。这个过程低效且痛苦。

VS Code 内置了强大的调试系统，让你可以：

在代码中设置断点，让程序在指定位置暂停
单步执行，一行一行地观察代码行为
查看和修改变量的当前值
查看调用堆栈，了解函数是如何被调用的

第六部分将带你学习 VS Code 的调试系统，以及配套的任务系统。

17. 运行与调试入门

17.1 什么是调试？

调试是让程序在"受控"状态下运行的过程。你可以随时暂停程序，检查内部的变量值，然后决定继续执行还是逐行推进。

传统调试方式（console.log）：

javascript 复制代码

function calculateTotal(price, quantity) {
  console.log('price:', price);
  console.log('quantity:', quantity);
  const subtotal = price * quantity;
  console.log('subtotal:', subtotal);
  const tax = subtotal * 0.1;
  console.log('tax:', tax);
  return subtotal + tax;
}

这种方式的问题：

需要修改代码（添加和删除 log）
每次修改后都要重新运行
无法在运行时修改变量值
无法回溯调用链

VS Code 调试方式：

点击行号左侧设置一个断点，按 F5 运行。程序会在断点处暂停，你可以：

鼠标悬停在变量上查看当前值
在调试控制台中执行表达式
逐行执行，观察每一步的变化
修改变量的值，继续运行看效果

不需要修改任何代码。

17.2 调试的基本概念

在开始之前，先了解几个核心概念：

概念	说明
断点（Breakpoint）	程序暂停的位置，用红点表示
单步执行（Step Over）	逐行执行，不进入函数内部
单步进入（Step Into）	进入函数内部，逐行执行函数代码
单步跳出（Step Out）	跳出当前函数，回到调用它的位置
继续（Continue）	从断点继续运行，直到下一个断点或程序结束
监视（Watch）	持续跟踪某个表达式的值
调用堆栈（Call Stack）	当前函数被调用的路径
变量（Variables）	当前作用域内的所有变量及其值

17.3 调试的入口

VS Code 提供多种方式启动调试：

方法一：直接按 F5

快捷键：F5
如果是第一次调试，VS Code 会提示你选择调试环境

方法二：点击活动栏的调试图标

点击活动栏的调试图标（虫子形状，第四个图标）
快捷键：Ctrl+Shift+D（Windows/Linux）或 Cmd+Shift+D（Mac）
点击顶部的绿色播放按钮（启动调试）

方法三：运行和调试视图

在调试视图中，你可以：

查看和修改变量
管理断点
查看调用堆栈
设置监视表达式

方法四：无调试运行

快捷键：Ctrl+F5（Windows/Linux）或 Cmd+F5（Mac）
正常运行程序，不启用调试功能

17.4 设置断点

断点是调试的核心。没有断点，程序会一直运行到结束。

设置断点的方法：

点击编辑器左侧行号旁边的空白区域（会出现红点）
快捷键：将光标放在目标行，按 F9
快捷键：Ctrl+Shift+B（在某些配置中）

断点的类型：

类型	说明	设置方式
普通断点	程序执行到该行时暂停	点击行号左侧
条件断点	满足条件时才暂停	右键行号左侧 → 添加条件断点
日志断点	不暂停，只输出日志	右键行号左侧 → 添加日志点
异常断点	发生异常时自动暂停	在调试视图中设置

条件断点的使用场景：

假设有一个循环，你想在 i === 5 时暂停：

javascript 复制代码

for (let i = 0; i < 10; i++) {
  console.log(i);
}

右键断点红点，选择"编辑断点"，输入条件 i === 5。程序会在第 6 次循环时暂停（因为 i 从 0 开始）。

日志断点的使用场景：

你不想暂停程序，但想在每次执行到某行时输出一些信息。右键添加日志点，输入要输出的内容，用 {} 包裹变量：

复制代码

当前值: {i}，总和: {sum}

程序运行时会输出这些信息，但不会暂停。

17.5 调试控制面板

当程序在断点处暂停时，编辑器顶部会出现调试控制面板：

复制代码

┌─────────────────────────────────────────────────────────────┐
│  ▶️ 继续 │ ⏭️ 单步跳过 │ ⬇️ 单步调试 │ ⬆️ 单步跳出 │ 🔄 重启 │ ■ 停止 │
└─────────────────────────────────────────────────────────────┘

按钮	快捷键	作用
继续	`F5`	运行到下一个断点或程序结束
单步跳过	`F10`	执行当前行，如果是函数调用，不进入函数内部
单步调试	`F11`	执行当前行，如果是函数调用，进入函数内部
单步跳出	`Shift+F11`	跳出当前函数，回到调用它的位置
重启	`Ctrl+Shift+F5`	重新启动调试
停止	`Shift+F5`	停止调试

17.6 调试视图详解

打开调试视图（Ctrl+Shift+D），你会看到以下区域：

变量区（VARIABLES）：

显示当前作用域内的所有变量及其值。包括：

局部变量（Local）：当前函数内的变量
全局变量（Global）：全局对象
闭包变量（Closure）：闭包捕获的变量

你可以：

展开对象查看属性
右键修改变量值
将变量添加到监视

监视区（WATCH）：

你可以在这里添加想要持续跟踪的表达式。例如：

i：跟踪循环变量
user.name：跟踪对象属性
a + b：跟踪计算结果

调用堆栈区（CALL STACK）：

显示当前函数被调用的完整路径。例如：

复制代码

main()  // 程序入口
  → calculateTotal()  // calculateTotal 被 main 调用
    → applyTax()      // applyTax 被 calculateTotal 调用（当前在这里）

点击堆栈中的任意一行，可以跳转到对应的代码位置。

断点区（BREAKPOINTS）：

列出所有已设置的断点。你可以：

勾选/取消勾选来启用/禁用断点
右键删除断点
右键编辑断点条件

18. 配置调试环境（launch.json）

18.1 什么是 launch.json？

launch.json 是 VS Code 的调试配置文件。它告诉 VS Code：

你要调试什么语言/环境（Python、Node.js、C++ 等）
要运行哪个文件
要传递哪些参数
程序启动前要执行什么任务

当你第一次按 F5 时，VS Code 会提示你选择调试环境。选择后，VS Code 会自动创建 launch.json 文件，存放在项目根目录的 .vscode 文件夹中。

18.2 为不同语言配置 launch.json

Python 调试配置：

首先确保安装了 Python 扩展（ms-python.python）。

按 F5，选择"Python"。VS Code 会创建如下配置：

json 复制代码

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: 当前文件",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
    }
  ]
}

配置项说明：

配置项	说明
`name`	配置名称，显示在调试下拉菜单中
`type`	调试器类型（python、node、cppdbg 等）
`request`	`launch`（启动新进程）或 `attach`（附加到已有进程）
`program`	要运行的文件，`${file}` 表示当前打开的文件
`console`	输出位置：`integratedTerminal`（集成终端）或 `internalConsole`（调试控制台）

Node.js/JavaScript 调试配置：

按 F5，选择"Node.js"。VS Code 会创建如下配置：

json 复制代码

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

配置项说明：

配置项	说明
`skipFiles`	调试时跳过这些文件（不进入 Node.js 内部代码）
`program`	入口文件路径

Go 调试配置：

安装 Go 扩展后，按 F5，选择"Go"。配置示例：

json 复制代码

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Package",
      "type": "go",
      "request": "launch",
      "mode": "auto",
      "program": "${fileDirname}"
    }
  ]
}

18.3 添加多个配置

launch.json 可以包含多个配置。你可以在同一个项目中配置不同的调试方式：

json 复制代码

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "调试 app.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/app.js"
    },
    {
      "name": "调试测试文件",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/test.js"
    },
    {
      "name": "附加到进程",
      "type": "node",
      "request": "attach",
      "port": 9229
    }
  ]
}

在调试视图顶部的下拉菜单中，你可以选择要运行的配置。

18.4 带参数的调试

如果你的程序需要命令行参数，用 args 字段：

json 复制代码

{
  "name": "带参数调试",
  "type": "node",
  "request": "launch",
  "program": "${workspaceFolder}/app.js",
  "args": ["--port", "3000", "--env", "production"]
}

18.5 环境变量配置

如果你需要设置环境变量，用 env 字段：

json 复制代码

{
  "name": "带环境变量调试",
  "type": "node",
  "request": "launch",
  "program": "${workspaceFolder}/app.js",
  "env": {
    "NODE_ENV": "development",
    "API_KEY": "your-api-key"
  }
}

18.6 调试 Web 应用（浏览器）

对于前端项目（React、Vue、Angular），你可以直接调试在浏览器中运行的代码。

配置 Chrome 调试：

首先安装"Debugger for Chrome"扩展（或使用内置的"Edge"调试器）。

在 launch.json 中添加：

json 复制代码

{
  "name": "Launch Chrome",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src"
}

然后先启动开发服务器（npm run dev），再按 F5 选择这个配置。Chrome 会打开，你在 VS Code 中设置的断点会生效。

19. 任务系统（tasks.json）

19.1 什么是任务系统？

任务是 VS Code 中自动化运行工具的方式。你可以配置任务来执行：

构建（编译 TypeScript、Sass、Less）
测试（运行单元测试）
代码检查（ESLint、Prettier）
启动开发服务器
任何你需要在终端中运行的命令

任务系统的价值在于：把你常用的命令保存下来，用快捷键一键运行。

19.2 创建第一个任务

方法一：从终端命令创建

在集成终端中运行一个命令（例如 npm run build）
右键点击终端，选择"将命令配置为任务"
VS Code 会自动生成 tasks.json

方法二：手动创建

按 Ctrl+Shift+P，输入"任务"，选择"配置任务" → "从模板创建 tasks.json" → 选择模板（如"Others"）。

创建后的 tasks.json 示例：

json 复制代码

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm build",
      "type": "shell",
      "command": "npm run build",
      "group": "build",
      "problemMatcher": []
    }
  ]
}

19.3 tasks.json 配置详解

配置项	说明
`label`	任务的显示名称，会在命令面板中显示
`type`	`shell`（在终端中执行）或 `process`（直接执行进程）
`command`	要执行的命令
`args`	命令参数（数组）
`group`	任务分组：`build`、`test`、`none`
`problemMatcher`	解析输出中的错误信息（用于问题面板）
`presentation`	控制终端显示方式
`options`	工作目录、环境变量等

19.4 常用任务示例

TypeScript 编译任务：

json 复制代码

{
  "label": "tsc build",
  "type": "shell",
  "command": "tsc",
  "args": ["-p", "."],
  "group": "build",
  "problemMatcher": ["$tsc"]
}

运行测试任务：

json 复制代码

{
  "label": "npm test",
  "type": "shell",
  "command": "npm test",
  "group": "test",
  "problemMatcher": []
}

启动开发服务器（后台运行）：

json 复制代码

{
  "label": "npm start",
  "type": "shell",
  "command": "npm start",
  "isBackground": true,
  "problemMatcher": []
}

19.5 运行任务

运行任务的方法：

命令面板：Ctrl+Shift+P → 输入"运行任务" → 选择任务
快捷键：Ctrl+Shift+B（运行默认构建任务）
终端下拉菜单：点击终端面板右上角的... → 运行任务

设置默认构建任务：

在命令面板中运行"配置默认构建任务"，选择一个任务。之后按 Ctrl+Shift+B 就会直接运行该任务。

19.6 将任务关联到调试

你可以在 launch.json 中设置 preLaunchTask，让调试启动前自动执行某个任务。

json 复制代码

{
  "name": "调试前先构建",
  "type": "node",
  "request": "launch",
  "program": "${workspaceFolder}/dist/app.js",
  "preLaunchTask": "tsc build"  // 调试前先执行 TypeScript 编译
}

这样每次按 F5 调试时，VS Code 会先编译代码，再启动调试。

第六部分小结

在第六部分中，你学会了：

✅ 调试的基本概念：断点、单步执行、监视、调用堆栈
✅ 设置断点：普通断点、条件断点、日志断点
✅ 调试控制面板：继续、单步跳过、单步调试、单步跳出
✅ 调试视图：变量区、监视区、调用堆栈区、断点区
✅ 配置 launch.json：Python、Node.js、Go 等语言的调试配置
✅ 调试参数和环境变量：args、env
✅ 调试 Web 应用：浏览器调试配置
✅ 任务系统 tasks.json：自动化运行构建、测试等命令
✅ 将任务关联到调试：preLaunchTask

现在，你已经掌握了 VS Code 中最强大的功能之一。调试能帮你节省大量排查问题的时间，而任务系统则让你不再需要记忆和输入各种命令行。

第七部分：个性化与高级配置

通过第六部分的学习，你已经掌握了 VS Code 的调试和任务系统。现在，你的编辑器已经具备了完整的开发能力。

但每个人的编码习惯不同，对编辑器的要求也不同。有人喜欢紧凑的界面，有人喜欢宽松的行距；有人习惯 2 个空格缩进，有人坚持 4 个空格；有人每次手动调整设置，有人希望配置能跨设备同步。

第七部分将带你学习 VS Code 的高级配置功能，让你的编辑器真正为你量身定制。

20. settings.json 深度定制

20.1 设置界面 vs 配置文件

VS Code 提供两种修改设置的方式：

方式	优点	缺点
图形界面（`Ctrl+,`）	可视化，有搜索功能，有下拉选项	无法批量修改，配置不易迁移
settings.json	可批量编辑，可注释，可版本控制，易迁移	需要记住配置项名称

推荐做法：先用图形界面探索和试验，找到喜欢的设置后，在 settings.json 中固化下来。

20.2 打开 settings.json

方法一：通过命令面板

按 Ctrl+Shift+P 打开命令面板
输入 Preferences: Open Settings (JSON)
选择执行

方法二：从设置界面跳转

按 Ctrl+, 打开设置
点击右上角的 {} 图标（打开设置 JSON）

方法三：直接打开文件

Windows：%APPDATA%\Code\User\settings.json
macOS：$HOME/Library/Application Support/Code/User/settings.json
Linux：$HOME/.config/Code/User/settings.json

20.3 编辑器核心配置

以下是每个开发者都应该了解的编辑器配置项。

字体与外观：

json 复制代码

{
  // 编辑器字体大小
  "editor.fontSize": 16,
  
  // 编辑器字体系列（支持多字体降级）
  "editor.fontFamily": "'Fira Code', 'JetBrains Mono', Consolas, monospace",
  
  // 启用字体连字（需要字体支持）
  "editor.fontLigatures": true,
  
  // 行高（推荐 1.4-1.6 之间）
  "editor.lineHeight": 1.5,
  
  // 是否显示行号
  "editor.lineNumbers": "on",  // on, off, relative, interval
  
  // 是否显示缩进参考线
  "editor.renderIndentGuides": true,
  
  // 是否显示行高亮
  "editor.renderLineHighlight": "all",  // none, gutter, line, all
}

编辑行为：

json 复制代码

{
  // 自动保存（推荐 afterDelay）
  "files.autoSave": "afterDelay",
  
  // 自动保存延迟（毫秒）
  "files.autoSaveDelay": 1000,
  
  // 缩进大小（空格数）
  "editor.tabSize": 2,
  
  // 按 Tab 时插入空格而非制表符
  "editor.insertSpaces": true,
  
  // 保存时自动格式化
  "editor.formatOnSave": true,
  
  // 粘贴时自动格式化
  "editor.formatOnPaste": true,
  
  // 输入时自动格式化（较耗性能）
  "editor.formatOnType": false,
  
  // 是否自动匹配括号
  "editor.autoClosingBrackets": "always",
  
  // 是否自动匹配引号
  "editor.autoClosingQuotes": "always",
  
  // 是否自动配对 HTML/XML 标签
  "editor.autoClosingTags": true,
  
  // 是否显示小地图
  "editor.minimap.enabled": true,
  
  // 小地图的位置
  "editor.minimap.side": "right",
  
  // 是否在滚动时平滑滚动
  "editor.smoothScrolling": true,
  
  // 光标样式（line, block, underline）
  "editor.cursorStyle": "line",
  
  // 光标闪烁动画
  "editor.cursorBlinking": "blink",
  
  // 是否渲染空白字符（空格、制表符）
  "editor.renderWhitespace": "selection",  // none, boundary, selection, all
  
  // 是否渲染控制字符
  "editor.renderControlCharacters": true,
  
  // 垂直参考线（代码长度提示）
  "editor.rulers": [80, 100, 120],
  
  // 括号对颜色化
  "editor.bracketPairColorization.enabled": true,
  
  // 括号对参考线
  "editor.guides.bracketPairs": true,
  
  // 是否显示折叠图标
  "editor.showFoldingControls": "mouseover",  // always, mouseover
}

滚动与显示：

json 复制代码

{
  // 滚动速度
  "editor.fastScrollSensitivity": 5,
  
  // 是否平滑滚动
  "editor.smoothScrolling": true,
  
  // 鼠标滚轮缩放字体
  "editor.mouseWheelZoom": true,
  
  // 是否突出显示当前行
  "editor.renderLineHighlight": "all",
  
  // 是否突出显示当前行的装饰（左边栏）
  "editor.renderLineHighlightOnlyWhenFocus": false,
}

20.4 工作台（界面）配置

工作台是 VS Code 的整体界面，包括活动栏、侧边栏、面板等。

json 复制代码

{
  // 活动栏是否可见
  "workbench.activityBar.visible": true,
  
  // 状态栏是否可见
  "workbench.statusBar.visible": true,
  
  // 侧边栏位置（left 或 right）
  "workbench.sideBar.location": "left",
  
  // 面板位置（bottom, left, right）
  "workbench.panel.defaultLocation": "bottom",
  
  // 是否显示面包屑导航
  "breadcrumbs.enabled": true,
  
  // 面包屑的文件路径显示方式（last, on, always）
  "breadcrumbs.filePath": "on",
  
  // 颜色主题
  "workbench.colorTheme": "One Dark Pro",
  
  // 文件图标主题
  "workbench.iconTheme": "material-icon-theme",
  
  // 产品图标主题（VS Code 自带的图标风格）
  "workbench.productIconTheme": "Default",
  
  // 启动时是否打开上次会话
  "window.restoreWindows": "all",  // all, folders, one, none
  
  // 新窗口打开新文件（不占用当前窗口）
  "window.openFilesInNewWindow": "on",
  
  // 标题栏样式（custom 或 native）
  "window.titleBarStyle": "custom",
  
  // 是否显示菜单栏（compact 为压缩模式）
  "window.menuBarVisibility": "compact",
}

20.5 文件与排除配置

json 复制代码

{
  // 控制哪些文件不显示在资源管理器中
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/__pycache__": true,
    "**/*.pyc": true,
    "**/dist": true,
    "**/build": true
  },
  
  // 控制哪些文件不参与搜索
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/*.log": true
  },
  
  // 文件关联（将特定后缀名识别为某种语言）
  "files.associations": {
    "*.vue": "vue",
    "*.wxss": "css",
    "*.wxml": "html"
  },
  
  // 默认文件换行符
  "files.eol": "\n",  // \n 或 \r\n
  
  // 是否在文件末尾插入新行
  "files.insertFinalNewline": true,
  
  // 是否删除文件末尾的空格
  "files.trimTrailingWhitespace": true,
  
  // 编码格式
  "files.encoding": "utf8",
}

20.6 终端配置

json 复制代码

{
  // 终端字体大小
  "terminal.integrated.fontSize": 14,
  
  // 终端字体系列
  "terminal.integrated.fontFamily": "'Fira Code', Consolas, monospace",
  
  // 终端行高
  "terminal.integrated.lineHeight": 1.2,
  
  // 终端光标样式
  "terminal.integrated.cursorStyle": "line",
  
  // 终端光标闪烁
  "terminal.integrated.cursorBlinking": true,
  
  // 滚动缓冲区大小（行数）
  "terminal.integrated.scrollback": 10000,
  
  // 默认终端类型（Windows）
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  
  // 默认终端类型（macOS）
  "terminal.integrated.defaultProfile.osx": "zsh",
  
  // 默认终端类型（Linux）
  "terminal.integrated.defaultProfile.linux": "bash",
  
  // 终端启动时的工作目录
  "terminal.integrated.cwd": "",
  
  // 终端是否启用右键粘贴
  "terminal.integrated.rightClickBehavior": "copyPaste",
  
  // 终端是否支持选择后复制
  "terminal.integrated.copyOnSelection": false,
}

20.7 我的推荐配置（完整版）

以下是我个人推荐的 settings.json 配置，你可以直接复制使用，然后根据自己的习惯调整：

json 复制代码

{
  // ========== 编辑器 ==========
  "editor.fontSize": 16,
  "editor.fontFamily": "'Fira Code', 'JetBrains Mono', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.5,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.autoClosingBrackets": "always",
  "editor.autoClosingQuotes": "always",
  "editor.minimap.enabled": true,
  "editor.minimap.side": "right",
  "editor.smoothScrolling": true,
  "editor.cursorStyle": "line",
  "editor.renderWhitespace": "selection",
  "editor.rulers": [80, 100],
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.mouseWheelZoom": true,
  "editor.renderLineHighlight": "all",
  
  // ========== 工作台 ==========
  "workbench.activityBar.visible": true,
  "workbench.statusBar.visible": true,
  "workbench.sideBar.location": "left",
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "breadcrumbs.enabled": true,
  "window.restoreWindows": "all",
  "window.titleBarStyle": "custom",
  "window.menuBarVisibility": "compact",
  
  // ========== 文件 ==========
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/__pycache__": true,
    "**/*.pyc": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true
  },
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  
  // ========== 终端 ==========
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.lineHeight": 1.2,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.scrollback": 10000,
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  
  // ========== Git ==========
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  
  // ========== 语言专项 ==========
  // Python
  "python.linting.enabled": true,
  "python.linting.pylintEnabled": true,
  "python.formatting.provider": "black",
  
  // Prettier
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2
}

21. 代码片段（Snippets）

21.1 什么是代码片段？

代码片段是一种快速输入重复代码的方式。你输入一个简短的前缀，按 Tab 键，VS Code 会自动展开成一段预定义的代码模板。

示例：

在 JavaScript 文件中输入 for，然后按 Tab，VS Code 会自动展开为：

javascript 复制代码

for (let i = 0; i < array.length; i++) {
  const element = array[i];
  
}

光标会自动定位到 i 和 array 的位置，方便你快速修改。

21.2 使用内置代码片段

VS Code 为每种语言内置了大量常用代码片段。你可以通过以下方式查看：

在编辑器中按 Ctrl+Shift+P
输入 Insert Snippet
选择执行，会显示当前语言的所有可用代码片段

常用内置片段示例（JavaScript/TypeScript）：

前缀	展开内容
`for`	for 循环
`forof`	for...of 循环
`foreach`	forEach 方法
`if`	if 语句
`ifelse`	if-else 语句
`func`	函数声明
`arrow`	箭头函数
`clog`	console.log
`settimeout`	setTimeout
`setinterval`	setInterval

常用内置片段示例（Python）：

前缀	展开内容
`for`	for 循环
`while`	while 循环
`if`	if 语句
`ifmain`	if name == 'main'
`def`	函数定义
`class`	类定义
`try`	try-except 语句

21.3 创建自己的代码片段

当内置片段不够用时，你可以创建自己的代码片段。

操作步骤：

按 Ctrl+Shift+P 打开命令面板
输入 Snippets，选择 Preferences: Configure User Snippets
选择要创建片段的目标语言（如 javascript、python、html）
选择 新建全局代码片段文件（创建新文件）或选择已有语言文件

代码片段的格式：

json 复制代码

{
  "片段名称": {
    "prefix": "触发前缀",
    "body": [
      "第一行代码",
      "第二行代码 $1",  // $1 表示第一个光标位置
      "第三行代码 $2"   // $2 表示第二个光标位置
    ],
    "description": "片段描述"
  }
}

示例：创建一个 React 组件片段

在 javascript.json 或新建 react.json 中添加：

json 复制代码

{
  "React 函数组件": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "function $1($2) {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}",
      "",
      "export default $1;"
    ],
    "description": "创建 React 函数组件"
  }
}

使用方式：在 .jsx 或 .tsx 文件中输入 rfc，按 Tab，就会生成完整的组件模板。光标会依次定位到 $1（组件名）、$2（参数）、$0（最终位置）。

占位符说明：

占位符	说明
`$1`、`$2`、`$3`...	光标位置，按 Tab 依次跳转
`$0`	最终光标位置
`${1:默认值}`	带默认值的占位符，光标选中后可直接修改
`$TIMESTAMP`	当前时间戳
`$TM_FILENAME`	当前文件名
`$TM_FILENAME_BASE`	当前文件名（不含扩展名）

带默认值的示例：

json 复制代码

{
  "Console Log": {
    "prefix": "clog",
    "body": [
      "console.log('${1:变量名}:', ${1:变量名});"
    ],
    "description": "带标签的 console.log"
  }
}

输入 clog 按 Tab 后，会生成 console.log('变量名:', 变量名);，并且两处的"变量名"会同时被选中，修改一处另一处同步改变。

21.4 分享和同步代码片段

你的代码片段保存在以下位置：

全局片段：<用户目录>/.vscode/ 下的 .code-snippets 文件
语言特定片段：<用户目录>/.vscode/ 下的 语言名.json

你可以：

将这些文件放到 GitHub 仓库中，跨设备同步
使用 Settings Sync 扩展自动同步
分享给团队成员

22. 工作区与多根目录

22.1 什么是工作区？

工作区（Workspace）是 VS Code 中一个非常重要的概念。简单来说，工作区是"当前项目的上下文"。

当你打开一个文件夹时，VS Code 会自动创建一个工作区。工作区包含：

当前打开的文件列表
侧边栏的展开/折叠状态
断点信息
工作区专属的设置（覆盖用户设置）
工作区专属的代码片段

22.2 工作区设置 vs 用户设置

VS Code 的设置分为三个层级，优先级从低到高：

层级	位置	作用范围	优先级
默认设置	VS Code 内置	所有用户和项目	最低
用户设置	settings.json	当前用户的所有项目	中
工作区设置	.vscode/settings.json	当前项目	最高

工作区设置会覆盖用户设置。这很有用，因为不同项目可能有不同的规范：

项目 A 使用 2 个空格缩进
项目 B 使用 4 个空格缩进

你可以在项目根目录的 .vscode/settings.json 中配置工作区专属设置。

创建工作区设置：

在项目根目录创建 .vscode 文件夹
在 .vscode 文件夹中创建 settings.json 文件
写入项目专属配置

示例（.vscode/settings.json）：

json 复制代码

{
  "editor.tabSize": 4,
  "editor.insertSpaces": true,
  "files.trimTrailingWhitespace": true,
  "python.linting.enabled": true
}

22.3 保存工作区（.code-workspace）

当你需要同时处理多个项目文件夹时，可以创建一个 .code-workspace 文件。

创建步骤：

打开第一个项目文件夹
点击资源管理器顶部的"将文件夹添加到工作区"（三个点菜单）
选择第二个文件夹
文件 → 将工作区另存为
输入文件名（如 my-project.code-workspace）

保存后，.code-workspace 文件会记录：

工作区中包含哪些根文件夹
工作区专属的设置
工作区专属的扩展推荐

.code-workspace 文件示例：

json 复制代码

{
  "folders": [
    {
      "path": "frontend"
    },
    {
      "path": "backend"
    }
  ],
  "settings": {
    "editor.tabSize": 2,
    "files.exclude": {
      "**/node_modules": true
    }
  },
  "extensions": {
    "recommendations": [
      "dbaeumer.vscode-eslint",
      "esbenp.prettier-vscode"
    ]
  }
}

双击 .code-workspace 文件，VS Code 会以多根目录模式打开。

22.4 工作区扩展推荐

你可以在 .vscode/extensions.json 中为项目推荐扩展。当其他开发者打开项目时，VS Code 会提示他们安装这些扩展。

示例（.vscode/extensions.json）：

json 复制代码

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "ms-python.python"
  ],
  "unwantedRecommendations": [
    "hookyqr.beautify"  // 不推荐使用的扩展
  ]
}

22.5 工作区代码片段

你也可以在工作区中创建专属代码片段，只对当前项目生效。

创建步骤：

按 Ctrl+Shift+P
输入 Snippets，选择 Preferences: Configure User Snippets
选择 New Snippets file for '当前项目名'
在弹出的文件中编写代码片段

工作区代码片段保存在 .vscode/项目名.code-snippets 中，可以提交到 Git，团队成员共享。

第七部分小结

在第七部分中，你学会了：

✅ settings.json 深度定制：编辑器、工作台、文件、终端等配置
✅ 我的推荐配置：可以直接复制使用的完整配置
✅ 代码片段：使用内置片段、创建自定义片段
✅ 片段占位符 ：$1、$2、${1:默认值}、环境变量等
✅ 工作区概念：用户设置 vs 工作区设置
✅ 工作区设置 ：.vscode/settings.json
✅ 多根目录工作区 ：.code-workspace 文件
✅ 扩展推荐 ：.vscode/extensions.json
✅ 工作区代码片段：团队共享的代码模板

现在，你的 VS Code 已经完成了从零到一的所有配置。你可以根据自己的习惯深度定制，也可以将配置同步到多台设备。

第八部分：实战与总结

通过前七个部分的学习，你已经掌握了 VS Code 从安装配置到高级功能的全部核心知识。但知识只有在实践中才能真正内化。

第八部分将分为三个章节：

实战演练：从零开始搭建一个完整的项目，串联前面学到的所有功能
常见问题与避坑指南：汇总初学者最容易遇到的 10 个问题及解决方法
学习资源推荐：帮助你继续深入学习的资料

23. 实战演练：从零搭建一个完整项目

本次实战演练的目标是：从零开始，使用 VS Code 创建一个完整的 Web 项目，并完成从编码到调试的全流程。

我们选择创建一个简单的待办事项（Todo）应用，使用 HTML/CSS/JavaScript 实现。这个项目虽然简单，但能覆盖 VS Code 的大部分核心功能。

23.1 步骤 1：创建项目文件夹并打开

在电脑上创建一个新文件夹，命名为 todo-app
打开 VS Code
菜单栏：文件 → 打开文件夹 → 选择 todo-app
或者使用命令行：在终端中进入 todo-app 目录，执行 code .

💡 这一步练习了：打开文件夹、从命令行启动 VS Code。

23.2 步骤 2：创建项目文件

在资源管理器中，右键点击空白区域，选择"新建文件"，依次创建以下文件：

复制代码

todo-app/
├── index.html
├── style.css
├── script.js
└── .gitignore

💡 这一步练习了：在资源管理器中创建文件。

23.3 步骤 3：编写代码

index.html：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项应用</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>📝 待办事项</h1>
        <div class="input-section">
            <input type="text" id="todoInput" placeholder="输入新任务...">
            <button id="addBtn">添加</button>
        </div>
        <ul id="todoList"></ul>
        <div class="stats">
            <span id="totalCount">总计: 0</span>
            <span id="completedCount">已完成: 0</span>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

style.css：

css 复制代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background: white;
    border-radius: 16px;
    padding: 32px;
    width: 500px;
    max-width: 90%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 24px;
}

.input-section {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

#todoInput {
    flex: 1;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.2s;
}

#todoInput:focus {
    outline: none;
    border-color: #667eea;
}

#addBtn {
    padding: 12px 24px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

#addBtn:hover {
    background: #5a67d8;
}

#todoList {
    list-style: none;
    margin-bottom: 24px;
}

.todo-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
    gap: 12px;
}

.todo-item.completed .todo-text {
    text-decoration: line-through;
    color: #aaa;
}

.todo-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.todo-text {
    flex: 1;
    font-size: 16px;
}

.delete-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

.delete-btn:hover {
    background: #c82333;
}

.stats {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
    color: #666;
    font-size: 14px;
}

script.js：

javascript 复制代码

// 待办事项数据
let todos = [];

// DOM 元素
const todoInput = document.getElementById('todoInput');
const addBtn = document.getElementById('addBtn');
const todoList = document.getElementById('todoList');
const totalCount = document.getElementById('totalCount');
const completedCount = document.getElementById('completedCount');

// 从 localStorage 加载数据
function loadTodos() {
    const stored = localStorage.getItem('todos');
    if (stored) {
        todos = JSON.parse(stored);
    }
    renderTodos();
}

// 保存数据到 localStorage
function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));
}

// 渲染待办列表
function renderTodos() {
    if (todos.length === 0) {
        todoList.innerHTML = '<li style="text-align:center;color:#999;">暂无任务，添加一个吧</li>';
        updateStats();
        return;
    }

    todoList.innerHTML = todos.map((todo, index) => `
        <li class="todo-item ${todo.completed ? 'completed' : ''}" data-index="${index}">
            <input type="checkbox" class="todo-checkbox" ${todo.completed ? 'checked' : ''}>
            <span class="todo-text">${escapeHtml(todo.text)}</span>
            <button class="delete-btn">删除</button>
        </li>
    `).join('');

    updateStats();
}

// 更新统计数据
function updateStats() {
    const total = todos.length;
    const completed = todos.filter(todo => todo.completed).length;
    totalCount.textContent = `总计: ${total}`;
    completedCount.textContent = `已完成: ${completed}`;
}

// 简单的防 XSS 函数
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// 添加待办
function addTodo() {
    const text = todoInput.value.trim();
    if (text === '') {
        alert('请输入任务内容');
        return;
    }

    todos.push({
        id: Date.now(),
        text: text,
        completed: false
    });

    todoInput.value = '';
    saveTodos();
    renderTodos();
}

// 切换完成状态
function toggleTodo(index) {
    todos[index].completed = !todos[index].completed;
    saveTodos();
    renderTodos();
}

// 删除待办
function deleteTodo(index) {
    todos.splice(index, 1);
    saveTodos();
    renderTodos();
}

// 事件监听（事件委托）
todoList.addEventListener('click', (e) => {
    const li = e.target.closest('.todo-item');
    if (!li) return;

    const index = parseInt(li.dataset.index);

    if (e.target.classList.contains('todo-checkbox')) {
        toggleTodo(index);
    } else if (e.target.classList.contains('delete-btn')) {
        deleteTodo(index);
    }
});

// 回车添加
todoInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        addTodo();
    }
});

// 添加按钮点击
addBtn.addEventListener('click', addTodo);

// 初始化
loadTodos();

💡 这一步练习了：多文件编辑、代码格式化（Shift+Alt+F）、语法高亮、括号匹配。

23.4 步骤 4：使用 Live Server 预览

安装 Live Server 扩展（如果还没安装）
右键点击 index.html 文件
选择 Open with Live Server
浏览器会自动打开 http://127.0.0.1:5500/index.html

现在你可以看到待办应用了。修改任何代码后，浏览器会自动刷新。

💡 这一步练习了：扩展安装、Live Server 使用、热重载。

23.5 步骤 5：使用集成终端运行

你也可以用终端启动一个简单的 HTTP 服务器：

按 Ctrl+`` 打开集成终端
确认当前目录是 todo-app
运行以下命令（需要 Node.js）：

bash 复制代码

npx serve .

终端会显示 http://localhost:3000，按 Ctrl+点击 打开

💡 这一步练习了：集成终端的打开和使用。

23.6 步骤 6：调试 JavaScript

在 script.js 中，找到 addTodo 函数
在函数的第一行（const text = ...）左侧行号处点击，设置一个断点（红点）
按 F5 启动调试，选择环境为 Chrome 或 Edge
浏览器打开后，在输入框中输入内容，点击"添加"按钮
程序会在断点处暂停
鼠标悬停在 text 变量上，查看它的值
按 F10 单步执行，观察程序走向
按 F5 继续运行

💡 这一步练习了：设置断点、启动调试、单步执行、查看变量。

23.7 步骤 7：使用 Git 版本控制

按 Ctrl+Shift+G 打开源代码管理面板
初始化仓库：点击"初始化仓库"
创建 .gitignore 文件，写入：

node_modules/
.vscode/
.DS_Store
在源代码管理面板中，输入提交信息：初始化待办应用项目
按 Ctrl+Enter 提交
（可选）关联远程仓库并推送

💡 这一步练习了：Git 初始化、.gitignore、提交、推送。

23.8 步骤 8：创建代码片段

假设你经常需要创建类似的 HTML 结构，可以创建一个代码片段。

按 Ctrl+Shift+P，输入 Snippets
选择 Configure User Snippets → html
在 html.json 中添加：

json 复制代码

{
  "Todo App 模板": {
    "prefix": "todoapp",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"zh-CN\">",
      "<head>",
      "    <meta charset=\"UTF-8\">",
      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "    <title>$1</title>",
      "    <link rel=\"stylesheet\" href=\"style.css\">",
      "</head>",
      "<body>",
      "    <div class=\"container\">",
      "        $0",
      "    </div>",
      "    <script src=\"script.js\"></script>",
      "</body>",
      "</html>"
    ],
    "description": "Todo 应用 HTML 模板"
  }
}

新建一个 HTML 文件，输入 todoapp，按 Tab，就会自动生成模板

💡 这一步练习了：创建自定义代码片段。

23.9 实战总结

在这次实战演练中，你完整地实践了：

✅ 创建项目并打开文件夹
✅ 创建和编辑多个文件
✅ 使用 Live Server 预览
✅ 使用集成终端运行命令
✅ 设置断点并调试 JavaScript
✅ 使用 Git 进行版本控制
✅ 创建自定义代码片段

这个项目虽然简单，但它涵盖了日常开发的完整流程。你可以在这个基础上继续扩展：添加编辑功能、添加分类、使用框架重构等。

24. 常见问题与避坑指南

以下是 VS Code 初学者最常遇到的 10 个问题及解决方法。

24.1 中文显示乱码怎么办？

问题： 打开文件时，中文显示为乱码（通常是 GBK 编码的文件）。

解决方法：

点击右下角状态栏的编码信息（如 UTF-8）
选择 Reopen with Encoding → GBK（或 GB2312）
如果经常遇到，可以在 settings.json 中设置：

json 复制代码

{
  "files.autoGuessEncoding": true
}

24.2 终端中文显示乱码怎么办？

问题： 在集成终端中运行命令，输出中文显示为乱码。

解决方法（Windows）：

确保系统区域设置支持 UTF-8
或者在 settings.json 中设置：

json 复制代码

{
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.shellArgs.windows": ["-NoExit", "-Command", "chcp 65001"]
}

24.3 扩展装太多了，VS Code 卡顿怎么办？

问题： 安装了太多扩展后，VS Code 启动变慢，运行卡顿。

解决方法：

禁用不常用的扩展（齿轮图标 → 禁用）
卸载确定不用的扩展
检查扩展的激活时间：命令面板 → Developer: Show Running Extensions
考虑创建工作区专属扩展（.vscode/extensions.json），按项目按需启用

24.4 保存时自动格式化不生效怎么办？

问题： 设置了 "editor.formatOnSave": true，但保存时没有格式化。

解决方法：

检查是否安装了格式化扩展（如 Prettier）
检查是否设置了默认格式化工具：

json 复制代码

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

检查文件类型是否被排除："[javascript]": { "editor.formatOnSave": false }
查看输出面板（Ctrl+Shift+U）→ 选择"格式化"频道，查看错误信息

24.5 找不到 Python/Node.js 解释器怎么办？

问题： 按 F5 调试时，提示找不到 Python 或 Node.js。

解决方法：

确保已安装对应的运行时（Python、Node.js）
在终端中运行 python --version 或 node --version 确认
在 settings.json 中手动指定路径：

json 复制代码

{
  "python.defaultInterpreterPath": "C:/Python39/python.exe"
}

重新加载 VS Code（Ctrl+Shift+P → Developer: Reload Window）

24.6 Git 无法识别怎么办？

问题： 源代码管理面板显示"未找到 Git"。

解决方法：

安装 Git for Windows（如果没安装）
在 settings.json 中手动指定 Git 路径：

json 复制代码

{
  "git.path": "C:/Program Files/Git/bin/git.exe"
}

重新加载 VS Code

24.7 如何在 VS Code 中打开多个项目？

问题： 想要同时编辑两个独立的项目。

解决方法：

方法一 ：打开一个新窗口（Ctrl+Shift+N），在新窗口中打开第二个项目
方法二：使用多根目录工作区，将两个项目文件夹添加到同一个工作区

24.8 如何重置所有设置？

问题： 设置改乱了，想恢复到初始状态。

解决方法：

关闭 VS Code
删除/重命名 settings.json 文件：
- Windows：%APPDATA%\Code\User\settings.json
- macOS：$HOME/Library/Application Support/Code/User/settings.json
- Linux：$HOME/.config/Code/User/settings.json
重新打开 VS Code，设置会恢复为默认值

24.9 如何同步多台电脑的配置？

问题： 在家和公司的电脑上想使用相同的配置和扩展。

解决方法：

VS Code 内置了设置同步功能：

点击左下角齿轮图标 → Turn on Settings Sync
登录 GitHub 或 Microsoft 账号
选择要同步的内容（设置、扩展、代码片段等）
在其他电脑上执行相同操作，配置会自动同步

24.10 如何在命令行中打开 VS Code？

问题： 想在终端中输入 code . 打开当前目录。

解决方法：

Windows：安装时勾选"添加到 PATH"，或手动将 VS Code 安装目录添加到 PATH
macOS ：打开 VS Code，按 Cmd+Shift+P，输入 Shell Command，选择 Install 'code' command in PATH
Linux：安装时自动添加，或手动创建软链接

25. 学习资源推荐

25.1 官方资源

资源名称	地址	说明
VS Code 官方网站	code.visualstudio.com	下载、文档、更新日志
VS Code 文档	code.visualstudio.com/docs	官方完整文档（有中文版）
VS Code 更新日志	code.visualstudio.com/updates	每月新功能介绍
VS Code 博客	code.visualstudio.com/blogs	深度技术文章
VS Code GitHub	github.com/microsoft/vscode	开源仓库

25.2 视频教程

资源名称	平台	说明
VS Code 官方 YouTube	YouTube @code	功能演示、技巧分享
Visual Studio Code 入门教程	哔哩哔哩	搜索"VS Code 教程"，大量中文资源
VS Code 技巧合集	YouTube (Fireship)	短小精悍的技巧视频

25.3 书籍与文章

资源名称	说明
VS Code 官方文档中文版	code.visualstudio.com/docs?lang=zh-cn
VS Code 必装扩展推荐	搜索"VS Code extensions 2025"
VS Code 调试完全指南	官方文档的调试章节

25.4 社区与问答

资源名称	地址	说明
Stack Overflow	stackoverflow.com/questions/tagged/vscode	问答社区
VS Code 中文社区	搜索"VS Code 中文论坛"	中文交流
Reddit r/vscode	reddit.com/r/vscode	英文社区

教程总结

你学到的东西

部分	核心内容
第一部分	安装配置、界面布局、首日配置
第二部分	核心编辑操作、搜索替换、多光标、代码折叠
第三部分	快捷键体系、命令面板、分屏编辑、工作区
第四部分	扩展生态、必装扩展、扩展配置
第五部分	集成终端、Git 可视化、GitLens
第六部分	调试系统、launch.json、任务系统
第七部分	settings.json 定制、代码片段、工作区配置
第八部分	实战演练、常见问题、学习资源

下一步建议

把 VS Code 设为主要编辑器：坚持使用，刻意练习快捷键
安装 5-10 个核心扩展：不要贪多，够用就好
定制自己的 settings.json：找到最适合你的配置
创建常用代码片段：把重复代码变成片段
学习调试技巧：少写 console.log，多用断点

教程完

恭喜你完成了《VS Code 从 0 到 1 完全教程》的全部学习！

现在，你已经拥有了一套高效、个性化的开发环境。VS Code 是你未来无数项目的起点，希望这个工具能陪伴你写出更好的代码。

祝你编码愉快！🎉