Visual Studio Code 开发环境介绍与使用指南

Visual Studio Code 开发环境介绍与使用指南#

版本参考：本文基于 VS Code 最新版本 v1.110（2026年2月） 编写 适用人群：零基础入门者 / 在校学生 / 开发者 最后更新：2026年3月

目录#

  1. VS Code 简介

  2. 发展历史

  3. 最新版本功能（v1.109 / v1.110）

  4. 下载与安装

  5. 界面布局与基本概念

  6. 基本操作方法

  7. 常用快捷键速查表

  8. 必装插件推荐

  9. 中文视频教程推荐

  10. 官方中文文档与参考资料

1. VS Code 简介#

Visual Studio Code（简称 VS Code）是微软于 2015 年推出的一款免费、开源、跨平台的代码编辑器。它支持 Windows、macOS 和 Linux 三大操作系统，凭借轻量、高扩展性和强大的 AI 辅助能力，迅速成为全球最受欢迎的代码编辑器。

根据 Stack Overflow 历年开发者调查，VS Code 已连续多年荣登”最受欢迎开发工具”榜首，全球活跃用户超过 1500 万。

核心特点：

  • 轻量快速：启动速度快，占用资源少，远优于传统 IDE

  • 多语言支持：开箱支持 JavaScript、TypeScript、Python、C/C++、Java、Go 等主流语言

  • 强大扩展生态：插件市场拥有超过 50,000 款扩展，满足各类开发需求

  • 深度 Git 集成：内置 Git 版本控制，无需额外工具

  • AI 智能辅助：深度集成 GitHub Copilot，支持 Claude、GPT 等多种 AI 模型

  • 完全免费开源：MIT 许可证，代码托管于 GitHub

2. 发展历史#

时间

版本 / 事件

里程碑

2015年4月

首次公开预览

在 Microsoft Build 2015 大会上亮相，引发开发者热烈反响

2015年11月

开源发布

以 MIT 许可证开源，代码托管至 GitHub

2016年4月

v1.0 正式发布

第一个正式稳定版本发布，支持扩展市场

2017年

扩展生态爆发

插件数量突破 3,000，远程开发支持增强

2019年

Remote 系列扩展

发布 Remote-SSH、Remote-WSL、Remote-Containers，支持远程开发

2019年

Stack Overflow 调查

首次荣登”最受欢迎开发环境”第一名

2020年

GitHub Codespaces

与 GitHub 深度整合，支持云端开发

2021年

Web 版发布

vscode.dev 上线，支持浏览器直接运行 VS Code

2022年

GitHub Copilot 集成

AI 代码补全正式进入 VS Code 生态

2023年

Copilot Chat 上线

对话式 AI 编程助手内置到 VS Code

2024年

Agent 模式预览

AI 自主完成复杂任务的 Agent 模式进入预览

2025年6月

Copilot 开源

GitHub Copilot Chat 扩展代码正式开源

2025年12月

v1.108

Agent Skills 发布，支持自定义教导 AI 编程知识

2026年2月

v1.110（最新）

Agent Plugins、浏览器工具、会话记忆等重磅功能发布

3. 最新版本功能#

v1.110（2026年2月）—— 当前最新稳定版#

主题：让 AI Agent 处理更长、更复杂的任务

🤖 Agent 增强#

  • Agent Plugins（代理插件）：可从扩展市场安装预打包的代理能力束，一个插件可同时提供斜杠命令、MCP 服务器、Agent Skills 等

  • 浏览器工具（Agentic Browser Tools）：实验性功能，让 Agent 直接操控 VS Code 内置浏览器，自动验证代码修改效果，无需手动测试

  • 会话记忆（Session Memory）：计划和引导信息可跨对话轮次持久保存，Agent 不再”健忘”

  • 上下文压缩（Context Compaction）：支持手动使用 /compact 命令压缩对话历史，释放上下文空间

  • Fork 对话：从当前对话派生新的独立会话，可探索不同解决路径

  • Agent Debug 面板：实时查看 Agent 事件、工具调用和加载的自定义配置

