VS Code 教程

Visual Studio Code(简称 VS Code)是微软推出的免费开源代码编辑器,凭借轻量快速、功能强大、生态丰富的特点,已成为全球最受欢迎的开发者工具之一。

本教程包含

基础篇:安装配置、界面布局、文件与目录操作
功能篇:终端、命令面板、版本控制、调试、扩展
进阶篇:快捷键、主题、AI 扩展、数据库客户端、MCP

为什么选择 VS Code

跨平台:Windows / macOS / Linux 全支持
免费开源:内置 Git 支持,插件生态超 5 万
内置终端、调试器、IntelliSense 智能提示
AI 编程支持:GitHub Copilot、DeepSeek 等扩展

适合人群

前端、后端、全栈开发者,数据科学爱好者,以及任何需要高效编辑代码的程序员。

VS Code 简介

Visual Studio Code 于 2015 年发布,基于 Electron 构建,结合了编辑器的轻量与 IDE 的强大。

核心特性

IntelliSense:智能代码补全、参数提示、快速修复
调试:内置调试器,支持 Node.js、Python、Java 等
Git 集成:可视化查看 diff、暂存、提交、推送
扩展市场:语言包、主题、工具类插件应有尽有
终端:内置集成终端,支持多开与任务
远程开发:SSH / WSL / 容器远程连接

与 Visual Studio 的区别

项目	VS Code	Visual Studio
定位	轻量编辑器	重量级 IDE
体积	约 100MB	数 GB
平台	跨平台	Windows/macOS
适合	Web/脚本/通用开发	.NET/C++ 大型项目

VS Code Windows 安装

在 Windows 上安装 VS Code 非常简单,支持两种安装方式。

方式一:安装向导

打开官网 code.visualstudio.com
点击 "Download for Windows" 下载安装包
运行 VSCodeUserSetup-x64-x.x.x.exe
勾选"添加到 PATH"和"添加到右键菜单"选项
点击"安装"完成

方式二:winget 命令

winget install Microsoft.VisualStudioCode

安装建议

勾选"通过 code 打开"关联上下文菜单
建议安装"简体中文语言包"扩展
安装后可在终端输入 code --version 验证

VS Code macOS 安装

macOS 上安装 VS Code 有图形化和命令行两种主流方式。

方式一:手动安装

官网下载 macOS 版本(Apple Silicon 选 arm64 版)
解压后将 Visual Studio Code.app 拖入"应用程序"文件夹
首次打开如提示"无法验证开发者",到系统设置 → 隐私与安全性点击"仍要打开"

方式二:Homebrew

brew install --cask visual-studio-code

配置 code 命令

# 在 VS Code 中按 Cmd+Shift+P,输入 shell command
# 选择 "Shell Command: Install 'code' command in PATH"

验证

code --version

VS Code Linux 安装

Linux 各发行版安装 VS Code 的方式略有不同,这里以 Ubuntu/Debian 和 Fedora 为例。

Ubuntu / Debian(deb 包)

# 下载 .deb 后执行
sudo apt install ./code_*.deb

# 或使用官方源
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update && sudo apt install code

Fedora / RHEL

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]
name=Visual Studio Code
baseurl=https://packages.microsoft.com/yumrepos/vscode
enabled=1
gpgcheck=1
gpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
sudo dnf install code

Snap 安装

sudo snap install --classic code

无桌面环境服务器可安装 code-server 通过浏览器访问。

VS Code 界面说明

了解 VS Code 的界面布局是高效使用它的第一步。

五大区域

活动栏(Activity Bar):最左侧,切换资源管理器/搜索/源代码管理/运行与调试/扩展
侧边栏(Side Bar):显示活动栏对应面板(文件树、搜索结果等)
编辑器区(Editor):中央区域,可多标签页/分屏编辑
面板(Panel):底部,终端、输出、问题、调试控制台
状态栏(Status Bar):最底部,显示分支、错误数、编码、语言模式等

常用操作

Ctrl/Cmd+B:切换侧边栏
Ctrl/Cmd+J:切换底部面板
Ctrl/Cmd+\:分屏编辑
Ctrl/Cmd+Shift+P:命令面板

VS Code 活动栏

活动栏是 VS Code 左侧的图标栏,提供核心功能的快速入口。

默认图标(从上到下)

