VSCode + GitHub Copilot AI 编程实战指南

此外还支持两种轻量交互方式：

1. 行内对话：按 Ctrl+I (Mac 为 Cmd+I) 直接在代码中交互。
2. Quick Chat：按 Ctrl+Shift+Alt+L (Mac 为 Cmd+Shift+Option+L) 快速提问。

AI 代码补全

编写代码时，Copilot 会提供浅色建议，按 Tab 接受。例如输入函数名后，它可直接补全整个函数体。

更智能的是 Next Edit Suggestions (NES)，即「下一步编辑建议」。它不仅补全当前代码，还能预测后续修改点。编辑器左侧会出现箭头，按 Tab 即可跳转应用。例如将类名从 Point 改为 Point3D，它会建议添加 z 变量。

这一功能在 Cursor 中也有类似实现，但 Copilot 的预测精度在实际测试中表现优异。

AI Agent 编程实战

对话和补全是基础，Agent 模式才是 Copilot 的核心竞争力。

什么是 Agent？ 简单来说，你给出需求，它会自动分析项目、制定计划、创建文件、写代码、跑命令、装依赖，遇错自动修复，全程自主执行。这与 Manus、OpenClaw 等工具的 Agent 逻辑一致，即 AI 自主规划、调用工具、执行任务的能力。

目前各家都在卷 Agent 能力，Copilot 除了 Agent 模式外，也提供了 Plan 模式。先让 AI 出方案、拆步骤，确认无误后再动手，适合复杂项目，减少盲目编码的风险。

下面通过实战，结合 Plan 模式 + Agent 模式构建一个 「AI 占卜师网站」：用户输入问题，抽取塔罗牌并生成解读。

第一步：用 Plan 制定方案

新建空项目文件夹（如 ai-diviner），在 VSCode 中打开。默认会显示 Chat 面板。

在智能体选择器中选 Plan 模式 和大模型（如 Claude Opus），输入需求：

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

选择 Plan 模式后，AI 不会直接写代码，而是先研究需求，可能会询问细节（如 AI 解读是调用接口还是随机生成）。你可以像聊天一样反馈想法，例如希望调用特定大模型 API。

理解需求后，AI 会输出结构化实施方案，列出文件结构、职责分工、步骤顺序及验证方法。此阶段可与 AI 反复讨论调整，直到满意。

Plan 模式本质是四阶段迭代工作流：需求研究 → 问题对齐 → 方案设计 → 迭代细化。AI 先用只读工具研究代码库，再通过问答消除歧义，最后给出方案草稿。这也是软件开发的标准步骤，养成 先想清楚再动手 的习惯至关重要。

第二步：用 Agent 执行方案

确认方案后，点击「Start Implementation」，AI 开始自动执行。

执行过程中，Agent 会管理 Todos 任务列表跟踪进度。你可以看到它创建 index.html、style.css、script.js 等文件，写入代码甚至执行终端命令。

若涉及终端命令或工具调用，会弹出确认框等待审批，保障安全性。

工作中可随时发消息，选择排队、打断或引导方向。建议新手多观察 AI 工作流，发现异常及时人工介入，可节省 Token 并避免返工。

第三步：查看效果

几分钟后，Agent 不仅完成开发，还启动了 Web 服务器运行网站。

建议在浏览器中测试，复制网址打开，输入获取的大模型 API Key：

输入问题，点击「开始占卜」：

三张塔罗牌依次翻开，下方出现 AI 生成的解读。深紫星空背景配金色边框，加上流畅动画，效果出色。

若对细节不满意，可在内置浏览器点击「元素选择」，定位问题后在 Chat 框编写提示词修改，例如：

改为暗黑风格 

Agent 会自动定位代码并精准修改，刷新预览即可。整个过程从需求到成品仅需几分钟，传统开发可能需要数小时。

继续对话可增加功能，但需注意 上下文用量，满额可能导致 AI 遗忘。建议定期让 AI 沉淀项目信息为文档，以便新会话快速恢复记忆。

核心特性

Tools - 给 AI 的工具箱

Agent 自主干活靠的是工具调用（Tool Use）。工具包括搜索代码、读写文件、跑终端命令、抓取网页等。无工具 AI 只能动嘴，有工具才能动手。

VSCode 提供三类工具：

• 内置工具：开箱即用，含代码搜索、文件读写、终端执行等。
• MCP 工具：通过 MCP 协议接入的外部工具。
• 扩展工具：VSCode 插件提供的工具。

所有工具可通过 Chat 区域的「配置工具」按钮可视化管理：

自由开启或关闭，无需配置文件。开启后，AI 通常自动判断调用哪些工具。也可在对话中用 # 号手动引用，如 #codebase 搜索代码库、#fetch url 抓取网页、#problems 查看报错。

