VSCode + GitHub Copilot：微软全家桶的 AI 编程实战

从安装到实战，手把手教你用 VSCode + GitHub Copilot 进行 AI 编程

你好，我是程序员鱼皮。

AI 编程工具现在是真的百花齐放，Cursor、Claude Code、OpenCode、…… 每隔一段时间就冒出来一个新选手。

之前我一直沉迷于 Cursor 和 Claude Code，直到最近做新项目时认真体验了一把 GitHub Copilot，才发现这玩意儿真夯啊！

先简单介绍一下主角。VSCode 是微软出品的全球最流行的代码编辑器，装机量破亿；GitHub Copilot 则是 GitHub 官方出品的 AI 编程助手插件，直接安装在 VSCode 中使用。

个人体验下来，相比其他 AI 编程工具有 4 大优势：

支持最新 AI 大模型，Opus、GPT、Gemini、Claude 随便切，实测编程质量嘎嘎好，全栈项目一把梭
支持本地、后台 CLI、云端、Claude Code 等多种运行模式，兼容性贼强
支持 MCP、Skills、工具调用的可视化管理，既灵活又方便，不用自己手动编写配置了
支持子智能体、和 AI 的每一步交互都清晰可见，Agent 执行体验巨好

啥啥啥，这都是啥？

即使你看不懂我说的这些也没关系，这篇文章就带大家从 0 开始上手 VSCode + GitHub Copilot，从安装到实战、从基础到核心特性，一条龙服务。

干货密集，建议先收藏，然后沐浴更衣、找个安静的地方放空自己，慢慢食用，助眠效果极佳~

安装和配置

1）首先进入 VSCode 官网下载安装包，直接傻瓜式安装。

2）打开 VSCode，点击左侧「扩展市场」图标，搜索 "GitHub Copilot"，安装官方的 AI 编程插件。

你还可以根据需要，选择安装 Chinese 汉化插件，适合国内的宝宝们：

3）安装完后，点击 VSCode 底部状态栏的 Copilot 图标，按照提示登录 GitHub 账号就行了。

如果你还没有 Copilot 订阅，会自动进入 Copilot Free 免费计划，每月有一定的 AI 对话和代码补全额度，零门槛上手。想体验完整功能的话，Copilot Pro 支持新用户免费试用 30 天，申请一张国内银行的 Visa 卡就能开通。

我白票了 30 天的高级会员，最近能省一点其他 AI 编程工具的额度了哈哈~ 🤣

到这里，安装配置就全部搞定了，比折腾 Claude Code 那套网络受限 + 账号受限 + 命令行小黑框的组合拳简单多了。

基本使用

装好之后，先来感受一下最基本的 AI 编程体验。

AI 对话

点击 VSCode 上方的「聊天按钮」，打开 Chat 对话面板，你就可以和 AI 愉快地聊天了。让它分析需求、写代码、改 Bug，啥都行。

对话框区域有一个 智能体选择器，可以在 3 种内置模式之间切换：

Agent 全自主模式：AI 自己分析、写代码、跑命令，一条龙完成任务（用的最多）
Plan 规划模式：AI 先出方案再动手，适合复杂任务
Ask 纯问答模式：只回答问题，不改代码，适合探索和学习（我用的比较少）

除了 Chat 面板，还有两种更轻量的 AI 对话方式。

1）按 Ctrl+I（Mac 是 Cmd+I）打开行内对话，直接在代码中跟 AI 交互：

2）按 Ctrl+Shift+Alt+L（Mac 是 Cmd+Shift+Option+L）打开 Quick Chat 弹窗，适合快问快答。

AI 代码补全

写代码的时候，Copilot 会自动给你浅色的补全建议，按一下 Tab 就能接受。比如你写了一个计算日期的函数名 plusDate，它能直接帮你把整个函数体补全出来。

更智能的是 Next Edit Suggestions（NES），也就是「下一步编辑建议」。它不光补全当前位置的代码，还能预测你接下来要改哪里！

编辑器左侧会出现一个小箭头，按 Tab 就能跳过去并应用建议。

比如你把一个类名从 Point 改成了 Point3D，它会自动建议你在下面加个 z 变量，这个体验像秃噜鱼皮一般丝滑~

这两个功能用 Cursor 的同学应该不陌生，体验上差不多，但 Copilot 的 NES 预测精度个人感觉略胜一筹。

好了，基本功能就是这些，看到这里，你已经超过了 70% 的同学！

接下来进入正题，AI Agent 编程实战。

AI Agent 编程实战

前面的对话和代码补全只是开胃菜，Agent 模式才是 GitHub Copilot 的大杀器。

什么是 Agent？

简单来说，你给它一个需求，它会自己分析项目、制定计划、创建文件、写代码、跑命令、装依赖，遇到报错还会自动修复，全程自主执行。

其实 Manus、OpenClaw、各种 AI 编程工具里的 Agent 模式，本质上都是 Agent，就是 AI 自主规划、调用工具、执行任务的能力。

现在各家 AI 编程工具都在卷 Agent 能力，比如 Cursor 可以在子 Agent 里操作浏览器进行自主验证，Claude Code 搞出了 Agent Teams 让多个 AI 组队协作。GitHub Copilot 也不甘示弱，除了 Agent 模式之外，也提供了各家都支持的 Plan 模式。先让 AI 帮你出方案、拆步骤，确认没问题后再动手，适合稍微复杂一点的项目，减少 AI 一上来就瞎写导致翻车的概率。

下面我带大家实战一把，结合 Plan 模式 + Agent 模式做个**「AI 占卜师网站」**，用户输入一个问题，让 AI 抽取塔罗牌并生成占卜解读。

第一步、用 Plan 制定方案

新建一个空的项目文件夹（比如 ai-diviner），在 VSCode 中打开该文件夹，应该会默认打开 Chat 对话面板。

在对话区域的智能体选择器中选择 Plan 模式、并选择大模型（比如 Claude Opus），然后输入需求：

▼
text
复制代码
帮我用 HTML + CSS + JavaScript 做一个 AI 塔罗牌占卜网站。

功能描述：
1. 用户输入一个问题（比如「我最近事业运如何」）
2. 点击「开始占卜」后，展示 3 张塔罗牌的翻牌动画
3. 翻牌完成后，根据抽到的牌生成 AI 占卜解读
4. 界面要神秘华丽，深紫色主题配金色纹理，星空背景
5. 有流畅的翻牌动画效果
6. 响应式布局，手机也能用

选择 Plan 模式后，AI 不会直接开始写代码。

它会先研究你的需求，可能还会问你几个问题，比如 AI 解读是 “调用 AI 大模型接口” 还是 “从预设文案库随机生成”？

你只要像聊天