资源管理器(Explorer):文件浏览、打开文件夹、大纲
搜索(Search):全局搜索替换
源代码管理(Source Control):Git 操作
运行与调试(Run and Debug):调试配置与启动
扩展(Extensions):安装管理插件

自定义活动栏

右键活动栏空白处可隐藏/显示图标;点击扩展图标可以安装增强活动栏的扩展(如数据库、Remote、Docker 等)。

快捷键切换

Ctrl/Cmd+Shift+E   资源管理器
Ctrl/Cmd+Shift+F   搜索
Ctrl/Cmd+Shift+G   Git
Ctrl/Cmd+Shift+D   调试
Ctrl/Cmd+Shift+X   扩展

提示:在设置中搜索 activityBar 可以调整活动栏位置(如移到右侧)。

VS Code 中文设置

VS Code 默认是英文界面,可以通过安装中文语言包切换为简体中文。

安装中文语言包

打开扩展面板:Ctrl/Cmd+Shift+X
搜索 "Chinese (Simplified)" 或 "中文"
选择微软官方发布的 Chinese (Simplified) (简体中文) Language Pack
点击"安装",安装完成后重启 VS Code

切换语言

# 命令面板 (Ctrl/Cmd+Shift+P)
输入 "Configure Display Language"
选择 zh-cn 或 en 切换

修改 locale.json

也可以直接编辑 locale.json 文件(通过"配置显示语言"命令打开),设置 "locale": "zh-cn"。

中文输入法问题

某些 Linux 环境下中文输入法无法输入,可安装 IME 相关扩展或在设置中调整 keyboard.dispatch 为 keyCode。

VS Code 打开目录

VS Code 以文件夹(工作区)为单位进行项目管理,打开目录是开始工作的第一步。

图形化方式

欢迎页 → "打开文件夹"
菜单文件 → 打开文件夹(Ctrl/Cmd+O)
最近使用列表直接选择

命令行方式

# 打开当前目录
code .

# 打开指定目录
code /path/to/project

# 在新窗口打开
code -n /path/to/project

# 将目录添加为工作区
code --add /path/to/project

多根工作区

把多个目录合并到一个工作区:文件 → 将文件夹添加到工作区,保存为 .code-workspace 文件,便于跨项目协作。

注意事项

首次打开大型项目时 VS Code 会建立索引,可能短暂卡顿;可在设置中排除 node_modules 等目录提升性能。

VS Code 新建文件

VS Code 中创建文件和文件夹有几种快捷方式。

新建文件

快捷键:Ctrl/Cmd+N 新建空白文件
资源管理器 → 文件夹名右侧的"新建文件"图标
在资源管理器中右键 → 新建文件

资源管理器中快速创建(推荐)

Ctrl/Cmd+N    新建文件(未保存)
Ctrl/Cmd+S    保存文件
Ctrl/Cmd+Shift+S  另存为

文件类型识别

VS Code 根据扩展名自动识别语言(如 .py → Python、.js → JavaScript),未识别的文件可点击状态栏语言模式手动选择。

资源管理器中的文件操作

重命名:F2 或右键重命名
删除:右键删除(进入回收站)
复制路径:右键 → 复制路径
拖拽移动文件

VS Code 集成终端

集成终端让开发者无需切换窗口即可执行命令行操作,大大提升效率。

打开终端

Ctrl/Cmd+`       打开/关闭终端
Ctrl/Cmd+Shift+` 新建终端

终端功能

自动切换到当前项目目录
支持多终端并行(点击 + 号新建)
终端右侧"分屏"按钮可并排显示
在资源管理器选中文件,终端右键可"在终端中运行活动文件"

切换默认 Shell

命令面板 → "终端:选择默认配置文件"
可选: PowerShell / Cmd / Git Bash / zsh / bash

终端快捷键

Ctrl/Cmd+C   复制(选中时) / 中断
Ctrl/Cmd+V   粘贴
Alt+↑/↓      滚动历史
Ctrl/Cmd+L   清屏

前端开发常配合 npm、git 命令使用,后端可一键启动开发服务器。

VS Code 命令面板

命令面板是 VS Code 的核心入口,几乎可以访问所有功能,是提升效率的利器。

打开命令面板

Ctrl/Cmd+Shift+P

常用命令示例

打开设置 (Preferences: Open Settings)
打开键盘快捷方式 (Preferences: Open Keyboard Shortcuts)
格式文档 (Format Document)
更改语言模式 (Change Language Mode)
终端:新建终端
文件:在文件资源管理器中显示