💬 Chat 改进#

  • 无障碍访问全面提升：屏幕阅读器支持、键盘导航、通知信号

  • 使用 /autoApprove 斜杠命令快速切换全局自动审批

  • Edit 模式已整合进 Agent 模式，功能更完整

🖥️ 终端与编辑器#

  • 终端支持 Kitty 图形协议，可直接在终端中渲染高保真图像

  • 新增 .code-profile 文件拖拽导入配置

  • 面包屑路径支持配置分隔符复制

v1.109（2026年1月）——上一版本主要功能#

  • 多 Agent 协同：可同时运行本地、后台、云端多个 Agent 并统一管理

  • Claude Agent 支持：直接集成 Anthropic Claude Agent SDK

  • Copilot Memory：跨对话记忆用户偏好和项目上下文

  • 终端沙箱（实验性）：限制 Agent 执行的命令访问文件和网络权限

  • MCP Apps：在对话中渲染交互式可视化

  • Agent Hooks：在 Agent 生命周期关键节点执行自定义脚本

4. 下载与安装#

官方下载地址#

各平台安装方法#

Windows：

  1. 访问官网下载 .exe 安装包（推荐 System Installer）

  2. 双击运行，按向导完成安装

  3. 建议勾选”添加到 PATH”和”添加右键菜单”选项

macOS：

  1. 下载 .dmg 文件

  2. 拖拽 VS Code 图标到 Applications 文件夹

  3. 在终端执行 code . 命令打开当前目录（需在命令面板执行 Shell Command: Install 'code' command in PATH）

Linux（Ubuntu / Debian）：

sudo apt update
sudo apt install code   # 需先添加 Microsoft 软件源

或直接下载 .deb 包：

sudo dpkg -i code_*.deb

汉化设置（设置中文界面）#

  1. 打开命令面板：Ctrl+Shift+P（macOS: Cmd+Shift+P）

  2. 输入 Configure Display Language，回车

  3. 选择 zh-cn（如未安装，会提示安装中文语言包）

  4. 重启 VS Code 即可

5. 界面布局与基本概念#

┌─────────────────────────────────────────────────────┐
│  菜单栏（File / Edit / View / ...）                   │
├──────┬──────────────────────────────────┬────────────┤
│      │                                  │            │
│ 活   │         编辑器区域               │  右侧面板  │
│ 动   │    （可分割多个编辑器）           │  （可选）  │
│ 栏   ├──────────────────────────────────┤            │
│      │         面板区域                 │            │
│      │  （终端 / 问题 / 输出 / 调试）   │            │
├──────┴──────────────────────────────────┴────────────┤
│  状态栏（语言模式 / 行列号 / Git 分支 / 编码格式）    │
└─────────────────────────────────────────────────────┘

五大核心区域说明：

① 活动栏（Activity Bar）
位于最左侧，包含五个核心视图的快捷按钮：

  • 📁 资源管理器：查看和管理项目文件

  • 🔍 搜索：全局搜索和替换

  • 🔀 源代码管理（Git）：版本控制操作

  • 🐛 运行和调试：程序调试

  • 🧩 扩展：安装和管理插件

② 侧边栏（Side Bar）
点击活动栏图标后展开的详细面板，如文件树、搜索结果等。

③ 编辑器区域（Editor）
主要工作区域，支持多标签页和分屏编辑（最多 3 列 + 多行）。

④ 面板区域（Panel）
底部区域，包含终端（Terminal）、问题（Problems）、输出（Output）、调试控制台（Debug Console）。

⑤ 状态栏（Status Bar）
最底部，显示当前文件的语言模式、行列号、Git 分支、缩进类型、文件编码等信息，点击可快速切换。

6. 基本操作方法#

6.1 打开文件 / 文件夹#

