跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像AI 生图工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
编程语言AI大前端

VSCode + GitHub Copilot AI 编程实战教程

VSCode 搭配 GitHub Copilot 进行 AI 编程的完整流程。涵盖安装配置、基础对话与代码补全功能,以及核心的 Agent 编程实战(Plan 模式制定方案,Agent 模式执行)。详细解析了 Tools 工具箱、MCP 外部连接、Agent Skills 技能包、多种运行方式、Hooks 脚本、Custom Instructions 自定义指令及 Custom Agents 角色分配等高级特性。通过构建 AI 塔罗牌网站的案例,展示了从需求分析到自动部署的全过程,适合希望提升开发效率的开发者参考。

孤勇者发布于 2026/4/6更新于 2026/7/2456 浏览
VSCode + GitHub Copilot AI 编程实战教程

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

AI 编程工具百花齐放,Cursor、Claude Code、OpenCode 等不断涌现。GitHub Copilot 作为 GitHub 官方出品的 AI 编程助手插件,直接安装在 VSCode 中使用,具有显著优势。

相比其他 AI 编程工具,Copilot 具备以下特点:

  1. 支持最新 AI 大模型(Opus、GPT、Gemini、Claude),全栈项目适用
  2. 支持本地、后台 CLI、云端等多种运行模式,兼容性强
  3. 支持 MCP、Skills、工具调用的可视化管理
  4. 支持子智能体,交互清晰可见

安装和配置

1)进入 VSCode 官网 下载安装包,直接安装。

2)打开 VSCode,点击左侧「扩展市场」图标,搜索 "GitHub Copilot",安装官方 AI 编程插件。可额外安装 Chinese 汉化插件。

3)安装完后,点击 VSCode 底部状态栏的 Copilot 图标,按照提示登录 GitHub 账号。若未订阅,会自动进入 Copilot Free 免费计划,每月有一定额度。Copilot Pro 支持新用户免费试用 30 天。

基本使用

AI 对话

点击 VSCode 上方的「聊天按钮」,打开 Chat 对话面板。对话框区域有一个 智能体选择器,可在 3 种内置模式之间切换:

  • Agent 全自主模式:AI 自己分析、写代码、跑命令
  • Plan 规划模式:AI 先出方案再动手
  • Ask 纯问答模式:只回答问题,不改代码

此外还有两种轻量的 AI 对话方式: 1)按 Ctrl+I(Mac 是 Cmd+I)打开行内对话 2)按 Ctrl+Shift+Alt+L(Mac 是 Cmd+Shift+Option+L)打开 Quick Chat 弹窗

AI 代码补全

写代码时,Copilot 会自动给出浅色补全建议,按 Tab 接受。更智能的是 Next Edit Suggestions(NES),预测下一步编辑位置,编辑器左侧会出现小箭头,按 Tab 跳转应用。

AI Agent 编程实战

Agent 模式是 GitHub Copilot 的核心能力。你给它一个需求,它会自己分析项目、制定计划、创建文件、写代码、跑命令、装依赖,遇到报错自动修复。

GitHub Copilot 提供了 Plan 模式。先让 AI 帮你出方案、拆步骤,确认没问题后再动手。

第一步、用 Plan 制定方案

新建空项目文件夹,在 VSCode 中打开。在对话区域的智能体选择器中选择 Plan 模式、并选择大模型,输入需求:

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

AI 理解需求后,会给出结构化的实施方案,列出要创建的文件、实现步骤及验证方法。

第二步、用 Agent 执行方案

确认方案后,点击「Start Implementation」按钮,让 AI 开始自动执行。Agent 会自动管理 Todos 任务列表跟踪进度,包括创建文件、写入代码、执行终端命令等。若需跑终端命令或调用工具,会弹出确认框审批。

第三步、查看效果

Agent 完成开发任务后,可启动 Web 服务器运行网站。复制网址到浏览器测试,输入获取的大模型 API Key 即可使用。

如果对页面细节不满意,可在内置浏览器中点击「元素选择」按钮,在 Chat 框里编写提示词修改代码,Agent 会自动定位并精准修改。

核心特性

Tools - 给 AI 的工具箱

工具就是 AI 在执行任务时可以调用的各种能力,如搜索代码、读写文件、跑终端命令等。VSCode 提供三种类型的工具:

  • 内置工具:开箱即用
  • MCP 工具:通过 MCP 协议接入的外部工具
  • 扩展工具:VSCode 插件提供的工具

所有工具可通过 Chat 对话区域的「配置工具」按钮进行可视化管理。开启工具后,大多数情况下 AI 会自动判断调用哪些工具。也可在对话中用 # 号手动引用特定工具,如 #codebase、#fetch、#problems。

MCP - 让 AI 连接外部能力

MCP(Model Context Protocol)是一种开放标准协议,让 AI 能够连接外部工具和服务。GitHub Copilot 将 MCP 集成到了 VSCode 的扩展市场里,可直接安装热门 MCP 服务。

例如安装 Context7 获取最新技术文档的 MCP,确认后 AI 会自动调用。无需手写 JSON 配置,全程可视化选择。老手也可通过 .vscode/mcp.json 文件手动配置。

Agent Skills - 给 AI 的技能包

Agent Skills 是给 AI 准备的能力扩展包,包含操作指南、脚本、示例代码等资源。Skills 是一个开放标准,不仅 Github Copilot 能用,Claude Code、Cursor 等也能用。