终端命令执行有安全审批机制，默认弹窗确认；也可配置自动审批规则或开启沙箱限制访问。

还有一个实用功能叫 Tool Sets（工具集），可将多个相关工具打包。例如创建 reader 工具集，包含 codebase、problems、usages 等只读工具，用于代码审查。

先在设置中打开「工具集」，创建文件并输入名称：

自动弹出配置文件，添加如下内容保存：

{"reader":{"tools":["codebase","problems","usages","search"],"description":"只读工具集，适合代码审查","icon":"book"}}

配置后，对话中输入 #reader 即可一次性启用该组工具：

MCP - 让 AI 连接外部能力

MCP（Model Context Protocol）是开放标准协议，让 AI 连接外部工具和服务，如数据库、API、浏览器控制。

GitHub Copilot 在管理 MCP 的体验上非常出色，微软直接将 MCP 集成到了 VSCode 扩展市场。打开扩展市场开启 MCP 服务市场，即可看到热门服务，无需去资源站手动安装。

例如安装 Context7 获取技术文档，点击安装后弹窗输入 API Key：

确认后即可使用。AI 执行任务时会自动调用 MCP 工具，也可用 # 号主动引用。例如写好 Context7 后，AI 写代码时会拉取最新技术文档参考，减少幻觉。

全程可视化操作，对新手友好。老手也可通过 .vscode/mcp.json 手动配置：

{"servers":{"github":{"type":"http","url":"https://api.githubcopilot.com/mcp"},"playwright":{"command":"npx","args":["-y","@microsoft/mcp-server-playwright"]}}}

该文件需手动创建或通过命令面板 MCP: Open Workspace Folder Configuration 打开：

MCP 服务除提供工具外，还支持 Resources（资源）和 MCP Apps（交互式应用）。Resources 提供数据库表、API 响应等上下文；MCP Apps 能在对话中渲染表单、仪表盘。

VSCode 还能自动发现其他应用中已配置的 MCP 服务，在聊天设置中搜索 chat.mcp.discovery.enabled 开启。

配置支持 Settings Sync 跨设备同步，勾选「MCP 服务器」选项即可。

Agent Skills - 给 AI 的技能包

Agent Skills 是给 AI 的能力扩展包。不同于 Tools，Skills 更像详细工作手册，包含操作指南、脚本、示例代码，让 AI 在特定任务上更专业。

例如安装「Web 应用测试」Skill，内含 Playwright 测试标准流程、模板、最佳实践。之后让 AI 写测试，它会自动按标准执行。

注意，Skills 是 开放标准，不仅在 Copilot 能用，Claude Code、Cursor 等也支持，一套 Skill 多处复用。

获取方式多为网上下载现成的。例如社区精选的技能包，或 GitHub 上的 awesome-copilot 仓库。

VSCode 中可通过对话框 Skills 设置按钮查看管理本地 Skills：

也可自己创建，选择安装位置（当前项目或用户目录）：

创建核心是编写 SKILL.md 文件。例如「Web 应用测试」技能：

--- name: webapp-testing description: 使用 Playwright 测试 Web 应用的指南 --- # Web 应用测试指南 ## 创建测试 1. 参考 [测试模板](./test-template.js) 2. 确定要测试的用户流程 ...

创建好后，对话区域可用 /webapp-testing 斜杠命令调用，或让 AI 自动匹配加载。

Skills 采用渐进式披露设计，AI 只在需要时加载相关内容，节省 Token 且保持灵活。

多种 Agent 运行方式

Copilot 支持 4 种 Agent 运行方式：

可在 Chat 底部下拉菜单切换：

有个技巧是在不同 Agent 间移交任务。例如本地 Agent 做 Plan，移交给 Cloud Agent 执行，自动创建分支、写码、测试、提 PR。

同时可开多个 Agent Session，每个处理不同任务，在 Sessions 列表中统一管理。

Hooks - 自动触发的脚本

Hooks 允许在 Agent 关键节点自动运行自定义脚本。

可在 VSCode 设置中查看管理：

支持生命周期事件：

• PreToolUse：调用工具前触发，拦截危险命令。
• PostToolUse：调用工具后触发，如自动格式化。
• SessionStart / Stop：会话开始/结束触发，注入上下文或生成报告。
• UserPromptSubmit：提交提示词时触发，审计请求。
• SubagentStart / Stop：子智能体启动/完成触发，跟踪资源。

例如在 .github/hooks/ 下创建 JSON 配置：

{"hooks":{"PostToolUse":[{"type":"command","command":"npx prettier --write \"$TOOL_INPUT_FILE_PATH\""}]}}

