跳到主要内容VSCode + GitHub Copilot 从安装到 Agent 实战详解 | 极客日志编程语言AI大前端
VSCode + GitHub Copilot 从安装到 Agent 实战详解
VSCode 搭配 GitHub Copilot 插件可实现从代码补全到智能体自主开发的完整工作流。通过 Plan 模式制定方案、Agent 模式执行任务,结合 MCP 协议扩展外部能力,能显著提升开发效率。涵盖安装配置、核心特性如工具集与技能包、自定义指令及多智能体协作等实战细节,帮助开发者快速上手 AI 辅助编程。
PhpPioneer1 浏览
从安装到实战,手把手教你用 VSCode + GitHub Copilot 进行 AI 编程
AI 编程工具目前发展迅速,Cursor、Claude Code、OpenCode 等方案层出不穷。近期在体验了多个工具后,GitHub Copilot 在 VSCode 中的表现令人印象深刻。
VSCode 是微软出品的全球流行代码编辑器;GitHub Copilot 则是官方推出的 AI 编程助手插件。相比其他工具,它具备以下优势:
- 支持最新 AI 大模型,Opus、GPT、Gemini、Claude 可随意切换,全栈项目适配性强
- 支持本地、后台 CLI、云端等多种运行模式,兼容性出色
- 支持 MCP、Skills、工具调用的可视化管理,配置灵活便捷
- 支持子智能体,与 AI 的交互过程清晰可见,Agent 执行体验流畅
这些概念听起来可能有些抽象,没关系,接下来带大家从 0 开始上手,从安装到实战、从基础到核心特性,逐步深入。
安装和配置
首先访问 VSCode 官网下载安装包,直接安装即可。

打开 VSCode,点击左侧「扩展市场」图标,搜索 "GitHub Copilot",安装官方插件。如需中文界面,可额外安装 Chinese 汉化插件。

安装完成后,点击底部状态栏的 Copilot 图标,按提示登录 GitHub 账号。若未订阅,会自动进入免费计划,每月有一定额度。Copilot Pro 通常支持新用户试用,申请一张国内银行的 Visa 卡即可开通。
至此,安装配置完成。相比某些需要折腾网络环境和命令行组合的工具,这套流程更为简单。

基本使用
装好之后,先体验基础的 AI 编程功能。
AI 对话
点击 VSCode 上方的「聊天按钮」,打开 Chat 对话面板。你可以让 AI 分析需求、写代码、改 Bug。

对话框区域有一个 智能体选择器,可在 3 种内置模式间切换:
- Agent 全自主模式:AI 自行分析、写代码、跑命令,一条龙完成任务(最常用)
- Plan 规划模式:AI 先出方案再动手,适合复杂任务
- Ask 纯问答模式:只回答问题,不改代码,适合探索和学习

