跳到主要内容
极客日志极客日志
首页博客AI提示词GitHub精选代理工具
搜索
|注册
博客列表
编程语言AI大前端

VSCode + GitHub Copilot AI 编程实战指南

综述由AI生成本文详解了 VSCode 搭配 GitHub Copilot 的 AI 编程实战流程。涵盖从安装配置、基础对话与代码补全,到核心的 Agent 模式工作流演示。重点解析了 Tools 工具箱、MCP 外部连接、Agent Skills 技能包、多模式运行、Hooks 自动化脚本、自定义指令与智能体、Prompt 模板及 Smart Actions 等高级特性。通过构建实际案例展示了如何高效利用 AI 完成从方案设计到代码生成的全流程,适合希望提升开发效率的技术人员参考。

随缘发布于 2026/3/24更新于 2026/5/86 浏览
VSCode + GitHub Copilot AI 编程实战指南

VSCode + GitHub Copilot AI 编程实战指南

AI 编程工具如今百花齐放,从 Cursor 到 Claude Code,新选手层出不穷。近期深入体验了 GitHub Copilot,发现其在 VSCode 中的集成度与 Agent 能力确实值得推荐。

VSCode 作为全球最流行的代码编辑器,配合官方 AI 插件 Copilot,能带来显著的效率提升。相比其他工具,Copilot 在模型支持、运行模式、工具管理及交互体验上表现均衡。

安装和配置

  1. 前往 VSCode 官网下载安装包,完成基础安装。
  2. 打开 VSCode,进入扩展市场搜索 "GitHub Copilot",安装官方插件。如需中文界面,可额外安装汉化插件。
  3. 点击底部状态栏的 Copilot 图标登录 GitHub 账号。若无订阅,会自动进入免费计划,每月有一定额度;Pro 版本通常提供新用户试用。

安装完成后,即可开始使用。相比某些需要复杂网络配置或命令行操作的方案,Copilot 的体验更为直观。

基本使用

AI 对话

点击顶部聊天按钮打开 Chat 面板,可与 AI 进行需求分析、代码编写或 Bug 修复。

对话框内置智能体选择器,支持三种模式切换:

  • Agent 全自主模式:AI 自主分析、写代码、执行命令,适合完整任务。
  • Plan 规划模式:先出方案再动手,适合复杂项目。
  • Ask 纯问答模式:仅回答问题,不修改代码。

此外,还支持行内对话(Ctrl+I / Cmd+I)和 Quick Chat 弹窗(Ctrl+Shift+Alt+L),满足轻量级交互需求。

AI 代码补全

书写代码时,Copilot 会提供浅色建议,按 Tab 接受。更智能的是 Next Edit Suggestions (NES),它能预测下一步编辑位置,左侧出现箭头提示,按 Tab 即可跳转应用,大幅减少上下文切换。

AI Agent 编程实战

Agent 模式是 Copilot 的核心优势。它不仅能生成代码,还能自主管理文件、安装依赖、运行命令并处理报错。

以下通过构建一个「AI 塔罗牌占卜网站」演示 Plan + Agent 工作流。

制定方案

新建空项目文件夹并在 VSCode 中打开。在 Chat 中选择 Plan 模式及大模型,输入需求:

帮我用 HTML + CSS + JavaScript 做一个 AI 塔罗牌占卜网站。功能描述:用户输入问题后展示翻牌动画,根据抽到的牌生成 AI 解读,界面需深紫色星空主题,响应式布局。

AI 不会立即写代码,而是先研究需求,可能询问细节(如 API 调用方式)。确认需求后,它会输出结构化方案,列出文件结构、实现步骤及验证方法。此阶段可反复调整方案,确保逻辑清晰。

执行方案

方案确认后,点击 "Start Implementation"。Agent 将自动创建文件、写入代码、执行终端命令。过程中会显示任务列表(Todos),实时反馈进度。若涉及敏感操作(如删除文件),会弹出确认框。

执行期间可随时干预,引导 AI 调整方向。建议初期多观察 AI 行为,及时纠偏以节省 Token。

查看效果

Agent 完成任务后,通常会启动本地服务器预览。复制地址至浏览器测试,配置好大模型 API Key 后即可体验。输入问题点击占卜,页面应展示翻牌动画及 AI 解读。

若对细节不满意,可在内置浏览器选中元素,在 Chat 框发送修改指令(如'改为鱼皮塔罗'),Agent 会自动定位代码并精准修改。

整个过程从需求到成品仅需数分钟。需注意上下文限制,若接近上限,可让 AI 沉淀项目文档以便后续恢复记忆。

核心特性

Tools - 给 AI 的工具箱

Agent 的能力源于工具调用(Tool Use)。VSCode 提供三类工具:

  • 内置工具:代码搜索、文件读写、终端执行等。
  • MCP 工具:通过 MCP 协议接入的外部服务。
  • 扩展工具:插件提供的特定能力。

所有工具可通过 Chat 面板可视化管理,无需手动配置。开启后 AI 会自动判断调用时机,也可通过 # 号手动引用(如 #codebase 搜索库、#problems 查报错)。

MCP - 连接外部能力

MCP(Model Context Protocol)允许 AI 连接数据库、API 或浏览器。VSCode 扩展市场已集成部分 MCP 服务,可直接安装配置。

例如安装 Context7 获取最新技术文档,AI 在执行任务时可自动拉取参考,减少幻觉。新手可通过可视化界面安装,老手亦可编辑 .vscode/mcp.json 手动配置。MCP 支持跨设备同步,方便迁移环境。

Agent Skills - 技能包