文件 → 打开文件夹           打开整个项目目录（推荐）
文件 → 打开文件             打开单个文件
命令行: code .              在终端中打开当前目录
命令行: code /path/to/dir  打开指定目录

6.2 命令面板（最重要的功能！）#

按 Ctrl+Shift+P（macOS: Cmd+Shift+P）打开命令面板，可以执行 VS Code 的一切操作。

常用前缀含义：

  • >：执行命令（默认）

  • @：跳转到当前文件的符号

  • #：搜索工作区所有符号

  • :：跳转到指定行号

6.3 文件操作#

操作

步骤

新建文件

资源管理器中点击「新建文件」图标，或 Ctrl+N

新建文件夹

资源管理器中点击「新建文件夹」图标

重命名

选中文件后按 F2，或右键 → 重命名

删除

选中文件后按 Delete，或右键 → 删除

移动文件

直接拖拽到目标文件夹

6.4 编辑操作#

操作

快捷键（Win/Linux）

快捷键（macOS）

撤销

Ctrl+Z

Cmd+Z

重做

Ctrl+Shift+Z

Cmd+Shift+Z

复制行

Shift+Alt+↓

Shift+Option+↓

删除行

Ctrl+Shift+K

Cmd+Shift+K

上下移动行

Alt+↑/↓

Option+↑/↓

行注释

Ctrl+/

Cmd+/

块注释

Shift+Alt+A

Shift+Option+A

格式化文档

Shift+Alt+F

Shift+Option+F

多光标

Alt+Click

Option+Click

6.5 搜索与替换#

  • 文件内搜索： Ctrl+F（macOS: Cmd+F）

  • 文件内替换： Ctrl+H（macOS: Cmd+H）

  • 全局搜索： Ctrl+Shift+F（macOS: Cmd+Shift+F）

  • 全局替换： Ctrl+Shift+H（macOS: Cmd+Shift+H）

💡 搜索框支持正则表达式、大小写区分、全词匹配三种模式，点击对应图标开启。

6.6 分屏编辑#

  • 将文件拖拽到编辑器右侧或下方即可分屏

  • 快捷键：Ctrl+\（竖向分屏）

  • 支持最多 3 列 × 3 行的网格布局

6.7 集成终端#

按 Ctrl+`（反引号）打开集成终端，支持同时开启多个终端窗口。

# 在终端中可直接运行代码，例如：
python hello.py
node app.js
npm start

6.8 Git 版本控制#

  1. 点击左侧活动栏的源代码管理图标（或 Ctrl+Shift+G）

  2. 修改的文件会显示在「更改」列表中

  3. 点击文件旁的 + 暂存（Stage）更改

  4. 在输入框中填写提交信息

  5. 点击「✓ 提交」完成提交

常用 Git 操作也可通过命令面板执行，输入 Git: 查看所有可用命令。

6.9 调试代码#

  1. 在代码行号左侧单击，添加断点（红色圆点）

  2. 按 F5 启动调试（如首次运行会提示选择调试环境）

  3. 调试工具栏功能：

    • F5 继续（Continue）

    • F10 单步跳过（Step Over）

    • F11 单步进入（Step Into）

    • Shift+F11 单步跳出（Step Out）

    • Shift+F5 停止调试

6.10 插件安装#

  1. 点击左侧活动栏的扩展图标（或 Ctrl+Shift+X）

  2. 在搜索框中输入插件名称

  3. 点击「安装」按钮

  4. 部分插件需重新加载窗口（Ctrl+Shift+P → Reload Window）

6.11 设置与个性化#

打开设置：Ctrl+,（macOS: Cmd+,）

常用设置项：

{
    "editor.fontSize": 16,              // 字体大小
    "editor.tabSize": 4,                // 缩进空格数
    "editor.wordWrap": "on",            // 自动换行
    "editor.formatOnSave": true,        // 保存时自动格式化
    "editor.minimap.enabled": false,    // 关闭右侧缩略图
    "terminal.integrated.fontSize": 14, // 终端字体大小
    "workbench.colorTheme": "One Dark Pro" // 主题（需安装插件）
}

7. 常用快捷键速查表#

通用操作#

功能

Windows / Linux

macOS

命令面板

Ctrl+Shift+P

Cmd+Shift+P

快速打开文件

Ctrl+P

Cmd+P

打开设置

Ctrl+,

Cmd+,

打开终端

Ctrl+`