快速文件跳转

Ctrl/Cmd+P   快速打开文件(输入文件名模糊匹配)
Ctrl/Cmd+P + @   跳转到文件内符号
Ctrl/Cmd+P + :   跳转到指定行

命令面板技巧

输入命令关键字即可过滤,支持模糊搜索
带 > 前缀进入命令模式,不带则搜索文件
安装扩展后会注册更多命令

VS Code 设置

VS Code 提供图形化设置界面和 JSON 设置文件两种配置方式。

打开设置

Ctrl/Cmd+,   打开设置 UI
Ctrl/Cmd+Shift+P → "Preferences: Open Settings (JSON)" 打开 JSON 文件

常用设置项

{
  "editor.fontSize": 14,
  "editor.fontFamily": "JetBrains Mono, Consolas, monospace",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",
  "workbench.colorTheme": "One Dark Pro",
  "terminal.integrated.fontSize": 13,
  "git.autofetch": true
}

用户级 vs 工作区级

用户设置:全局生效,存于 settings.json(用户目录)
工作区设置:只对当前项目生效,存于 .vscode/settings.json,建议提交到 Git 方便团队统一

同步设置

登录微软账号或 GitHub 后,可通过"设置同步"在多台设备间同步配置、扩展、快捷键。

VS Code 编写代码

VS Code 提供了大量提升编码体验的功能,包括智能提示、代码格式化、重构等。

IntelliSense 智能提示

输入代码时自动弹出建议列表
Ctrl/Cmd+Space 手动触发提示
支持参数提示、快速文档查看(Hover)

代码格式化

Shift+Alt+F (Win/Linux) / Shift+Option+F (macOS)  格式化文档
Ctrl/Cmd+K Ctrl/Cmd+F  格式化选中区域

多光标编辑(效率神器)

Alt+Click           添加光标
Ctrl/Cmd+Alt+↑/↓    上下添加光标
Ctrl/Cmd+D           选中下一个相同词
Ctrl/Cmd+Shift+L     选中所有相同词

代码折叠与跳转

Ctrl/Cmd+Shift+[ ]  折叠/展开
F12                  跳转到定义
Alt+F12              快速预览定义
Ctrl/Cmd+Click       跳转到定义

VS Code 版本控制

VS Code 内置 Git 支持,提供了完整的可视化版本控制体验,无需命令行即可完成日常操作。

初始化仓库

打开项目文件夹后,点击源代码管理图标(Ctrl/Cmd+Shift+G),点击"初始化仓库"即可创建 Git 仓库。

日常操作

查看修改:变更列表显示修改/新增/删除文件
暂存:文件右侧 + 号暂存(stage)
提交:输入提交信息,点 ✓ 提交
推送/拉取:状态栏分支图标或 ... 菜单

查看 Diff

点击修改的文件即可看到左右对比,红色为删除、绿色为新增。

分支操作

点击状态栏左下角分支名,可新建/切换/删除分支、合并分支、查看历史。

常用 Git 扩展

GitLens:增强 Git 历史、作者信息
Git Graph:图形化分支视图
GitHub Pull Requests:PR 工作流

VS Code 安装扩展

扩展是 VS Code 生态的灵魂,通过安装插件可支持几乎所有语言和工具链。

安装方式

打开扩展面板:Ctrl/Cmd+Shift+X
搜索扩展名(如 Python、Prettier)
点击"安装"

必备扩展推荐

Chinese Language Pack:中文界面
Python:Python 语言支持(微软官方)
Prettier:代码格式化
ESLint:JavaScript 代码检查
GitLens:Git 增强
Live Server:前端热更新预览
REST Client:接口调试
Error Lens:错误高亮显示

命令行安装

code --install-extension ms-python.python
code --uninstall-extension ms-python.python

扩展管理技巧

禁用/启用:右键扩展可禁用,避免冲突
设置同步:登录后自动同步扩展
导出清单:code --list-extensions

VS Code 运行和调试代码

VS Code 内置调试器,支持断点、单步、变量监视等完整调试能力。

运行 Python 脚本

# 安装 Python 扩展后,打开 .py 文件
# 点击右上角 ▶ 运行按钮,或在终端执行
python app.py

创建调试配置