每次 Agent 修改代码，自动运行 Prettier，保证风格统一。应用场景广泛，如自动格式化、拦截危险命令、记录调用日志。配置格式与 Claude Code 兼容。

Custom Instructions - 让 AI 遵循你的规范

自定义指令是给 AI 定规矩。将编码规范、偏好、约定写入 Markdown 文件，AI 每次对话自动遵循。

路径为 .github/copilot-instructions.md，支持细粒度文件模式匹配。

创建方式：在设置中打开「聊天指令」，选择创建位置：

或手动新建文件填入内容：

# 项目编码规范
## 代码风格
- 使用语义化 HTML5 元素
- 优先使用 ES6+ 语法
- 变量命名 camelCase，组件 PascalCase
## 技术偏好
- 前端框架 React + TypeScript
- CSS 使用 Tailwind CSS
- 测试使用 Vitest

VSCode 支持两种类型：全局生效（Always-on）和基于文件模式匹配（File-based）。带 YAML 头部的结构即为 File-based 指令标准写法。

小技巧：输入 /init，AI 自动分析项目结构和风格，生成自定义指令文件，适合接手老项目。

Custom Agents - 给 AI 分配角色

自定义智能体分配不同角色，如安全审查员、测试工程师。Instructions 是全局规则，Custom Agents 是角色切换，选定后 AI 按角色设定工作。

创建方式：

1. 在设置中打开「自定义智能体」，选择位置，VSCode 自动创建文件。
2. 手动写 .agent.md 文件放在 .github/agents/ 目录下。

例如写作助手 article.agent.md：

--- name: 写作助手 description: 帮助撰写技术文章 tools: ['search', 'codebase'] --- # 写作助手
你是一位经验丰富的技术写作者...

保存后，在智能体下拉菜单中选择即可。

更强大玩法是 Handoffs（移交）。在 Agent 文件中定义「下一步动作」按钮，实现任务接力。例如 Plan 智能体出方案后，点击「开始实现」自动切换到 Agent 模式。

handoffs:
- label: 开始实现
  agent: agent
  prompt: 按照上面的方案开始编码
  send: false

还可编排多智能体协作流程。例如主智能体先调用只读「调研员」分析代码库，再调用「编码员」写代码。

VSCode 还支持 Claude 格式的 Agent 文件（.claude/agents），可直接复用。

Prompt Files - 可复用的提示词模板

Prompt Files 将常用任务封装成 斜杠命令，随时复用。

区别在于自定义指令自动应用，Prompt Files 需手动输入 /命令名 触发。

创建方式类似自定义指令，在设置中打开「提示文件」新建：

选择位置，VSCode 自动创建：

或直接创建 .prompt.md 文件。例如 /gen-test 自动生成单元测试：

--- description: 为当前文件生成单元测试 agent: agent tools: ['search', 'editFiles'] ---
为 [${fileBasename}](${file}) 生成单元测试。
- 测试文件放在同目录下：${fileDirname}
- 命名为：${fileBasenameNoExtension}.test.ts
- 测试框架：${input:framework:jest or vitest}

保存后输入 /gen-test 触发，还可追加额外信息。

Smart Actions - AI 快捷操作

Copilot 在 VSCode 各处埋了不少 AI 快捷操作，右键菜单触发。

常用功能：

• 自动生成 Commit Message：Source Control 面板点星星图标。
• 代码解释：选中代码右键「Explain」。
• 生成测试：选中代码右键「Generate Tests」。
• 生成文档：选中代码右键「Generate Docs」。
• 修复错误：报错时自动弹出建议。
• 代码审查：选中代码右键「Review」。
• 语义搜索：搜索面板启用 AI 搜索。
• AI 辅助重命名：重命名时给出建议。

平时用得最多的是自动生成 Commit Message，省去绞尽脑汁想提交信息的麻烦。

这些功能单个不起眼，但能省不少事。

写在最后

总结一下，VSCode + GitHub Copilot 给人的最大感觉就是 全面。

论 Agent 编程极致体验，Claude Code 可能更强；论新功能迭代速度，Cursor 走在前面。但 Copilot 胜在它是'六边形战士'，从代码补全到 AI 对话、从 Agent 编程到 MCP 生态、从自定义指令到智能体编排，该有的能力基本都有，且体验丝滑。

此外，很多开发者早已习惯 VSCode，现在装插件就能无缝升级到 AI 编程，无需换编辑器、重新学操作、迁移配置，门槛最低。

如果在校，可通过 GitHub Education 申请学生认证，认证通过后 Copilot Pro 免费用。

若想做更复杂的全栈项目实战，可寻找相关企业级项目练手，Copilot 完全能 hold 住。

以上就是 VSCode + GitHub Copilot 的完整实战指南，希望能帮助大家在 AI 编程领域少走弯路。