Ctrl+`

侧边栏显示/隐藏

Ctrl+B

Cmd+B

全屏

F11

Ctrl+Cmd+F

缩放放大

Ctrl+=

Cmd+=

缩放缩小

Ctrl+-

Cmd+-

编辑操作#

功能

Windows / Linux

macOS

保存

Ctrl+S

Cmd+S

全选

Ctrl+A

Cmd+A

查找

Ctrl+F

Cmd+F

替换

Ctrl+H

Cmd+H

跳转到行

Ctrl+G

Ctrl+G

跳转到定义

F12

F12

查看引用

Shift+F12

Shift+F12

重命名符号

F2

F2

快速修复

Ctrl+.

Cmd+.

触发建议

Ctrl+Space

Ctrl+Space

多光标与选择#

功能

Windows / Linux

macOS

添加光标（向上）

Ctrl+Alt+↑

Cmd+Option+↑

添加光标（向下）

Ctrl+Alt+↓

Cmd+Option+↓

选中相同词

Ctrl+D

Cmd+D

选中所有相同词

Ctrl+Shift+L

Cmd+Shift+L

列选择

Shift+Alt+拖拽

Shift+Option+拖拽

8. 必装插件推荐#

中文语言包#

  • Chinese (Simplified) Language Pack — 将界面汉化为简体中文

主题美化#

  • One Dark Pro — 暗色主题（最受欢迎之一）

  • Material Icon Theme — 美化文件图标

代码质量#

  • ESLint — JavaScript/TypeScript 代码规范检查

  • Prettier — 多语言代码自动格式化

  • GitLens — 增强 Git 功能，显示每行代码的提交历史

AI 辅助开发#

  • GitHub Copilot — AI 代码补全和对话助手（需订阅）

  • GitHub Copilot Chat — 对话式 AI 编程助手

语言特定插件#

  • Python (Microsoft) — Python 完整支持

  • C/C++ (Microsoft) — C/C++ 智能提示和调试

  • Java Extension Pack — Java 开发套件

  • Volar — Vue 3 开发支持

  • ESP-IDF (Espressif) — ESP32 固件开发（IoT 课程推荐）

效率工具#

  • Remote - SSH — 通过 SSH 连接远程服务器开发

  • Docker — 容器化开发支持

  • REST Client — 直接在编辑器内发送 HTTP 请求

  • Thunder Client — 轻量级 API 测试工具（类 Postman）

  • Live Server — 前端热重载本地服务器

9. 中文视频教程推荐#

以下视频均为 B 站（bilibili.com）播放量较高、内容较新的中文教程，可直接搜索或访问链接观看：

🎬 入门教程（零基础推荐）#

1. VS Code 五分钟上手教程（无废话）

  • 📺 链接：https://www.bilibili.com/video/BV1bK411P767/

  • 👤 UP 主：偶尔有点小迷糊

  • ▶️ 播放量：52万+

  • 📝 内容：下载安装、配置开发环境、界面美化，5分钟快速上手，浓缩精华

2. VSCode 最新版安装教程及入门使用（小白必看）

  • 📺 链接：https://www.bilibili.com/video/BV1bK411P767/ 搜索：VScode最新版安装教程及入门使用

  • 👤 UP 主：_木土子

  • ▶️ 播放量：61万+

  • 📝 内容：安装全流程、中文设置、常用配置详解

3. VSCODE 使用入门 2025 版

  • 📺 搜索关键词：VSCODE使用入门2025版 浦大宏

  • 👤 UP 主：浦大宏

  • ▶️ 播放量：8.8万+

  • 📝 内容：2025 年最新版操作讲解

🎬 系统完整教程#

4. VS Code 零基础教程（持续更新）

  • 📺 搜索关键词：VS Code 零基础教程 兔子不吃米饭

  • 👤 UP 主：兔子不吃米饭

  • ▶️ 播放量：55万+（系列）

  • 📝 内容：从零开始完整讲解 VS Code 使用，持续更新中

5. vscode 从入门到精通系列教程

  • 📺 搜索关键词：vscode从入门到精通 地上马

  • 👤 UP 主：地上马

  • ▶️ 播放量：16万+

  • 📝 内容：系列视频，深度讲解各功能模块

6. 【2023最详细VScode使用教程】零基础快速上手 VS Code

  • 📺 搜索关键词：VScode使用教程 微软MVP Eleven

  • 👤 UP 主：微软 MVP-Eleven

  • ▶️ 播放量：33万+

  • 📝 内容：前端开发/插件/调试完整教程

🎬 专项功能教程#

7. VS Code 远程连接 GPU 服务器（深度学习）

8. DeepSeek + VSCode = 免费 AI 代码编辑器

  • 📺 搜索关键词：DeepSeek VSCode 本地AI代码编辑器

  • 📝 内容：配置本地 AI 辅助编程环境，Cursor 平替方案

🎬 微软官方中文系列#

9. VS Code 入门（微软 Reactor 上海）

10. 官方中文文档与参考资料#

📚 官方文档#

资源

链接

说明

VS Code 官方文档（中文镜像）

https://vscode.js.cn

国内访问速度快的中文文档镜像

VS Code 官方文档（英文原版）

https://code.visualstudio.com/docs

最权威、最新的官方文档

VS Code 版本更新日志

https://code.visualstudio.com/updates

每月发布版本说明

Microsoft Learn 中文教程

https://learn.microsoft.com/zh-cn/

微软官方中文学习平台

📚 中文图文教程#

资源

链接

说明

菜鸟教程 VS Code 教程

https://www.runoob.com/vscode/vscode-tutorial.html

适合零基础入门

少数派入门指南

https://sspai.com/post/60116

图文详细，侧重工具理解

艾编程 VSCode 安装使用教程

https://www.arryblog.com/guide/vscode.html

前端开发视角，含快捷键

VS Code 入门教程（官方中文）

https://vscode.js.cn/docs/getstarted/getting-started

官方步骤指引，简洁清晰

📚 GitHub 与社区资源#

资源

链接

说明

VS Code GitHub 主仓库

microsoft/vscode

开源代码、Issue 追踪

VS Code 插件市场

https://marketplace.visualstudio.com/vscode

搜索和预览所有扩展

附录：与 IoT 课程的结合使用建议#

在本课程（物联网关键技术与应用）中，VS Code 是重要的开发工具之一，建议安装以下插件：

ESP32 开发：

  • ESP-IDF — Espressif 官方扩展，支持 ESP32/ESP32-S3 工程管理、编译和烧录

  • PlatformIO IDE — 替代 Arduino IDE 的嵌入式开发平台，支持 ESP32

远程连接 Dell GPU Server：

  • Remote - SSH — 通过 SSH 直接在 Dell 服务器上编辑代码，体验本地开发感

Python / 数据科学：

  • Python + Jupyter — 用于数据分析和 TinyML 模型开发

Docker 容器管理：

  • Docker — 可视化管理服务器上的 EMQX、InfluxDB、Grafana 容器

配置同步：

  • 登录 GitHub 账号后，VS Code 可自动同步设置、插件和快捷键到任何设备，无需重复配置。

本文档最后更新：2026年3月 | 基于 VS Code v1.110（2026年2月发布）