点击"运行与调试"图标(Ctrl/Cmd+Shift+D)
点击"创建 launch.json"并选择环境
生成的配置文件存于 .vscode/launch.json

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

调试操作

F9 切换断点
F5 开始调试
F10 单步跳过
F11 单步进入
Shift+F5 停止
左侧"监视"面板可添加变量表达式

VS Code code 命令

code 是 VS Code 提供的命令行工具,可以在终端中启动编辑器、打开文件或目录。

常用参数

code .                     # 打开当前目录
code file.txt              # 打开文件
code -r .                  # 在已有窗口打开(reuse)
code -n .                  # 新窗口打开
code -d a.js b.js          # 对比两个文件
code --new-window          # 强制新窗口
code --reuse-window        # 复用窗口

安装 code 命令

Windows:安装时勾选"添加到 PATH"
macOS:命令面板 → Shell Command: Install 'code' command in PATH
Linux:deb/rpm 安装后自动配置

高级用法

# 用 git diff 配置 VS Code 作为合并工具
git config --global core.editor "code --wait"
git config --global merge.tool vscode

# 查看扩展
code --list-extensions

注意:修改 PATH 后需重启终端才能生效。

VS Code 快捷键大全

掌握快捷键是提升编码效率的关键,这里整理最常用的快捷键(Win/Linux 与 macOS 对照)。

通用

功能            Win/Linux        macOS
命令面板        Ctrl+Shift+P     Cmd+Shift+P
快速打开文件    Ctrl+P           Cmd+P
打开设置        Ctrl+,           Cmd+,
打开终端        Ctrl+`           Cmd+`

编辑

复制行          Shift+Alt+↑/↓    Shift+Option+↑/↓
移动行          Alt+↑/↓          Option+↑/↓
删除行          Ctrl+Shift+K     Cmd+Shift+K
多光标          Alt+Click        Option+Click
选择相同词      Ctrl+D           Cmd+D
格式化          Shift+Alt+F      Shift+Option+F

查看与调试

侧边栏          Ctrl+B           Cmd+B
开始调试        F5               F5
断点            F9               F9

在"键盘快捷方式"设置中可以查看和自定义全部快捷键。

VS Code 主题设置

主题影响编辑器的配色与外观,VS Code 支持内置主题和第三方主题。

切换主题

Ctrl/Cmd+K Ctrl/Cmd+T  打开主题选择
或:命令面板 → "首选项:颜色主题"

内置主题

Dark Modern / Dark+(默认深色)
Light Modern / Light+
High Contrast(高对比度,无障碍)

自定义颜色

# 命令面板 → 打开设置 JSON,添加:
"workbench.colorCustomizations": {
  "editor.background": "#1e1e2e",
  "editor.lineHighlightBackground": "#2a2a3e"
}

图标主题

文件图标也支持主题,如 Material Icon Theme、VSCode Icons,让文件类型一目了然。

VS Code AI 扩展

AI 编程助手已成为现代开发的标配,VS Code 拥有最丰富的 AI 扩展生态。

主流 AI 扩展

GitHub Copilot:官方 AI 结对编程,代码补全与对话
Copilot Chat:对话式问答,解释代码、生成测试
通义灵码:阿里出品,免费,中文友好
CodeGeeX:智谱 AI 开源模型
Continue:开源,支持接入多模型
Codeium / Windsurf:免费 AI 补全

AI 补全体验

# 输入注释描述意图,AI 自动生成代码
# 按 Tab 接受建议,按 Esc 拒绝

# 示例:输入下面注释
# 计算斐波那契数列的前 n 项

AI 对话侧边栏

安装 Copilot Chat 后,侧边栏出现对话面板,可以:选中代码提问、让 AI 重构、自动生成 commit message、解释报错信息。

选择建议

个人开发者优先选择免费方案(通义灵码、Codeium);团队可评估 Copilot 的企业版,注意数据安全与合规要求。

VS Code DeepSeek

DeepSeek 是国产开源大模型,通过扩展可以在 VS Code 中接入 DeepSeek 的编程能力。

通过 Continue 接入

# 安装 Continue 扩展后,打开其配置(config.json)
# 添加 DeepSeek 提供商:

{
  "models": [
    {
      "title": "DeepSeek Coder",
      "provider": "deepseek",
      "model": "deepseek-coder",
      "apiKey": "sk-你的密钥"
    }
  ]
}

