Visual Studio Code (VS Code) 超详细教程
目录
-
第一部分：初识 VS Code
（图片来源网络，侵删）- 什么是 VS Code？
- 为什么选择 VS Code？
- 下载与安装
-
第二部分：界面漫游与核心设置
- 熟悉工作区
- 自定义 VS Code（设置）
- 常用快捷键
-
第三部分：核心功能详解
- 文件与项目管理
- 代码编辑利器
- 强大的代码补全与智能提示
- 运行与调试代码
- 集成终端
-
第四部分：扩展 - VS Code 的灵魂
- 什么是扩展？
- 安装与管理扩展
- 必备扩展推荐
-
第五部分：实战演练
（图片来源网络，侵删）- 编写你的第一个 Python "Hello, World"
- 创建一个简单的 HTML 网页
-
第六部分：进阶技巧与最佳实践
- 使用代码片段
- 版本控制集成
- 任务自动化
- 多光标编辑
-
第七部分：总结与资源
第一部分：初识 VS Code
什么是 VS Code？
Visual Studio Code（简称 VS Code）是一款由微软开发的免费、开源、跨平台的源代码编辑器，它支持 Windows、macOS 和 Linux 操作系统。
注意：它和功能强大的 Visual Studio (VS) 不同，VS Code 是一个轻量级但功能极其丰富的编辑器，而非完整的 IDE（集成开发环境），但通过扩展，它可以拥有 IDE 的几乎所有功能。
（图片来源网络，侵删）
为什么选择 VS Code？
- 免费且开源：完全免费，没有功能限制。
- 轻量快速：启动迅速，占用资源少，即使在性能较弱的电脑上也能流畅运行。
- 强大的生态系统：拥有海量的扩展，可以支持几乎所有主流的编程语言（Python, JavaScript, C++, Go, Java 等）和工具。
- 内置 Git 支持：版本控制功能无缝集成，开箱即用。
- 智能代码补全：基于语言服务，提供精准的代码提示和自动补全。
- 强大的调试功能：内置调试器，可以轻松设置断点、查看变量、单步执行。
- 高度可定制：几乎所有的界面、行为、快捷键都可以通过设置文件进行个性化调整。
下载与安装
- 访问官方下载页面：https://code.visualstudio.com/
- 根据你的操作系统选择对应的版本进行下载。
- 双击安装包,按照提示完成安装。
- 重要提示（Windows 用户）：在安装过程中，务必勾选 "Add to PATH" 选项，这样你就可以在命令行中直接使用
code命令来打开 VS Code 或编辑文件。 - macOS 用户：推荐将 VS Code 拖到应用程序文件夹中。
- 重要提示（Windows 用户）：在安装过程中，务必勾选 "Add to PATH" 选项，这样你就可以在命令行中直接使用
- 安装完成后,启动 VS Code。
第二部分：界面漫游与核心设置
启动 VS Code 后，你会看到以下界面：
- Activity Bar (活动栏)：位于最左侧，包含视图图标，如：文件资源管理器、搜索、Git、调试、扩展等。
- Side Bar (侧边栏)：显示当前活动视图的内容，例如文件列表或搜索结果。
- Editor Group (编辑器组)：中央区域，是你编写代码的地方，可以同时打开多个文件，甚至可以进行分屏编辑。
- Panel (面板)：位于编辑器下方，用于显示输出、终端、错误列表等信息。
- Status Bar (状态栏)：位于窗口最底部，显示当前打开文件、光标位置、编码、行结束符等信息。
自定义 VS Code（设置）
VS Code 的设置非常灵活，主要通过 settings.json 文件管理。
-
打开设置：
- 点击左下角齿轮图标,选择 "设置"。
- 使用快捷键
Ctrl + ,(Windows/Linux) 或Cmd + ,(macOS)。
-
UI 模式：
- UI 模式：直观的图形界面，方便新手浏览和修改设置。
- JSON 模式：直接编辑
settings.json文件，适合高级用户进行精确配置和设置同步。
-
常用设置示例： 在设置搜索框中输入关键词即可找到对应选项。
editor.fontSize：编辑器字体大小。editor.tabSize：制表符宽度（通常设为 2 或 4）。editor.renderWhitespace：显示空格和制表符，有助于检查格式问题。files.autoSave：自动保存文件（afterDelay延迟几秒，onFocusChange切换窗口时）。search.exclude：在全局搜索时排除某些文件或文件夹（如node_modules,dist）。
常用快捷键
熟练使用快捷键是提升效率的关键。
| 功能 | Windows/Linux | macOS |
|---|---|---|
| 打开文件 | Ctrl + O |
Cmd + O |
| 新建文件 | Ctrl + N |
Cmd + N |
| 保存文件 | Ctrl + S |
Cmd + S |
| 保存所有 | Ctrl + K S |
Cmd + K S |
| 关闭当前文件 | Ctrl + W |
Cmd + W |
| 关闭所有文件 | Ctrl + K W |
Cmd + K W |
| 打开命令面板 | Ctrl + Shift + P |
Cmd + Shift + P |
| 快速打开文件 | Ctrl + P |
Cmd + P |
| 切换侧边栏 | Ctrl + B |
Cmd + B |
| 切换终端 | Ctrl + \ (反引号) |Cmd + ` ` (反引号) |
|
| 格式化代码 | Shift + Alt + F |
Shift + Option + F |
| 跳转到定义 | F12 |
F12 |
| 返回 | Alt + ← |
Ctrl + - |
| 前进 | Alt + → |
Ctrl + Shift + - |
提示：在 VS Code 中按
Ctrl + K Ctrl + S可以打开键盘快捷键设置，你可以在这里查看、修改和导出所有快捷键。
第三部分：核心功能详解
文件与项目管理
- 文件资源管理器：左侧的文件图标，用于浏览和打开项目文件。
- 创建/删除/重命名：右键点击文件或文件夹即可进行操作。
- 工作区：VS Code 针对的是“文件夹”而不是单个文件，当你打开一个文件夹时，它就成为一个“工作区”，VS Code 会记住这个工作区的布局、打开的文件和自定义设置。
- 多根工作区：你可以同时打开多个不相关的文件夹到一个工作区中。
代码编辑利器
- 多光标编辑：
- 添加光标：按住
Ctrl(Windows/Linux) 或Cmd(macOS) 并点击鼠标。 - 列编辑：按住
Shift + Alt并拖动鼠标选择一列，或按Ctrl + Shift + L(Windows/Linux) /Cmd + Shift + L(macOS) 选中所有相同的词。
- 添加光标：按住
- 代码折叠：点击代码行号左侧的 符号可以折叠代码块。
- 括号匹配：光标定位到括号上时，对应的括号会高亮显示。
- 自动保存：在设置中开启后，修改会自动保存，避免意外丢失。
强大的代码补全与智能提示
VS Code 的智能提示是其核心优势之一。
- IntelliSense：当你输入代码时，VS Code 会根据上下文提供变量、函数、属性等的列表。
- 触发提示：通常输入 或 就会自动触发。
- 接受建议：按
Enter或Tab键接受高亮的建议。
运行与调试代码
- 运行代码：
确保你安装