可从网上安装别人开发好的 SKills,或在 VSCode 中通过对话框的 Skills 设置按钮查看和管理。也可以自己创建 Skills,核心是编写 SKILL.md 技能描述文件。

多种 Agent 运行方式

GitHub Copilot 支持 4 种 Agent 运行方式:

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

可在 Chat 对话区域底部的下拉菜单中随时切换。支持在不同 Agent 之间移交任务,同时开多个 Agent Session 统一管理。

Hooks - 自动触发的脚本

Hooks 允许在 Agent 执行的关键节点自动运行自定义脚本。支持的生命周期事件包括 PreToolUse、PostToolUse、SessionStart/Stop 等。

在项目的 .github/hooks/ 目录下创建 JSON 配置文件,填入代码即可。例如每次 Agent 调用工具修改了代码文件,都会自动跑一遍 Prettier 代码美化工具。

Custom Instructions - 让 AI 遵循你的规范

自定义指令就是给 AI 定规矩。把编码规范、技术偏好、项目约定写到一个 Markdown 文件里,AI 在每次对话时都会自动遵循。

Copilot 的指令文件路径是 .github/copilot-instructions.md,支持更细粒度的文件模式匹配。VSCode 支持全局生效的指令(Always-on)和基于文件模式匹配的指令(File-based)。在对话区域输入 /init,AI 会自动分析项目结构和代码风格,帮你生成一份自定义指令文件。

Custom Agents - 给 AI 分配角色

自定义智能体就是给 AI 分配不同的角色。跟 Custom Instructions 不一样的是,Instructions 是全局规则,而 Custom Agents 是角色切换。

创建方式有两种:一是在对话区域的设置中打开「自定义智能体」;二是手动写一个 .agent.md 文件放在 .github/agents/ 目录下。保存后,在对话区域的智能体下拉菜单中就能看到这个写作助手了。

自定义智能体还支持 Handoffs(移交),可以在 Agent 文件中定义「下一步动作」按钮,实现智能体之间的任务接力。

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

Prompt Files(提示词文件)可以把你常用的任务封装成 斜杠命令,在对话中随时复用。

创建方式跟自定义指令类似,在 .github/prompts/ 目录下创建 .prompt.md 文件。保存后,在对话框中输入 /命令名 就能触发。还可以追加额外信息。

Smart Actions - AI 快捷操作

Copilot 在 VSCode 的各个角落埋了不少 AI 快捷操作,叫 Smart Actions。常用功能包括:

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

总结

VSCode + GitHub Copilot 的优势在于全面。从代码补全到 AI 对话、从 Agent 编程到 MCP 生态、从自定义指令到智能体编排,AI 编程该有的能力基本都有。且无需换编辑器、不用重新学操作、不用迁移配置,使用门槛低。在校学生可通过 GitHub Education 申请学生认证,认证通过后 Copilot Pro 直接免费用。

目录

  1. 安装和配置
  2. 基本使用
  3. AI 对话
  4. AI 代码补全
  5. AI Agent 编程实战
  6. 第一步、用 Plan 制定方案
  7. 第二步、用 Agent 执行方案
  8. 第三步、查看效果
  9. 核心特性
  10. Tools - 给 AI 的工具箱
  11. MCP - 让 AI 连接外部能力
  12. Agent Skills - 给 AI 的技能包
  13. 多种 Agent 运行方式
  14. Hooks - 自动触发的脚本
  15. Custom Instructions - 让 AI 遵循你的规范
  16. Custom Agents - 给 AI 分配角色
  17. Prompt Files - 可复用的提示词模板
  18. Smart Actions - AI 快捷操作
  19. 总结
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒,将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

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

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

更多推荐文章

查看全部
  • 2026 年 3 月 13 日 AI 热点:芯片大战、Agent 爆发、安全争议
  • CoPaw Windows 安装及应用指南
  • SeeDream 4.0 AI 修图与生成教程
  • Whisper 模型国内镜像源汇总与快速下载方案
  • FastAPI 打造基于 LLM 的 Web 接口实战教程
  • OpenClaw Java:基于 Spring Boot 的 AI Agent Gateway 全栈实践
  • MySQL 到 KingbaseES 数据库迁移最佳实践指南
  • Java 智能仿真无人机项目 4.0 核心实现
  • Flutter 与 Web 混合开发实践:构建跨平台统一体验
  • 基于 SpringBoot 和 Leaflet 的电影票房时序可视化
  • 基于MISRA C++的车载软件开发实战案例
  • 用 Docker 和 cpolar 部署 Web-Check 并开放远程访问
  • Flutter+OpenHarmony 智能家居开发:多设备验证、BUG 修复与打包发布流程
  • Unity 游戏中接入 DeepSeek 实现 AI 对话的完整步骤
  • llama.cpp Vulkan 后端编译指南:环境配置与问题修复
  • AIGC 工具助力 2D 游戏美术全流程
  • 5 款国产免费 AI 代码助手评测对比
  • 机器人重力补偿技术:MuJoCo 实现解析与原理分析
  • Stable Diffusion 教程:使用 Inpainting 修复局部细节(如发饰)
  • ClaudeCode 结合 Figma-MCP 实现前端 UI 1:1 还原指南

相关免费在线工具

  • 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