获取 API Key

注册 DeepSeek 开放平台(platform.deepseek.com)
创建 API Key 并充值
官方兼容 OpenAI 接口格式

使用场景

代码补全与生成
代码解释与重构
单元测试生成
Bug 修复建议

注意:API Key 属于敏感信息,不要提交到 Git 仓库,建议使用环境变量。

GitHub Copilot

GitHub Copilot 是 GitHub 与 OpenAI 联合推出的 AI 结对编程工具,2021 年发布,是 AI 编程的标杆产品。

安装与配置

安装 VS Code 扩展 GitHub Copilot 和 GitHub Copilot Chat
登录 GitHub 账号并授权
开通订阅(个人版/企业版)或免费试用

核心能力

代码补全:根据上下文和注释生成整行/整块代码
Chat 对话:自然语言提问、解释、重构
Inline Chat:选中代码行内提问(Alt+I)
智能动作:自动生成 commit message、修复错误
单元测试生成:一键为函数生成测试

常用快捷键

Tab               接受建议
Esc               拒绝建议
Alt+/             下一行建议(部分版本)
Ctrl/Cmd+I        Inline Chat
Ctrl/Cmd+Alt+I    侧边栏 Chat

使用建议

写清晰注释和函数名,补全质量更高
AI 生成的代码要审查,尤其涉及安全逻辑
结合代码审查流程,保证代码质量

VS Code 数据库客户端

安装数据库扩展后,VS Code 可以直接浏览和执行 SQL,无需再打开 Navicat 等独立客户端。

以 SQLTools 为例

安装 SQLTools 及对应驱动(如 SQLTools MySQL/MariaDB)
点击活动栏数据库图标 → 添加连接
填写主机、端口、用户名、密码、数据库名
连接后可浏览表结构、执行 SQL、查看结果

常用操作

-- 在编辑器写好 SQL 后,选中并执行:
Ctrl/Cmd+Enter   运行选中语句
Ctrl/Cmd+Shift+Enter  运行全部

优势

SQL 文件与代码在同一个窗口管理
结果以表格展示,支持导出 CSV
连接信息可保存,团队共享配置

VS Code MCP 服务

MCP(Model Context Protocol,模型上下文协议)是 Anthropic 提出的开放标准,让 AI 助手能够连接外部工具和数据源。VS Code 从 2025 年起原生支持 MCP 配置。

什么是 MCP

MCP 相当于 AI 应用的"USB 接口",通过统一协议让 AI 调用文件系统、数据库、浏览器、第三方 API 等工具,解决 AI 孤岛问题。

在 VS Code 配置 MCP

# 命令面板 → 打开用户设置 JSON,添加:

"mcp": {
  "servers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "xxx" }
    }
  }
}

MCP 服务类型

官方参考服务:filesystem、fetch、memory、git
社区服务:数据库、浏览器自动化、搜索
自定义服务:按 MCP 规范开发

使用场景

AI 直接读写项目文件
AI 查询数据库并生成报表
AI 操作 Git 仓库
AI 调用内部 API

VS Code 总结与进阶

恭喜你完成了 VS Code 教程的学习!下面回顾重点并给出进阶学习建议。

知识回顾

安装配置:Windows/macOS/Linux 三种平台安装,中文语言包
界面布局:活动栏、侧边栏、编辑器、面板、状态栏五大区域
核心操作:打开目录、新建文件、命令面板、集成终端
开发功能:IntelliSense、格式化、多光标、版本控制、调试
生态扩展:扩展市场、主题、AI 助手(Copilot/DeepSeek)、数据库客户端
前沿能力:MCP 服务接入,让 AI 调用外部工具

进阶学习路径

任务与代码片段:tasks.json 自动化、代码片段加速输入
远程开发:Remote-SSH、WSL、Dev Containers 连接远程环境
自定义配置:launch.json、settings.json、keybindings.json
扩展开发:用 TypeScript 开发自己的 VS Code 插件
AI 工作流:结合 Copilot Chat 与 MCP 构建个人 AI 助手

官方资源

官方文档:code.visualstudio.com/docs
快捷键速查表:官网 Download 页可打印 PDF
扩展市场:marketplace.visualstudio.com

记住:VS Code 的强大来自扩展与配置,持续优化你的工作流,让它真正成为趁手的开发利器。

第 1 / 26 节