Skills 是给 AI 的专项工作手册,包含操作指南、示例代码等。不同于通用工具,Skills 能让 AI 在特定领域(如 Web 测试)表现更专业。

可从社区获取现成 Skills,也可自行创建。核心是编写 SKILL.md 文件,定义名称、描述及执行步骤。Skill 采用渐进式披露,按需加载,避免上下文爆炸。

多种 Agent 运行方式

Copilot 支持四种运行模式:

运行方式特点适用场景
Local 本地交互式,实时反馈探索性开发
Background 后台后台自主运行,Git 隔离明确任务,后台处理
Cloud 云端远程服务器,自动提 PR团队协作,节省资源
Third-party 第三方接入 Anthropic/OpenAI 等特定厂商能力

可在 Chat 底部切换模式。支持多 Session 并行管理,类似多终端 Tab,便于同时处理不同任务。

Hooks - 自动触发脚本

Hooks 允许在 Agent 关键节点运行自定义脚本。例如在 PostToolUse 阶段自动运行 Prettier 格式化代码。

配置文件位于 .github/hooks/,支持拦截危险命令、记录日志等功能。配置格式兼容 Claude Code,旧配置可直接复用。

Custom Instructions - 遵循规范

自定义指令(Custom Instructions)用于设定编码规范和技术偏好。文件路径为 .github/copilot-instructions.md。

内容可包含代码风格、技术栈偏好、质量要求等。支持全局生效或基于文件模式匹配(File-based)。输入 /init 命令,AI 可自动分析项目生成初始指令,适合接手老项目。

Custom Agents - 分配角色

自定义智能体(Custom Agents)允许定义特定角色(如安全审查员、架构师)。与全局指令不同,角色切换后 AI 的行为规则、工具权限均受约束。

可通过可视化界面或手动创建 .agent.md 文件定义。支持 Handoffs(移交)机制,实现智能体间任务接力。例如 Plan 智能体完成后自动移交 Agent 智能体执行。VSCode 也兼容 Claude 格式的 Agent 文件。

Prompt Files - 提示词模板

Prompt Files 将常用任务封装为斜杠命令(如 /gen-test)。区别于自定义指令的全局应用,Prompt Files 需手动触发,适合特定场景。

创建 .prompt.md 文件,支持变量替换(如 ${file} 当前路径)。保存后可在对话中输入命令快速调用,并可追加额外参数。

Smart Actions - 快捷操作

Copilot 在右键菜单中集成了多项 AI 快捷操作:

  • 自动生成 Commit Message
  • 代码解释、生成测试、生成文档
  • 修复错误、代码审查
  • 语义搜索、辅助重命名

这些功能无需编写提示词,右键即可触发,日常开发中非常实用。

总结

VSCode + GitHub Copilot 的优势在于全面性与生态整合。虽然单一维度上可能有竞品更强,但 Copilot 在代码补全、对话、Agent 编程、MCP 生态及自定义配置等方面均提供了丝滑体验。

对于已有 VSCode 习惯的用户,升级门槛极低,无需更换编辑器或重新学习操作。学生群体可通过 GitHub Education 申请认证获得 Pro 版免费权益。整体而言,这是一个兼顾效率与灵活性的 AI 编程解决方案。

目录

  1. VSCode + GitHub Copilot AI 编程实战指南
  2. 安装和配置
  3. 基本使用
  4. AI 对话
  5. AI 代码补全
  6. AI Agent 编程实战
  7. 制定方案
  8. 执行方案
  9. 查看效果
  10. 核心特性
  11. Tools - 给 AI 的工具箱
  12. MCP - 连接外部能力
  13. Agent Skills - 技能包
  14. 多种 Agent 运行方式
  15. Hooks - 自动触发脚本
  16. Custom Instructions - 遵循规范
  17. Custom Agents - 分配角色
  18. Prompt Files - 提示词模板
  19. Smart Actions - 快捷操作
  20. 总结
  • 💰 8折买阿里云服务器限时8折了解详情
  • GPT-5.5 超高智商模型1元抵1刀ChatGPT中转购买
  • 代充Chatgpt Plus/pro 帐号了解详情
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • Windows 安装 OpenCode AI 编码助理踩坑与成功指南
  • SkyWalking Kafka 与 RabbitMQ 消息链路追踪实战
  • 程序员靠谱副业盘点:内容、技术与多元变现路径
  • 基于 WebView2 的轻量级 Web 桌面应用打包方案
  • 注意力机制与 Transformer 模型架构及实战详解
  • PID 循迹机器人控制算法实战:24 电赛 H 题解析
  • Adobe Illustrator 2025 安装步骤与使用技巧指南
  • 基于Rokid灵珠AI平台的春节全能助手智能体开发实践
  • 使用 wechat-need-web 插件实现浏览器访问微信网页版
  • LangChain 大模型对话记忆模块实战与 Web 应用搭建
  • WebSphere 反序列化漏洞 CVE-2015-7450 原理与利用分析
  • 搭建前端开发环境:安装 nvm、Node.js 与 pnpm 配置
  • 微信群智能管理:扣子机器人接入实战
  • 从 Web 到 AI:Skills 市场与共享经济架构实战
  • RabbitMQ 常见工作模式及发布确认实现
  • Python 结合代理 API 实现音乐数据自动化采集实战
  • Linux 网络编程:基于 C++ 实现 JSON 与 HTTP Web 服务器
  • 前端 PWA 开发指南:构建离线可安装 Web 应用
  • 使用 Web Scraper 插件抓取知乎评论数据实战
  • Python SQLAlchemy ORM 核心实战指南

相关免费在线工具

  • 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