- 按
Ctrl+I(Mac 是 Cmd+I)打开行内对话,直接在代码中交互
- 按
Ctrl+Shift+Alt+L(Mac 是 Cmd+Shift+Option+L)打开 Quick Chat 弹窗,适合快问快答
AI 代码补全
写代码时,Copilot 会提供浅色补全建议,按 Tab 接受。例如输入函数名,它能自动补全整个函数体。
更智能的是 Next Edit Suggestions (NES),即「下一步编辑建议」。它不仅补全当前位置,还能预测后续修改点。编辑器左侧会出现小箭头,按 Tab 即可跳转应用。
比如将类名从 Point 改为 Point3D,它会自动建议添加 z 变量,体验非常流畅。
这两个功能类似 Cursor,但 Copilot 的 NES 预测精度个人感觉略胜一筹。
好了,基本功能就是这些。接下来进入正题,AI Agent 编程实战。
AI Agent 编程实战
前面的对话和补全是基础,Agent 模式才是 Copilot 的核心能力。
什么是 Agent?简单来说,你给它一个需求,它会自己分析项目、制定计划、创建文件、写代码、跑命令、装依赖,遇到报错还会自动修复,全程自主执行。
各家 AI 工具都在卷 Agent 能力。GitHub 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 解读是调用接口还是随机生成。你可以像聊天一样告诉 AI 想法,例如希望调用特定大模型 API。
如果拿不准,可以让 AI 分析方案优缺点。理解需求后,AI 会给出结构化实施方案。
方案列出要创建的文件、职责、步骤顺序及验证方法。你可以反复讨论调整,直到满意。
Plan 模式本质是四阶段迭代工作流:需求研究 → 问题对齐 → 方案设计 → 迭代细化。即使不用内置模式,养成先想清楚再动手的习惯也很重要。
第二步、用 Agent 执行方案
确认方案后,点击「Start Implementation」,让 AI 自动执行。
执行过程中,Agent 会管理 Todos 任务列表跟踪进度。你可以看到它在做什么,比如创建文件、写代码、打开终端执行命令。
如果 AI 要跑终端命令或调用工具,会弹出确认框等待审批,安全性有保障。
你也可以在 Agent 工作时继续发消息,选择排队、打断或引导方向。建议新手多观察,发现不对劲及时插手,节约 Token 并避免返工。
第三步、查看效果
几分钟后,Agent 不仅完成了开发,还启动了 Web 服务器运行网站。
建议在 Chrome 浏览器中测试,复制网址打开,输入获取的大模型 API Key:
三张塔罗牌依次翻开,下方出现 AI 生成的解读。深紫色星空背景,搭配金色边框和流畅动画,效果不错。
如果对细节不满意,可在内置浏览器中点击「元素选择」,哪里不爽点哪里,然后在 Chat 框编写提示词,比如:
Agent 会自动定位代码精准修改,刷新预览即可。
整个过程几分钟搞定。以前从零写这种带动画的网站,至少得搞一下午。
还可以继续跟 AI 对话增加功能。注意上下文用量,如果满了 AI 可能会断片。因此,在上下文快满时,最好让 AI 沉淀项目信息为文档。这样新对话框只需加载历史文档,就能找回记忆。
核心特性
Tools - 给 AI 的工具箱
Agent 能自主干活,靠的是工具调用(Tool Use)。没有工具,AI 只能动嘴皮子;有了工具,才能真正动手。
- 内置工具:开箱即用,包括代码搜索、文件读写、终端执行、问题诊断等
- MCP 工具:通过 MCP 协议接入的外部工具
- 扩展工具:VSCode 插件提供的工具
所有工具可通过 Chat 对话区域的「配置工具」按钮可视化管理:
自由开启或关闭工具,无需写配置文件。开启后,大多数情况下 AI 会自动判断调用哪些。也可用 # 号手动引用特定工具,如 #codebase 搜索库、#fetch codefather.cn 抓取网页、#problems 查看报错。
Agent 执行终端命令时有安全审批机制。默认弹确认框;也可配置自动审批规则,甚至开启终端沙箱限制文件和网络访问。
还有一个实用功能叫 Tool Sets(工具集),把多个相关工具打包成一组,用 #工具集名称 引用。
{"reader":{"tools":["codebase","problems","usages","search"],"description":"只读工具集,适合代码审查","icon":"book"}}
配置好后,输入 #reader 即可启用这组只读工具:
MCP - 让 AI 连接外部能力
MCP(Model Context Protocol)是开放标准协议,让 AI 连接外部工具和服务。GitHub Copilot 在管理 MCP 的体验上很出色,微软直接把 MCP 集成到了 VSCode 扩展市场。
打开扩展市场,开启 MCP 服务市场,就能看到热门 MCP 服务:
比如安装 Context7 获取技术文档,点击安装后弹窗输入 API Key:
确认后正常使用。AI 执行任务时会自动调用 MCP 工具,也可用 # 号主动引用。
不需要手写 JSON 配置,全程可视化选择安装。老手也可以通过 .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 渲染表单、仪表盘等 UI。
VSCode 还能自动发现其他应用中已配置的 MCP 服务,在聊天设置中搜索 chat.mcp.discovery.enabled 开启:
MCP 配置支持 Settings Sync 跨设备同步,换电脑不用重配:
Agent Skills - 给 AI 的技能包
Agent Skills 是给 AI 的能力扩展包。和 Tools 不同,Skills 更像详细工作手册,包含操作指南、脚本、示例代码,让 AI 在特定任务上更专业。
比如装个「Web 应用测试」Skill,写好 Playwright 测试标准流程。之后让 AI 写测试,它就按标准来。
注意,Skills 是 开放标准,不仅在 Github Copilot 里能用,Claude Code、Cursor 等也能用。
在 VSCode 中,通过对话框的 Skills 设置按钮,查看和管理本地已有 Skills:
也可以自己创建,可视化选择安装位置(当前项目或用户目录):
创建技能核心是编写 SKILL.md 描述文件,示例如下:
创建好后,在对话区域用 /webapp-testing 斜杠命令手动调用,或让 AI 自动匹配加载。
Skills 采用渐进式披露设计,AI 只在需要时才加载,节省 Token 又灵活。
多种 Agent 运行方式
前面用的是本地 Agent,其实 GitHub Copilot 支持 4 种运行方式:
| 运行方式 | 特点 | 适用场景 |
|---|
| Local 本地 | 在 VSCode 中交互式运行,实时反馈 | 探索性任务、需要即时反馈的开发 |
| Background 后台 | 在本地后台自主运行,使用 Git worktree 隔离 | 需求明确的任务,边干别的边让 AI 干活 |
| Cloud 云端 | 在远程服务器运行,完成后自动提 PR | 团队协作、不想占用本地资源的任务 |
| Third-party 第三方 | 接入 Anthropic Claude、OpenAI 等第三方 Agent | 想用特定 AI 厂商的能力 |
有个骚操作是在不同 Agent 间移交任务。先用本地 Agent 做 Plan,一键移交给 Cloud Agent 去执行,它会自动创建分支、写代码、跑测试、最后提 Pull Request。
还可同时开多个 Agent Session,每个处理不同任务,在 Sessions 列表中统一管理:
Hooks - 自动触发的脚本
Hooks 允许在 Agent 执行关键节点自动运行自定义脚本。在 VSCode 设置中查看和管理已配置的 Hooks:
- PreToolUse:Agent 调用工具前触发,拦截危险命令
- PostToolUse:Agent 调用工具后触发,自动跑 Prettier 格式化
- SessionStart / Stop:会话开始和结束时触发
- UserPromptSubmit:用户提交提示词时触发
- SubagentStart / SubagentStop:子智能体启动和完成时触发
举例,在项目的 .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 每次对话自动遵循。
Copilot 的指令文件路径是 .github/copilot-instructions.md,支持更细粒度的文件模式匹配。
创建方式很简单,在对话区域的设置中打开「聊天指令」,选择创建位置:
或者手动在项目根目录下新建 .github/copilot-instructions.md 文件,填入内容:
# 项目编码规范 ## 代码风格 - 使用语义化 HTML5 元素 - 优先使用 ES6+ 语法(const/let、箭头函数、模板字符串) - 变量命名使用 camelCase,组件命名使用 PascalCase ## 技术偏好 - 前端框架优先用 React + TypeScript - CSS 使用 Tailwind CSS - 测试使用 Vitest ## 代码质量 - 函数和变量名要有意义,能自解释 - 复杂逻辑要加注释 - 用户输入和 API 调用要加错误处理
VSCode 支持两种指令类型。一种是全局生效(Always-on),所有对话自动应用;另一种是基于文件模式匹配(File-based),只有匹配对应文件才生效。
带 YAML 头部的结构是 File-based 指令的标准写法:
小技巧,在对话区域输入 /init,AI 会自动分析项目结构和代码风格,帮你生成一份自定义指令文件,省得自己从零写起。
Custom Agents - 给 AI 分配角色
自定义智能体就是给 AI 分配不同的角色。Instructions 是全局规则,Custom Agents 是角色切换,选了某个角色后,AI 就只按那个角色的设定来工作。
一种是在对话区域的设置中打开「自定义智能体」,选择创建位置,VSCode 会自动创建文件:
另一种方法是手动写 .agent.md 文件放在 .github/agents/ 目录下。比如创建一个写作助手 article.agent.md:
--- name: 写作助手 description: 帮助撰写和优化技术文章、项目文档 tools: ['search', 'codebase', 'fetch', 'editFiles'] ---
保存后,在对话区域的智能体下拉菜单中就能看到这个写作助手了:
自定义智能体还有一个强大玩法叫 Handoffs(移交)。可以在 Agent 文件中定义「下一步动作」按钮,实现智能体之间的任务接力。
比如 Plan 智能体出完方案后,底部出现「开始实现」按钮,点一下就自动切换到 Agent 模式开始编码:
handoffs:
- label: 开始实现
agent: agent
prompt: 按照上面的方案开始编码
send: false
除了 Handoffs,还可以编排多个专业智能体的协作流程。假设在做新功能,先调研项目代码模式,再动手写代码。可以创建「功能开发」主智能体,让它先调用只读的「调研员」子智能体分析代码库,拿到结果后,再调用「编码员」子智能体写新代码。
VSCode 还支持 Claude 格式的 Agent 文件(放在 .claude/agents 目录),如果之前用 Claude Code 创建过,可以直接拿来用。
Prompt Files - 可复用的提示词模板
Prompt Files(提示词文件)可以把常用任务封装成 斜杠命令,在对话中随时复用。
跟自定义指令的区别是,自定义指令自动应用到所有对话,而 Prompt Files 需要你手动输入 /命令名 触发,更适合特定任务场景。
创建方式类似,在对话区域的设置中打开「提示文件」,选择「新建提示文件」:
也可直接在 .github/prompts/ 目录下创建 .prompt.md 文件。举个例子,创建 /gen-test 命令自动生成单元测试:
--- description: 为当前文件生成单元测试 agent: agent tools: ['search', 'search/codebase', 'edit/editFiles'] --- 为 [${fileBasename}](${file}) 生成单元测试。 - 测试文件放在同目录下:${fileDirname} - 命名为:${fileBasenameNoExtension}.test.ts - 测试框架:${input:framework:jest or vitest} - 参考项目的测试规范:[testing.md](../docs/testing.md)
这里面用到了一些变量,比如 ${file} 会自动替换为当前打开的文件路径,${input:framework} 是指要从用户在对话框中输入的内容来获取值。
保存后,在对话框中输入 /gen-test 就能触发。你还可以在后面追加额外信息。
Smart Actions - AI 快捷操作
除了上面这些核心特性,Copilot 还在 VSCode 的各个角落埋了不少 AI 快捷操作,叫 Smart Actions。不需要写提示词,右键菜单就能触发。
- 自动生成 Commit Message:在 Source Control 面板点一下小星星图标,AI 根据你的代码改动自动生成提交信息
- 代码解释:选中一段代码,右键「Explain」,AI 帮你解释这段代码在干啥
- 生成测试:选中代码,右键「Generate Tests」,AI 帮你写单元测试
- 生成文档:选中代码,右键「Generate Docs」,AI 帮你写注释文档
- 修复错误:代码有报错时,AI 会自动弹出修复建议
- 代码审查:选中代码,右键「Review」,AI 给你做 Code Review
- 语义搜索:在搜索面板中启用 AI 搜索,按语义而非文本精确匹配来搜索代码
- AI 辅助重命名:重命名变量时,AI 会根据上下文给出建议的新名字
平时用得最多的就是自动生成 Commit Message,再也不用绞尽脑汁想提交信息怎么写了。
这些小功能单个看起来不起眼,但用起来真的能省不少事。
写在最后
总结一下,VSCode + GitHub Copilot 给我最大的感觉就是 全面。
实话说,论 Agent 编程的极致体验,Claude Code 还是更强一些;论新功能推出的速度和迭代节奏,Cursor 也一直走在前面。
但 Copilot 胜在它是'六边形战士',从代码补全到 AI 对话、从 Agent 编程到 MCP 生态、从自定义指令到智能体编排,AI 编程该有的能力它基本都有了,而且每个方面的体验都很丝滑。
此外,很多同学在 AI 流行之前就一直在用 VSCode,现在装个插件就能无缝升级到 AI 编程,不用换编辑器、不用重新学操作、不用迁移配置,使用门槛是最低的。
感兴趣的同学可以去试试,记得先白票 30 天的 Pro 试用~ 如果你是在校学生,还可以通过 GitHub Education 申请学生认证,认证通过后 Copilot Pro 直接免费用,不限时!
相关免费在线工具
- RSA密钥对生成器
生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online
- Mermaid 预览与可视化编辑
基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online
- 随机西班牙地址生成器
随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
- Markdown转HTML
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online