【大模型专题】AI Copilot 完整实践指南：VSCode + GitHub Copilot Agent 模式全攻略

AI Copilot 完整实践指南：VSCode + GitHub Copilot Agent 模式全攻略

- [一、什么是 AI Copilot？](#一、什么是 AI Copilot？)
- - 核心能力跃迁
  - 价值对比
- 二、整体架构解析
- - [2.1 系统总览](#2.1 系统总览)
  - [2.2 Agent 模式运行时序](#2.2 Agent 模式运行时序)
  - [2.3 Plan 模式 vs Agent 模式](#2.3 Plan 模式 vs Agent 模式)
- 三、环境准备与安装
- - [3.1 安装 VSCode](#3.1 安装 VSCode)
  - [3.2 安装 GitHub Copilot 扩展](#3.2 安装 GitHub Copilot 扩展)
  - [3.3 订阅方案选择](#3.3 订阅方案选择)
  - [3.4 验证安装](#3.4 验证安装)
- 四、核心功能全景
- - [4.1 代码补全（NES）](#4.1 代码补全（NES）)
  - [4.2 行内对话（Ctrl+I / Cmd+I）](#4.2 行内对话（Ctrl+I / Cmd+I）)
  - [4.3 Chat 三种模式](#4.3 Chat 三种模式)
  - [4.4 上下文指令速查](#4.4 上下文指令速查)
  - - [`@` 指令](#@ 指令)
    - [`#` 指令](#` 指令)
    - [`+` 手动添加](#+ 手动添加)
- [五、Agent 模式深度实战](#五、Agent 模式深度实战)
- - [5.1 工具权限配置](#5.1 工具权限配置)
  - [5.2 工具集（Tool Sets）配置](#5.2 工具集（Tool Sets）配置)
  - [5.3 Agent 实战：修复 Bug 流程](#5.3 Agent 实战：修复 Bug 流程)
- [六、MCP 工具扩展](#六、MCP 工具扩展)
- - [6.1 什么是 MCP](#6.1 什么是 MCP)
  - [6.2 配置 MCP 服务](#6.2 配置 MCP 服务)
  - [6.3 MCP 三大能力](#6.3 MCP 三大能力)
  - [6.4 常用 MCP 服务推荐](#6.4 常用 MCP 服务推荐)
- [七、Hooks 自动触发机制](#七、Hooks 自动触发机制)
- - [7.1 常用 Hook 场景](#7.1 常用 Hook 场景)
  - [7.2 Hooks 配置文件](#7.2 Hooks 配置文件)
  - [7.3 实战 Hook 模板](#7.3 实战 Hook 模板)
- [八、Custom Instructions 项目规范](#八、Custom Instructions 项目规范)
- - [8.1 使用 `/init` 自动生成](#8.1 使用 /init 自动生成)
  - [8.2 手动编写示例](#8.2 手动编写示例)
  - [8.3 多文件 Instructions](#8.3 多文件 Instructions)
- [九、完整实践案例：AI 塔罗占卜网站](#九、完整实践案例：AI 塔罗占卜网站)
- - [9.1 需求描述](#9.1 需求描述)
  - [9.2 完整操作流程](#9.2 完整操作流程)
  - [9.3 详细步骤](#9.3 详细步骤)
  - [9.4 上下文管理技巧](#9.4 上下文管理技巧)
- [十、多 Agent 协作模式](#十、多 Agent 协作模式)
- - [10.1 四种运行方式](#10.1 四种运行方式)
  - [10.2 跨 Agent 任务移交](#10.2 跨 Agent 任务移交)
  - [10.3 并行 Agent 协作](#10.3 并行 Agent 协作)
  - [10.4 Custom Agent 自定义角色](#10.4 Custom Agent 自定义角色)
- 十一、踩坑与安全清单
- - [11.1 必避坑](#11.1 必避坑)
  - [11.2 安全清单](#11.2 安全清单)
  - [11.3 性能优化](#11.3 性能优化)
- 十二、最佳实践总结
- - [12.1 核心方法论](#12.1 核心方法论)
  - [12.2 推荐工作流](#12.2 推荐工作流)
  - [12.3 入门推荐路径](#12.3 入门推荐路径)
  - [12.4 关键原则](#12.4 关键原则)

副标题：从安装到精通------让 AI 真正成为你的结对编程伙伴

一、什么是 AI Copilot？

AI Copilot 是以 GitHub Copilot 为代表的新一代 AI 编程助手，在 2026 年已从"代码补全工具"进化为自主 Agent，能够理解意图、跨文件修改、执行命令、自我修正。

核心能力跃迁

阶段	能力	典型表现
L1 补全时代	按行建议下一行代码	输入 `for i in`，建议 `range()`
L2 Copilot Chat	自然语言对话	解释代码、生成函数、回答问题
L3 Agent Mode	自主执行多步骤任务	跨文件重构、跑命令、跑测试、提 PR
L4 Agent HQ	多 Agent 并行 + 任务移交	本地 Plan + 云端执行无缝衔接

价值对比

痛点（Before）	解法（After）
需求到落地需要数小时	几分钟完成可运行原型
上下文需手动复制粘贴	`@workspace` 自动理解全项目
重复样板代码浪费精力	AI 自动生成测试/文档/Commit
跨文件重构令人头大	Agent 自主修改并跑通测试
工具调用复杂难集成	MCP 协议 + 一行配置接入

二、整体架构解析

2.1 系统总览

#mermaid-svg-8iAyYPl8FGhuxjjm{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-8iAyYPl8FGhuxjjm .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-8iAyYPl8FGhuxjjm .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-8iAyYPl8FGhuxjjm .error-icon{fill:#552222;}#mermaid-svg-8iAyYPl8FGhuxjjm .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8iAyYPl8FGhuxjjm .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-8iAyYPl8FGhuxjjm .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8iAyYPl8FGhuxjjm .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8iAyYPl8FGhuxjjm .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-8iAyYPl8FGhuxjjm .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8iAyYPl8FGhuxjjm .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8iAyYPl8FGhuxjjm .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8iAyYPl8FGhuxjjm .marker.cross{stroke:#333333;}#mermaid-svg-8iAyYPl8FGhuxjjm svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8iAyYPl8FGhuxjjm p{margin:0;}#mermaid-svg-8iAyYPl8FGhuxjjm .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-8iAyYPl8FGhuxjjm .cluster-label text{fill:#333;}#mermaid-svg-8iAyYPl8FGhuxjjm .cluster-label span{color:#333;}#mermaid-svg-8iAyYPl8FGhuxjjm .cluster-label span p{background-color:transparent;}#mermaid-svg-8iAyYPl8FGhuxjjm .label text,#mermaid-svg-8iAyYPl8FGhuxjjm span{fill:#333;color:#333;}#mermaid-svg-8iAyYPl8FGhuxjjm .node rect,#mermaid-svg-8iAyYPl8FGhuxjjm .node circle,#mermaid-svg-8iAyYPl8FGhuxjjm .node ellipse,#mermaid-svg-8iAyYPl8FGhuxjjm .node polygon,#mermaid-svg-8iAyYPl8FGhuxjjm .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8iAyYPl8FGhuxjjm .rough-node .label text,#mermaid-svg-8iAyYPl8FGhuxjjm .node .label text,#mermaid-svg-8iAyYPl8FGhuxjjm .image-shape .label,#mermaid-svg-8iAyYPl8FGhuxjjm .icon-shape .label{text-anchor:middle;}#mermaid-svg-8iAyYPl8FGhuxjjm .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-8iAyYPl8FGhuxjjm .rough-node .label,#mermaid-svg-8iAyYPl8FGhuxjjm .node .label,#mermaid-svg-8iAyYPl8FGhuxjjm .image-shape .label,#mermaid-svg-8iAyYPl8FGhuxjjm .icon-shape .label{text-align:center;}#mermaid-svg-8iAyYPl8FGhuxjjm .node.clickable{cursor:pointer;}#mermaid-svg-8iAyYPl8FGhuxjjm .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-8iAyYPl8FGhuxjjm .arrowheadPath{fill:#333333;}#mermaid-svg-8iAyYPl8FGhuxjjm .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-8iAyYPl8FGhuxjjm .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-8iAyYPl8FGhuxjjm .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-8iAyYPl8FGhuxjjm .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-8iAyYPl8FGhuxjjm .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-8iAyYPl8FGhuxjjm .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-8iAyYPl8FGhuxjjm .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-8iAyYPl8FGhuxjjm .cluster text{fill:#333;}#mermaid-svg-8iAyYPl8FGhuxjjm .cluster span{color:#333;}#mermaid-svg-8iAyYPl8FGhuxjjm div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-8iAyYPl8FGhuxjjm .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-8iAyYPl8FGhuxjjm rect.text{fill:none;stroke-width:0;}#mermaid-svg-8iAyYPl8FGhuxjjm .icon-shape,#mermaid-svg-8iAyYPl8FGhuxjjm .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-8iAyYPl8FGhuxjjm .icon-shape p,#mermaid-svg-8iAyYPl8FGhuxjjm .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-8iAyYPl8FGhuxjjm .icon-shape .label rect,#mermaid-svg-8iAyYPl8FGhuxjjm .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-8iAyYPl8FGhuxjjm .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-8iAyYPl8FGhuxjjm .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-8iAyYPl8FGhuxjjm :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 🧠 模型层
🔧 工具层
📚 上下文层
🤖 Agent 层
🖥️ VSCode 客户端
触发
Copilot 扩展
Chat 侧边栏
行内对话
NES 代码补全
Ask 模式

纯问答
Plan 模式

规划方案
Agent 模式

自主执行
Custom Agent

自定义角色
代码库
终端输出
Git 历史
Instructions

项目规范
内置工具

codebase/search/edit
MCP 工具集
Hooks 自动脚本
Auto 自动选择
GPT-5.4
Claude 系列
自建模型

2.2 Agent 模式运行时序

模型工具上下文 Agent VSCode 用户模型工具上下文 Agent VSCode 用户 #mermaid-svg-KWXcHswgSucg9YnH{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-KWXcHswgSucg9YnH .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-KWXcHswgSucg9YnH .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-KWXcHswgSucg9YnH .error-icon{fill:#552222;}#mermaid-svg-KWXcHswgSucg9YnH .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-KWXcHswgSucg9YnH .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-KWXcHswgSucg9YnH .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-KWXcHswgSucg9YnH .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-KWXcHswgSucg9YnH .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-KWXcHswgSucg9YnH .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-KWXcHswgSucg9YnH .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-KWXcHswgSucg9YnH .marker{fill:#333333;stroke:#333333;}#mermaid-svg-KWXcHswgSucg9YnH .marker.cross{stroke:#333333;}#mermaid-svg-KWXcHswgSucg9YnH svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-KWXcHswgSucg9YnH p{margin:0;}#mermaid-svg-KWXcHswgSucg9YnH .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-KWXcHswgSucg9YnH text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-KWXcHswgSucg9YnH .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-KWXcHswgSucg9YnH .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-KWXcHswgSucg9YnH .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-KWXcHswgSucg9YnH .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-KWXcHswgSucg9YnH #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-KWXcHswgSucg9YnH .sequenceNumber{fill:white;}#mermaid-svg-KWXcHswgSucg9YnH #sequencenumber{fill:#333;}#mermaid-svg-KWXcHswgSucg9YnH #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-KWXcHswgSucg9YnH .messageText{fill:#333;stroke:none;}#mermaid-svg-KWXcHswgSucg9YnH .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-KWXcHswgSucg9YnH .labelText,#mermaid-svg-KWXcHswgSucg9YnH .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-KWXcHswgSucg9YnH .loopText,#mermaid-svg-KWXcHswgSucg9YnH .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-KWXcHswgSucg9YnH .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-KWXcHswgSucg9YnH .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-KWXcHswgSucg9YnH .noteText,#mermaid-svg-KWXcHswgSucg9YnH .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-KWXcHswgSucg9YnH .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-KWXcHswgSucg9YnH .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-KWXcHswgSucg9YnH .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-KWXcHswgSucg9YnH .actorPopupMenu{position:absolute;}#mermaid-svg-KWXcHswgSucg9YnH .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-KWXcHswgSucg9YnH .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-KWXcHswgSucg9YnH .actor-man circle,#mermaid-svg-KWXcHswgSucg9YnH line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-KWXcHswgSucg9YnH :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 打开 Chat → Agent 模式 "帮我做一个登录页" 提交请求收集上下文（@workspace）返回项目信息制定执行计划返回步骤1：创建 login.html 调用 createFile 文件已创建步骤1完成，继续步骤2 步骤2：写 CSS editFiles 步骤3：跑测试 executeCommand npm test 测试通过 ✅ 任务完成，附变更摘要

2.3 Plan 模式 vs Agent 模式

#mermaid-svg-zR1y51deIO7uOBQB{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-zR1y51deIO7uOBQB .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-zR1y51deIO7uOBQB .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-zR1y51deIO7uOBQB .error-icon{fill:#552222;}#mermaid-svg-zR1y51deIO7uOBQB .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-zR1y51deIO7uOBQB .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-zR1y51deIO7uOBQB .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-zR1y51deIO7uOBQB .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-zR1y51deIO7uOBQB .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-zR1y51deIO7uOBQB .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-zR1y51deIO7uOBQB .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-zR1y51deIO7uOBQB .marker{fill:#333333;stroke:#333333;}#mermaid-svg-zR1y51deIO7uOBQB .marker.cross{stroke:#333333;}#mermaid-svg-zR1y51deIO7uOBQB svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-zR1y51deIO7uOBQB p{margin:0;}#mermaid-svg-zR1y51deIO7uOBQB .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-zR1y51deIO7uOBQB .cluster-label text{fill:#333;}#mermaid-svg-zR1y51deIO7uOBQB .cluster-label span{color:#333;}#mermaid-svg-zR1y51deIO7uOBQB .cluster-label span p{background-color:transparent;}#mermaid-svg-zR1y51deIO7uOBQB .label text,#mermaid-svg-zR1y51deIO7uOBQB span{fill:#333;color:#333;}#mermaid-svg-zR1y51deIO7uOBQB .node rect,#mermaid-svg-zR1y51deIO7uOBQB .node circle,#mermaid-svg-zR1y51deIO7uOBQB .node ellipse,#mermaid-svg-zR1y51deIO7uOBQB .node polygon,#mermaid-svg-zR1y51deIO7uOBQB .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-zR1y51deIO7uOBQB .rough-node .label text,#mermaid-svg-zR1y51deIO7uOBQB .node .label text,#mermaid-svg-zR1y51deIO7uOBQB .image-shape .label,#mermaid-svg-zR1y51deIO7uOBQB .icon-shape .label{text-anchor:middle;}#mermaid-svg-zR1y51deIO7uOBQB .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-zR1y51deIO7uOBQB .rough-node .label,#mermaid-svg-zR1y51deIO7uOBQB .node .label,#mermaid-svg-zR1y51deIO7uOBQB .image-shape .label,#mermaid-svg-zR1y51deIO7uOBQB .icon-shape .label{text-align:center;}#mermaid-svg-zR1y51deIO7uOBQB .node.clickable{cursor:pointer;}#mermaid-svg-zR1y51deIO7uOBQB .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-zR1y51deIO7uOBQB .arrowheadPath{fill:#333333;}#mermaid-svg-zR1y51deIO7uOBQB .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-zR1y51deIO7uOBQB .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-zR1y51deIO7uOBQB .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-zR1y51deIO7uOBQB .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-zR1y51deIO7uOBQB .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-zR1y51deIO7uOBQB .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-zR1y51deIO7uOBQB .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-zR1y51deIO7uOBQB .cluster text{fill:#333;}#mermaid-svg-zR1y51deIO7uOBQB .cluster span{color:#333;}#mermaid-svg-zR1y51deIO7uOBQB div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-zR1y51deIO7uOBQB .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-zR1y51deIO7uOBQB rect.text{fill:none;stroke-width:0;}#mermaid-svg-zR1y51deIO7uOBQB .icon-shape,#mermaid-svg-zR1y51deIO7uOBQB .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-zR1y51deIO7uOBQB .icon-shape p,#mermaid-svg-zR1y51deIO7uOBQB .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-zR1y51deIO7uOBQB .icon-shape .label rect,#mermaid-svg-zR1y51deIO7uOBQB .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-zR1y51deIO7uOBQB .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-zR1y51deIO7uOBQB .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-zR1y51deIO7uOBQB :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 🤖 Agent 模式
📋 Plan 模式
否
是
是
否
输入需求
分析上下文
生成实施清单
用户确认?
修改方案
移交 Agent
接收计划
逐步执行
调用工具
需要审批?
弹出审批
继续执行
完成报告

三、环境准备与安装

3.1 安装 VSCode

bash 复制代码

# 访问官网下载最新版本
# https://code.visualstudio.com/

# 推荐版本：v1.109+（Agent Mode 完善）

3.2 安装 GitHub Copilot 扩展

步骤：

复制代码

1. 打开 VSCode
2. 左侧扩展面板（Ctrl+Shift+X / Cmd+Shift+X）
3. 搜索 "GitHub Copilot"
4. 点击 Install（官方插件）
5. 重新加载 VSCode
6. 右下角点击 Copilot 图标
7. 登录 GitHub 账号

3.3 订阅方案选择

方案	价格	适用人群
Copilot Free	免费	个人体验，含基础额度
Copilot Pro	$10/月	个人深度使用，含最新模型
Copilot Pro+	$39/月	多模型 + 高级 Agent
Copilot Business	$19/用户/月	团队企业版
GitHub Education	学生免费	学生认证后长期免费

3.4 验证安装

bash 复制代码

# 1. 状态栏出现 Copilot 图标 = 安装成功
# 2. 打开任意代码文件
# 3. 输入代码测试补全是否触发
# 4. 打开 Chat 面板（侧边栏）测试对话

四、核心功能全景

4.1 代码补全（NES）

NES（Next Edit Suggestions） 是 2026 年新引入的"下一步建议"能力：

javascript 复制代码

// 场景：你在第 5 行添加了一个新参数
function calculateTotal(price, quantity, discount) {  // ← 你刚加的
    return price * quantity;
}

// NES 会自动建议：
// "你需要修改调用方以匹配新签名"
// 然后在第 20 行的调用处显示光标提示，按 Tab 即可自动修正

4.2 行内对话（Ctrl+I / Cmd+I）

javascript 复制代码

// 选中一段代码 → Ctrl+I → 输入 "优化性能"

// AI 会在原位置给出修改建议
// 接受 = 应用，Esc = 取消

4.3 Chat 三种模式

模式	特点	适用场景
Ask	纯问答，不改代码	解释原理、查 API、学习
Plan	先出方案再执行	复杂需求、新功能设计
Agent	自主修改 + 执行	自动化任务、完整开发

4.4 上下文指令速查

`@` 指令

指令	作用
`@workspace`	读取整个工作区
`@github`	仓库信息、Issues、PR
`@terminal`	引用终端输出
`@vscode`	IDE 配置与快捷键
`@vscode /search`	全局搜索

`#` 指令

指令	作用
`#askQuestions`	AI 主动反问补全需求
`#awaitTerminal`	等待终端输出再回复
`#browser`	联网搜索官方文档
`#createFile`	创建新文件
`#createDirectory`	创建新目录

`+` 手动添加

适用于大项目，@workspace 范围太大时，精准指定特定文件。

五、Agent 模式深度实战

5.1 工具权限配置

Agent 模式权限未全开时：每一步都弹窗询问

权限全开场景：

复制代码

适合全开：
✅ 从零搭建新项目（脚手架 + 装依赖）
✅ 有 Git 兜底的大规模重构
✅ 测试环境探索新依赖

不适合全开：
❌ 生产环境直接操作
❌ 涉及敏感数据删除
❌ 首次接触不熟悉的代码库

5.2 工具集（Tool Sets）配置

在 .vscode/settings.json 中：

json 复制代码

{
  "github.copilot.chat.toolsets": {
    "reader": {
      "tools": ["codebase", "problems", "usages", "search"],
      "description": "只读工具集，适合代码审查",
      "icon": "book"
    },
    "fullstack": {
      "tools": ["codebase", "editFiles", "runCommands", "problems"],
      "description": "全栈开发工具集",
      "icon": "rocket"
    }
  }
}

使用时在对话中输入 #reader 或 #fullstack 即可启用对应工具集。

5.3 Agent 实战：修复 Bug 流程

复制代码

1. 打开 Chat → Agent 模式
2. 输入："终端报错了，看看是什么问题"
   → Agent 调用 @terminal 读取报错
   → 自动定位问题代码
3. 输入："修复它"
   → Agent 修改代码
   → 跑测试验证
4. 输入："提交一个 commit"
   → Agent 生成 commit message 并提交

六、MCP 工具扩展

6.1 什么是 MCP

MCP（Model Context Protocol） 是标准化的工具接入协议，让 Agent 能调用外部 API、操作数据库、控制浏览器。

6.2 配置 MCP 服务

在项目根目录创建 .vscode/mcp.json：

json 复制代码

{
  "servers": {
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp"
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@microsoft/mcp-server-playwright"]
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/allowed/dir"]
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "POSTGRES_CONNECTION_STRING": "${env:DB_URL}"
      }
    }
  }
}

6.3 MCP 三大能力

#mermaid-svg-gMAQ7TkDIouFlMd3{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-gMAQ7TkDIouFlMd3 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-gMAQ7TkDIouFlMd3 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-gMAQ7TkDIouFlMd3 .error-icon{fill:#552222;}#mermaid-svg-gMAQ7TkDIouFlMd3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-gMAQ7TkDIouFlMd3 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-gMAQ7TkDIouFlMd3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-gMAQ7TkDIouFlMd3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-gMAQ7TkDIouFlMd3 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-gMAQ7TkDIouFlMd3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-gMAQ7TkDIouFlMd3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-gMAQ7TkDIouFlMd3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-gMAQ7TkDIouFlMd3 .marker.cross{stroke:#333333;}#mermaid-svg-gMAQ7TkDIouFlMd3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-gMAQ7TkDIouFlMd3 p{margin:0;}#mermaid-svg-gMAQ7TkDIouFlMd3 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-gMAQ7TkDIouFlMd3 .cluster-label text{fill:#333;}#mermaid-svg-gMAQ7TkDIouFlMd3 .cluster-label span{color:#333;}#mermaid-svg-gMAQ7TkDIouFlMd3 .cluster-label span p{background-color:transparent;}#mermaid-svg-gMAQ7TkDIouFlMd3 .label text,#mermaid-svg-gMAQ7TkDIouFlMd3 span{fill:#333;color:#333;}#mermaid-svg-gMAQ7TkDIouFlMd3 .node rect,#mermaid-svg-gMAQ7TkDIouFlMd3 .node circle,#mermaid-svg-gMAQ7TkDIouFlMd3 .node ellipse,#mermaid-svg-gMAQ7TkDIouFlMd3 .node polygon,#mermaid-svg-gMAQ7TkDIouFlMd3 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-gMAQ7TkDIouFlMd3 .rough-node .label text,#mermaid-svg-gMAQ7TkDIouFlMd3 .node .label text,#mermaid-svg-gMAQ7TkDIouFlMd3 .image-shape .label,#mermaid-svg-gMAQ7TkDIouFlMd3 .icon-shape .label{text-anchor:middle;}#mermaid-svg-gMAQ7TkDIouFlMd3 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-gMAQ7TkDIouFlMd3 .rough-node .label,#mermaid-svg-gMAQ7TkDIouFlMd3 .node .label,#mermaid-svg-gMAQ7TkDIouFlMd3 .image-shape .label,#mermaid-svg-gMAQ7TkDIouFlMd3 .icon-shape .label{text-align:center;}#mermaid-svg-gMAQ7TkDIouFlMd3 .node.clickable{cursor:pointer;}#mermaid-svg-gMAQ7TkDIouFlMd3 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-gMAQ7TkDIouFlMd3 .arrowheadPath{fill:#333333;}#mermaid-svg-gMAQ7TkDIouFlMd3 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-gMAQ7TkDIouFlMd3 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-gMAQ7TkDIouFlMd3 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-gMAQ7TkDIouFlMd3 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-gMAQ7TkDIouFlMd3 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-gMAQ7TkDIouFlMd3 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-gMAQ7TkDIouFlMd3 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-gMAQ7TkDIouFlMd3 .cluster text{fill:#333;}#mermaid-svg-gMAQ7TkDIouFlMd3 .cluster span{color:#333;}#mermaid-svg-gMAQ7TkDIouFlMd3 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-gMAQ7TkDIouFlMd3 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-gMAQ7TkDIouFlMd3 rect.text{fill:none;stroke-width:0;}#mermaid-svg-gMAQ7TkDIouFlMd3 .icon-shape,#mermaid-svg-gMAQ7TkDIouFlMd3 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-gMAQ7TkDIouFlMd3 .icon-shape p,#mermaid-svg-gMAQ7TkDIouFlMd3 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-gMAQ7TkDIouFlMd3 .icon-shape .label rect,#mermaid-svg-gMAQ7TkDIouFlMd3 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-gMAQ7TkDIouFlMd3 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-gMAQ7TkDIouFlMd3 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-gMAQ7TkDIouFlMd3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} MCP 协议
Resources

资源
Tools

工具
Prompts

提示词
提供上下文数据
执行实际操作
预定义任务模板
Agent

能力	说明	示例
Resources	上下文数据源	读取知识库、数据库 schema
Tools	实际工具调用	发送邮件、创建 PR
MCP Apps	渲染 UI 组件	对话中嵌入表单、图表

6.4 常用 MCP 服务推荐

服务	用途	安装方式
Playwright	浏览器自动化	`npx @microsoft/mcp-server-playwright`
Filesystem	文件系统操作	`npx @modelcontextprotocol/server-filesystem`
Postgres	数据库查询	`npx @modelcontextprotocol/server-postgres`
GitHub	仓库管理	HTTP 远程连接
Slack	消息推送	`npx @modelcontextprotocol/server-slack`

七、Hooks 自动触发机制

Hooks 让你在 Agent 执行关键节点自动运行脚本，实现自动化运维。

7.1 常用 Hook 场景

#mermaid-svg-lVFdb8fBLndD9DE7{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-lVFdb8fBLndD9DE7 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-lVFdb8fBLndD9DE7 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-lVFdb8fBLndD9DE7 .error-icon{fill:#552222;}#mermaid-svg-lVFdb8fBLndD9DE7 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-lVFdb8fBLndD9DE7 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-lVFdb8fBLndD9DE7 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-lVFdb8fBLndD9DE7 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-lVFdb8fBLndD9DE7 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-lVFdb8fBLndD9DE7 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-lVFdb8fBLndD9DE7 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-lVFdb8fBLndD9DE7 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-lVFdb8fBLndD9DE7 .marker.cross{stroke:#333333;}#mermaid-svg-lVFdb8fBLndD9DE7 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-lVFdb8fBLndD9DE7 p{margin:0;}#mermaid-svg-lVFdb8fBLndD9DE7 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-lVFdb8fBLndD9DE7 .cluster-label text{fill:#333;}#mermaid-svg-lVFdb8fBLndD9DE7 .cluster-label span{color:#333;}#mermaid-svg-lVFdb8fBLndD9DE7 .cluster-label span p{background-color:transparent;}#mermaid-svg-lVFdb8fBLndD9DE7 .label text,#mermaid-svg-lVFdb8fBLndD9DE7 span{fill:#333;color:#333;}#mermaid-svg-lVFdb8fBLndD9DE7 .node rect,#mermaid-svg-lVFdb8fBLndD9DE7 .node circle,#mermaid-svg-lVFdb8fBLndD9DE7 .node ellipse,#mermaid-svg-lVFdb8fBLndD9DE7 .node polygon,#mermaid-svg-lVFdb8fBLndD9DE7 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-lVFdb8fBLndD9DE7 .rough-node .label text,#mermaid-svg-lVFdb8fBLndD9DE7 .node .label text,#mermaid-svg-lVFdb8fBLndD9DE7 .image-shape .label,#mermaid-svg-lVFdb8fBLndD9DE7 .icon-shape .label{text-anchor:middle;}#mermaid-svg-lVFdb8fBLndD9DE7 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-lVFdb8fBLndD9DE7 .rough-node .label,#mermaid-svg-lVFdb8fBLndD9DE7 .node .label,#mermaid-svg-lVFdb8fBLndD9DE7 .image-shape .label,#mermaid-svg-lVFdb8fBLndD9DE7 .icon-shape .label{text-align:center;}#mermaid-svg-lVFdb8fBLndD9DE7 .node.clickable{cursor:pointer;}#mermaid-svg-lVFdb8fBLndD9DE7 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-lVFdb8fBLndD9DE7 .arrowheadPath{fill:#333333;}#mermaid-svg-lVFdb8fBLndD9DE7 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-lVFdb8fBLndD9DE7 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-lVFdb8fBLndD9DE7 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-lVFdb8fBLndD9DE7 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-lVFdb8fBLndD9DE7 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-lVFdb8fBLndD9DE7 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-lVFdb8fBLndD9DE7 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-lVFdb8fBLndD9DE7 .cluster text{fill:#333;}#mermaid-svg-lVFdb8fBLndD9DE7 .cluster span{color:#333;}#mermaid-svg-lVFdb8fBLndD9DE7 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-lVFdb8fBLndD9DE7 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-lVFdb8fBLndD9DE7 rect.text{fill:none;stroke-width:0;}#mermaid-svg-lVFdb8fBLndD9DE7 .icon-shape,#mermaid-svg-lVFdb8fBLndD9DE7 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-lVFdb8fBLndD9DE7 .icon-shape p,#mermaid-svg-lVFdb8fBLndD9DE7 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-lVFdb8fBLndD9DE7 .icon-shape .label rect,#mermaid-svg-lVFdb8fBLndD9DE7 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-lVFdb8fBLndD9DE7 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-lVFdb8fBLndD9DE7 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-lVFdb8fBLndD9DE7 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} PreToolUse
PostToolUse
Stop
Agent 执行工具
Hook 触发点
工具执行前
工具执行后
Agent 停止时
拦截危险命令
注入额外参数
自动格式化代码
自动跑测试
生成会话报告
发送通知

7.2 Hooks 配置文件

在 .vscode/settings.json 中：

json 复制代码

{
  "github.copilot.chat.hooks": {
    "PostToolUse": [
      {
        "type": "command",
        "command": "npx prettier --write \"$TOOL_INPUT_FILE_PATH\""
      },
      {
        "type": "command",
        "command": "npm run lint -- \"$TOOL_INPUT_FILE_PATH\""
      }
    ],
    "PreToolUse": [
      {
        "type": "command",
        "command": "echo '$TOOL_INPUT' | grep -q 'rm -rf' && echo 'BLOCKED' || echo 'OK'"
      }
    ],
    "Stop": [
      {
        "type": "command",
        "command": "echo 'Session ended' >> .copilot-sessions.log"
      }
    ]
  }
}

7.3 实战 Hook 模板

自动格式化 + 测试：

json 复制代码

{
  "github.copilot.chat.hooks": {
    "PostToolUse": [
      {
        "type": "command",
        "command": "npx prettier --write \"$TOOL_INPUT_FILE_PATH\" && npm test -- --findRelatedTests \"$TOOL_INPUT_FILE_PATH\""
      }
    ]
  }
}

危险命令拦截：

json 复制代码

{
  "github.copilot.chat.hooks": {
    "PreToolUse": [
      {
        "type": "command",
        "command": "if echo '$TOOL_INPUT' | grep -E 'rm -rf|DROP TABLE|git push --force' > /dev/null; then echo '⚠️ Dangerous command blocked'; exit 1; fi"
      }
    ]
  }
}

八、Custom Instructions 项目规范

将项目编码规范写入 .github/copilot-instructions.md，AI 每次对话都会自动遵守。

8.1 使用 `/init` 自动生成

复制代码

在 Chat 中输入 /init
→ AI 自动扫描项目，生成 copilot-instructions.md

8.2 手动编写示例

markdown 复制代码

# 项目编码规范

## 技术栈
- 前端：React 18 + TypeScript + Vite
- 后端：Node.js + Express
- 数据库：PostgreSQL
- 测试：Jest + Playwright

## 命名规范
- 变量：camelCase
- 组件：PascalCase
- 常量：UPPER_SNAKE_CASE
- 文件：kebab-case

## 代码风格
- 使用 ES6+ 语法
- 优先使用函数式组件 + Hooks
- 避免 any 类型
- 错误处理必须有兜底

## 提交规范
- feat: 新功能
- fix: 修复
- docs: 文档
- refactor: 重构
- test: 测试

## 测试要求
- 单元测试覆盖率 >= 80%
- 新增功能必须附带测试用例
- 关键路径必须 E2E 测试

8.3 多文件 Instructions

支持多个 Markdown 文件按目录组织：

复制代码

.github/
├── copilot-instructions.md      # 全局规范
├── instructions/
│   ├── frontend.md              # 前端规范
│   ├── backend.md               # 后端规范
│   └── testing.md               # 测试规范

九、完整实践案例：AI 塔罗占卜网站

9.1 需求描述

用户输入问题 → 点击"开始占卜" → AI 抽 3 张塔罗牌 → 生成解读。深紫主题 + 金边纹理 + 翻牌动画 + 响应式。

9.2 完整操作流程

浏览器文件系统 Agent 模式 Plan 模式 VSCode 用户浏览器文件系统 Agent 模式 Plan 模式 VSCode 用户 #mermaid-svg-s3k8ficBmSeJYWAw{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-s3k8ficBmSeJYWAw .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-s3k8ficBmSeJYWAw .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-s3k8ficBmSeJYWAw .error-icon{fill:#552222;}#mermaid-svg-s3k8ficBmSeJYWAw .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-s3k8ficBmSeJYWAw .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-s3k8ficBmSeJYWAw .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-s3k8ficBmSeJYWAw .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-s3k8ficBmSeJYWAw .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-s3k8ficBmSeJYWAw .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-s3k8ficBmSeJYWAw .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-s3k8ficBmSeJYWAw .marker{fill:#333333;stroke:#333333;}#mermaid-svg-s3k8ficBmSeJYWAw .marker.cross{stroke:#333333;}#mermaid-svg-s3k8ficBmSeJYWAw svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-s3k8ficBmSeJYWAw p{margin:0;}#mermaid-svg-s3k8ficBmSeJYWAw .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-s3k8ficBmSeJYWAw text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-s3k8ficBmSeJYWAw .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-s3k8ficBmSeJYWAw .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-s3k8ficBmSeJYWAw .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-s3k8ficBmSeJYWAw .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-s3k8ficBmSeJYWAw #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-s3k8ficBmSeJYWAw .sequenceNumber{fill:white;}#mermaid-svg-s3k8ficBmSeJYWAw #sequencenumber{fill:#333;}#mermaid-svg-s3k8ficBmSeJYWAw #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-s3k8ficBmSeJYWAw .messageText{fill:#333;stroke:none;}#mermaid-svg-s3k8ficBmSeJYWAw .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-s3k8ficBmSeJYWAw .labelText,#mermaid-svg-s3k8ficBmSeJYWAw .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-s3k8ficBmSeJYWAw .loopText,#mermaid-svg-s3k8ficBmSeJYWAw .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-s3k8ficBmSeJYWAw .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-s3k8ficBmSeJYWAw .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-s3k8ficBmSeJYWAw .noteText,#mermaid-svg-s3k8ficBmSeJYWAw .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-s3k8ficBmSeJYWAw .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-s3k8ficBmSeJYWAw .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-s3k8ficBmSeJYWAw .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-s3k8ficBmSeJYWAw .actorPopupMenu{position:absolute;}#mermaid-svg-s3k8ficBmSeJYWAw .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-s3k8ficBmSeJYWAw .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-s3k8ficBmSeJYWAw .actor-man circle,#mermaid-svg-s3k8ficBmSeJYWAw line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-s3k8ficBmSeJYWAw :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 打开新文件夹 ai-diviner Chat → Plan 模式 "做塔罗占卜网站，需求：..." 分析需求生成文件清单 + 实施步骤输出方案审核方案确认 / 修改点击 "Start Implementation" 创建 index.html 创建 style.css 创建 script.js 启动本地服务器 ✅ 完成访问 http://localhost:3000 输入 API Key 测试翻牌动画 + AI 解读 🎉 完成

9.3 详细步骤

Step 1：创建项目

bash 复制代码

mkdir ai-diviner
code ai-diviner

Step 2：使用 Plan 模式

打开 Chat → 选择 Plan 模式，输入：

复制代码

帮我用 HTML + CSS + JavaScript 做一个 AI 塔罗牌占卜网站。
功能：用户输入问题，点击"开始占卜"展示3张翻牌动画，
翻牌后调用大模型 API 生成占卜解读。
深紫主题、金色纹理、流畅动画、响应式。

Step 3：确认方案

AI 会输出类似方案：

复制代码

📋 实施计划

1. 文件结构
   ├── index.html      主页面
   ├── style.css       样式
   ├── script.js       交互逻辑
   └── assets/         塔罗牌图片

2. 关键功能
   - 用户输入区（问题文本框 + 占卜按钮）
   - 3 张塔罗牌展示区
   - 翻牌动画（CSS transform + 3D）
   - API 调用层（兼容 OpenAI/Claude 协议）
   - 解读结果展示

3. 主题设计
   - 背景：深紫渐变 #1a0033 → #4a148c
   - 强调：金色 #ffd700
   - 字体：思源宋体 / Cormorant Garamond

4. 响应式断点
   - 桌面：> 1024px
   - 平板：768px - 1024px
   - 手机：< 768px

Step 4：执行

点击 "Start Implementation"，Agent 自动：

创建 4 个文件
调用本地服务器命令（需审批）
实时反馈执行进度

Step 5：迭代优化

不满意时直接在 Chat 中说：

复制代码

把占卜页面改成鱼皮塔罗

Agent 自动定位修改。

9.4 上下文管理技巧

当 AI 上下文满了（开始"断片"）：

复制代码

1. 让 AI 生成 README.md 总结当前进度
2. 开新会话，把 README 喂给新 AI
3. 继续从断点开发

十、多 Agent 协作模式

10.1 四种运行方式

模式	位置	特点	适用场景
Local	本地	交互式、实时反馈	试错、调试
Background	本地后台	异步执行	明确任务，多任务并行
Cloud	云端	远程执行、自动提 PR	团队协作
Third-party	第三方服务	接入 Claude/OpenAI 特定能力	特殊需求

10.2 跨 Agent 任务移交

#mermaid-svg-9ri9eLy1OJ5v2Gfn{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-9ri9eLy1OJ5v2Gfn .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .error-icon{fill:#552222;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .marker.cross{stroke:#333333;}#mermaid-svg-9ri9eLy1OJ5v2Gfn svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9ri9eLy1OJ5v2Gfn p{margin:0;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .cluster-label text{fill:#333;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .cluster-label span{color:#333;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .cluster-label span p{background-color:transparent;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .label text,#mermaid-svg-9ri9eLy1OJ5v2Gfn span{fill:#333;color:#333;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .node rect,#mermaid-svg-9ri9eLy1OJ5v2Gfn .node circle,#mermaid-svg-9ri9eLy1OJ5v2Gfn .node ellipse,#mermaid-svg-9ri9eLy1OJ5v2Gfn .node polygon,#mermaid-svg-9ri9eLy1OJ5v2Gfn .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .rough-node .label text,#mermaid-svg-9ri9eLy1OJ5v2Gfn .node .label text,#mermaid-svg-9ri9eLy1OJ5v2Gfn .image-shape .label,#mermaid-svg-9ri9eLy1OJ5v2Gfn .icon-shape .label{text-anchor:middle;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .rough-node .label,#mermaid-svg-9ri9eLy1OJ5v2Gfn .node .label,#mermaid-svg-9ri9eLy1OJ5v2Gfn .image-shape .label,#mermaid-svg-9ri9eLy1OJ5v2Gfn .icon-shape .label{text-align:center;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .node.clickable{cursor:pointer;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .arrowheadPath{fill:#333333;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-9ri9eLy1OJ5v2Gfn .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-9ri9eLy1OJ5v2Gfn .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-9ri9eLy1OJ5v2Gfn .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .cluster text{fill:#333;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .cluster span{color:#333;}#mermaid-svg-9ri9eLy1OJ5v2Gfn div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-9ri9eLy1OJ5v2Gfn rect.text{fill:none;stroke-width:0;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .icon-shape,#mermaid-svg-9ri9eLy1OJ5v2Gfn .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .icon-shape p,#mermaid-svg-9ri9eLy1OJ5v2Gfn .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .icon-shape .label rect,#mermaid-svg-9ri9eLy1OJ5v2Gfn .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-9ri9eLy1OJ5v2Gfn .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-9ri9eLy1OJ5v2Gfn .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-9ri9eLy1OJ5v2Gfn :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 是
否
Local Agent

制定 Plan
方案确认
Cloud Agent

后台执行
自动提 PR
发送通知给开发者

实战示例：

复制代码

1. 本地 Agent：使用 Plan 模式设计新功能
2. 确认方案后，handoff 给 Cloud Agent
3. Cloud Agent 在云端自动执行：
   - 创建分支
   - 实现代码
   - 跑测试
   - 提 PR
4. 完成后通知开发者

10.3 并行 Agent 协作

GitHub Agent HQ 支持多 Agent 并行（Claude/Codex/Copilot），可同时处理：

Agent A：编写核心逻辑
Agent B：写单元测试
Agent C：更新文档

10.4 Custom Agent 自定义角色

创建 .github/agents/writer.md：

markdown 复制代码

---
name: 技术写作助手
description: 帮助撰写和优化技术文章
tools: ['search', 'codebase', 'editFiles']
---

你是一位经验丰富的技术写作者。
- 段落短，口语化
- 多用类比和示例
- 关键概念加粗
- 代码块必须可运行

在 Chat 中输入 @技术写作助手 即可调用。

十一、踩坑与安全清单

11.1 必避坑

#mermaid-svg-xZoOujmoDKc3Joir{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-xZoOujmoDKc3Joir .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-xZoOujmoDKc3Joir .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-xZoOujmoDKc3Joir .error-icon{fill:#552222;}#mermaid-svg-xZoOujmoDKc3Joir .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-xZoOujmoDKc3Joir .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-xZoOujmoDKc3Joir .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-xZoOujmoDKc3Joir .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-xZoOujmoDKc3Joir .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-xZoOujmoDKc3Joir .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-xZoOujmoDKc3Joir .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-xZoOujmoDKc3Joir .marker{fill:#333333;stroke:#333333;}#mermaid-svg-xZoOujmoDKc3Joir .marker.cross{stroke:#333333;}#mermaid-svg-xZoOujmoDKc3Joir svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-xZoOujmoDKc3Joir p{margin:0;}#mermaid-svg-xZoOujmoDKc3Joir .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-xZoOujmoDKc3Joir .cluster-label text{fill:#333;}#mermaid-svg-xZoOujmoDKc3Joir .cluster-label span{color:#333;}#mermaid-svg-xZoOujmoDKc3Joir .cluster-label span p{background-color:transparent;}#mermaid-svg-xZoOujmoDKc3Joir .label text,#mermaid-svg-xZoOujmoDKc3Joir span{fill:#333;color:#333;}#mermaid-svg-xZoOujmoDKc3Joir .node rect,#mermaid-svg-xZoOujmoDKc3Joir .node circle,#mermaid-svg-xZoOujmoDKc3Joir .node ellipse,#mermaid-svg-xZoOujmoDKc3Joir .node polygon,#mermaid-svg-xZoOujmoDKc3Joir .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xZoOujmoDKc3Joir .rough-node .label text,#mermaid-svg-xZoOujmoDKc3Joir .node .label text,#mermaid-svg-xZoOujmoDKc3Joir .image-shape .label,#mermaid-svg-xZoOujmoDKc3Joir .icon-shape .label{text-anchor:middle;}#mermaid-svg-xZoOujmoDKc3Joir .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-xZoOujmoDKc3Joir .rough-node .label,#mermaid-svg-xZoOujmoDKc3Joir .node .label,#mermaid-svg-xZoOujmoDKc3Joir .image-shape .label,#mermaid-svg-xZoOujmoDKc3Joir .icon-shape .label{text-align:center;}#mermaid-svg-xZoOujmoDKc3Joir .node.clickable{cursor:pointer;}#mermaid-svg-xZoOujmoDKc3Joir .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-xZoOujmoDKc3Joir .arrowheadPath{fill:#333333;}#mermaid-svg-xZoOujmoDKc3Joir .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-xZoOujmoDKc3Joir .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-xZoOujmoDKc3Joir .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-xZoOujmoDKc3Joir .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-xZoOujmoDKc3Joir .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-xZoOujmoDKc3Joir .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-xZoOujmoDKc3Joir .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-xZoOujmoDKc3Joir .cluster text{fill:#333;}#mermaid-svg-xZoOujmoDKc3Joir .cluster span{color:#333;}#mermaid-svg-xZoOujmoDKc3Joir div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-xZoOujmoDKc3Joir .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-xZoOujmoDKc3Joir rect.text{fill:none;stroke-width:0;}#mermaid-svg-xZoOujmoDKc3Joir .icon-shape,#mermaid-svg-xZoOujmoDKc3Joir .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-xZoOujmoDKc3Joir .icon-shape p,#mermaid-svg-xZoOujmoDKc3Joir .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-xZoOujmoDKc3Joir .icon-shape .label rect,#mermaid-svg-xZoOujmoDKc3Joir .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-xZoOujmoDKc3Joir .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-xZoOujmoDKc3Joir .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-xZoOujmoDKc3Joir :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 常见踩坑
API Key 管理
命令审批
上下文管理
Hooks 安全
MCP 来源
Skill 试验
❌ 写进代码库

✅ 环境变量
❌ 一键同意

✅ 逐条确认
❌ 满了不管

✅ 导出文档
❌ 自动 rm -rf

✅ 拦截危险命令
❌ 随便装

✅ 看清权限
❌ 主项目直接用

✅ 隔离项目试验

11.2 安全清单

❌ 错误做法	✅ 正确做法
API Key 写进代码库	使用 `.env` + `.gitignore`
随手同意所有终端命令	留心审批弹窗，逐条确认
上下文满了不处理	频繁将项目关键点导出为文档
Hooks 自动审批危险命令	绝不自动执行 `rm -rf` 等操作
随意安装第三方 MCP	先看清权限和数据流向
直接在主项目用新 Skill	先在隔离项目里试验

11.3 性能优化

bash 复制代码

# 上下文管理
- 长对话分阶段，每完成一个里程碑就 /reset
- 复杂项目用 Custom Instructions 沉淀规范
- 善用 Agent Skills 复用经验

# 工具调用
- 工具集按需启用（#reader 只读，#fullstack 完整）
- Hooks 减少重复操作（自动格式化）
- MCP 减少手动命令

# 模型选择
- 简单任务用轻量模型
- 复杂任务用 Auto 模式自动选
- 长上下文用支持 200k+ 的模型

十二、最佳实践总结

12.1 核心方法论

#mermaid-svg-PIPV4PgcLeD3BWsM{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-PIPV4PgcLeD3BWsM .error-icon{fill:#552222;}#mermaid-svg-PIPV4PgcLeD3BWsM .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-PIPV4PgcLeD3BWsM .marker{fill:#333333;stroke:#333333;}#mermaid-svg-PIPV4PgcLeD3BWsM .marker.cross{stroke:#333333;}#mermaid-svg-PIPV4PgcLeD3BWsM svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-PIPV4PgcLeD3BWsM p{margin:0;}#mermaid-svg-PIPV4PgcLeD3BWsM .edge{stroke-width:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .section--1 rect,#mermaid-svg-PIPV4PgcLeD3BWsM .section--1 path,#mermaid-svg-PIPV4PgcLeD3BWsM .section--1 circle,#mermaid-svg-PIPV4PgcLeD3BWsM .section--1 polygon,#mermaid-svg-PIPV4PgcLeD3BWsM .section--1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .section--1 text{fill:#ffffff;}#mermaid-svg-PIPV4PgcLeD3BWsM .node-icon--1{font-size:40px;color:#ffffff;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-edge--1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-depth--1{stroke-width:17;}#mermaid-svg-PIPV4PgcLeD3BWsM .section--1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled circle,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:lightgray;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:#efefef;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-0 rect,#mermaid-svg-PIPV4PgcLeD3BWsM .section-0 path,#mermaid-svg-PIPV4PgcLeD3BWsM .section-0 circle,#mermaid-svg-PIPV4PgcLeD3BWsM .section-0 polygon,#mermaid-svg-PIPV4PgcLeD3BWsM .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-PIPV4PgcLeD3BWsM .section-0 text{fill:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .node-icon-0{font-size:40px;color:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-depth-0{stroke-width:14;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled circle,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:lightgray;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:#efefef;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-1 rect,#mermaid-svg-PIPV4PgcLeD3BWsM .section-1 path,#mermaid-svg-PIPV4PgcLeD3BWsM .section-1 circle,#mermaid-svg-PIPV4PgcLeD3BWsM .section-1 polygon,#mermaid-svg-PIPV4PgcLeD3BWsM .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .section-1 text{fill:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .node-icon-1{font-size:40px;color:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-depth-1{stroke-width:11;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled circle,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:lightgray;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:#efefef;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-2 rect,#mermaid-svg-PIPV4PgcLeD3BWsM .section-2 path,#mermaid-svg-PIPV4PgcLeD3BWsM .section-2 circle,#mermaid-svg-PIPV4PgcLeD3BWsM .section-2 polygon,#mermaid-svg-PIPV4PgcLeD3BWsM .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .section-2 text{fill:#ffffff;}#mermaid-svg-PIPV4PgcLeD3BWsM .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-depth-2{stroke-width:8;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled circle,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:lightgray;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:#efefef;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-3 rect,#mermaid-svg-PIPV4PgcLeD3BWsM .section-3 path,#mermaid-svg-PIPV4PgcLeD3BWsM .section-3 circle,#mermaid-svg-PIPV4PgcLeD3BWsM .section-3 polygon,#mermaid-svg-PIPV4PgcLeD3BWsM .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .section-3 text{fill:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .node-icon-3{font-size:40px;color:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-depth-3{stroke-width:5;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled circle,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:lightgray;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:#efefef;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-4 rect,#mermaid-svg-PIPV4PgcLeD3BWsM .section-4 path,#mermaid-svg-PIPV4PgcLeD3BWsM .section-4 circle,#mermaid-svg-PIPV4PgcLeD3BWsM .section-4 polygon,#mermaid-svg-PIPV4PgcLeD3BWsM .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .section-4 text{fill:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .node-icon-4{font-size:40px;color:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-depth-4{stroke-width:2;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled circle,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:lightgray;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:#efefef;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-5 rect,#mermaid-svg-PIPV4PgcLeD3BWsM .section-5 path,#mermaid-svg-PIPV4PgcLeD3BWsM .section-5 circle,#mermaid-svg-PIPV4PgcLeD3BWsM .section-5 polygon,#mermaid-svg-PIPV4PgcLeD3BWsM .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .section-5 text{fill:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .node-icon-5{font-size:40px;color:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-depth-5{stroke-width:-1;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled circle,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:lightgray;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:#efefef;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-6 rect,#mermaid-svg-PIPV4PgcLeD3BWsM .section-6 path,#mermaid-svg-PIPV4PgcLeD3BWsM .section-6 circle,#mermaid-svg-PIPV4PgcLeD3BWsM .section-6 polygon,#mermaid-svg-PIPV4PgcLeD3BWsM .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .section-6 text{fill:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .node-icon-6{font-size:40px;color:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-depth-6{stroke-width:-4;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled circle,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:lightgray;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:#efefef;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-7 rect,#mermaid-svg-PIPV4PgcLeD3BWsM .section-7 path,#mermaid-svg-PIPV4PgcLeD3BWsM .section-7 circle,#mermaid-svg-PIPV4PgcLeD3BWsM .section-7 polygon,#mermaid-svg-PIPV4PgcLeD3BWsM .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .section-7 text{fill:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .node-icon-7{font-size:40px;color:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-depth-7{stroke-width:-7;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled circle,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:lightgray;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:#efefef;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-8 rect,#mermaid-svg-PIPV4PgcLeD3BWsM .section-8 path,#mermaid-svg-PIPV4PgcLeD3BWsM .section-8 circle,#mermaid-svg-PIPV4PgcLeD3BWsM .section-8 polygon,#mermaid-svg-PIPV4PgcLeD3BWsM .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .section-8 text{fill:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .node-icon-8{font-size:40px;color:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-depth-8{stroke-width:-10;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled circle,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:lightgray;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:#efefef;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-9 rect,#mermaid-svg-PIPV4PgcLeD3BWsM .section-9 path,#mermaid-svg-PIPV4PgcLeD3BWsM .section-9 circle,#mermaid-svg-PIPV4PgcLeD3BWsM .section-9 polygon,#mermaid-svg-PIPV4PgcLeD3BWsM .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .section-9 text{fill:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .node-icon-9{font-size:40px;color:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-depth-9{stroke-width:-13;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled circle,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:lightgray;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:#efefef;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-10 rect,#mermaid-svg-PIPV4PgcLeD3BWsM .section-10 path,#mermaid-svg-PIPV4PgcLeD3BWsM .section-10 circle,#mermaid-svg-PIPV4PgcLeD3BWsM .section-10 polygon,#mermaid-svg-PIPV4PgcLeD3BWsM .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .section-10 text{fill:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .node-icon-10{font-size:40px;color:black;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .edge-depth-10{stroke-width:-16;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled circle,#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:lightgray;}#mermaid-svg-PIPV4PgcLeD3BWsM .disabled text{fill:#efefef;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-root rect,#mermaid-svg-PIPV4PgcLeD3BWsM .section-root path,#mermaid-svg-PIPV4PgcLeD3BWsM .section-root circle,#mermaid-svg-PIPV4PgcLeD3BWsM .section-root polygon{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-PIPV4PgcLeD3BWsM .section-root text{fill:#ffffff;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-root span{color:#ffffff;}#mermaid-svg-PIPV4PgcLeD3BWsM .section-2 span{color:#ffffff;}#mermaid-svg-PIPV4PgcLeD3BWsM .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-svg-PIPV4PgcLeD3BWsM .edge{fill:none;}#mermaid-svg-PIPV4PgcLeD3BWsM .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#mermaid-svg-PIPV4PgcLeD3BWsM :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} AI Copilot

最佳实践
设计阶段
Plan 模式出方案
反复确认再执行
拆解大任务为小步骤
执行阶段
Agent 自主执行
监督而非放任
Hooks 自动化收尾
沉淀阶段
Instructions 沉淀规范
Skills 复用经验
README 防止失忆
安全阶段
最小权限
危险命令拦截
关键操作人工确认

12.2 推荐工作流

复制代码

1. 复杂需求 → Plan 模式设计
2. 方案确认 → 切换 Agent 执行
3. 过程中监督 + 必要时调整
4. 完成 → 写 README 总结 + 提交代码
5. 沉淀 → 把规范写入 .github/copilot-instructions.md
6. 复用 → 把重复流程抽成 Skill

12.3 入门推荐路径

复制代码

第1天：安装 + 基础补全 + Chat
   ↓
第2-3天：熟练 @workspace、@github、# 指令
   ↓
第4-5天：尝试 Plan 模式做小功能
   ↓
第6-7天：体验 Agent 模式端到端开发
   ↓
第2周：配置 MCP + Hooks + Instructions
   ↓
第3周+：尝试 Custom Agent + 跨 Agent 协作

12.4 关键原则

Plan 是验收门：复杂任务先出方案，确认后再执行
Agent 是执行手段：监督而非完全放手
文档防失忆：定期沉淀，防止上下文爆掉
Instructions 统一规范：所有对话自动遵守
工具集按需开启：避免 AI 权限过大
安全永远第一：危险命令必须人工确认

🎯 从需求到可运行页面，通常只需几分钟。你只需要负责监督和创意。

📌 参考资料

GitHub Copilot 官方文档

VSCode Agent Mode 介绍

MCP 协议规范

GitHub Agent HQ 介绍

CSDN Copilot 实战教程

🔖 版权声明：本文遵循 CC 4.0 BY-SA 协议，转载请附原文链接。

标签：GitHubCopilot AI编程 VSCode Agent模式 MCP*

【大模型专题】AI Copilot 完整实践指南：VSCode + GitHub Copilot Agent 模式全攻略

AI Copilot 完整实践指南：VSCode + GitHub Copilot Agent 模式全攻略

一、什么是 AI Copilot？

核心能力跃迁

价值对比

二、整体架构解析

2.1 系统总览

2.2 Agent 模式运行时序

2.3 Plan 模式 vs Agent 模式

三、环境准备与安装

3.1 安装 VSCode

3.2 安装 GitHub Copilot 扩展

3.3 订阅方案选择

3.4 验证安装

四、核心功能全景

4.1 代码补全（NES）

4.2 行内对话（Ctrl+I / Cmd+I）

4.3 Chat 三种模式

4.4 上下文指令速查

@ 指令

# 指令

+ 手动添加

五、Agent 模式深度实战

5.1 工具权限配置

5.2 工具集（Tool Sets）配置

5.3 Agent 实战：修复 Bug 流程

六、MCP 工具扩展

6.1 什么是 MCP

6.2 配置 MCP 服务

6.3 MCP 三大能力

6.4 常用 MCP 服务推荐

七、Hooks 自动触发机制

7.1 常用 Hook 场景

7.2 Hooks 配置文件

7.3 实战 Hook 模板

八、Custom Instructions 项目规范

8.1 使用 /init 自动生成

8.2 手动编写示例

8.3 多文件 Instructions

九、完整实践案例：AI 塔罗占卜网站

9.1 需求描述

9.2 完整操作流程

9.3 详细步骤

9.4 上下文管理技巧

十、多 Agent 协作模式

10.1 四种运行方式

10.2 跨 Agent 任务移交

10.3 并行 Agent 协作

10.4 Custom Agent 自定义角色

十一、踩坑与安全清单

11.1 必避坑

11.2 安全清单

11.3 性能优化

十二、最佳实践总结

12.1 核心方法论

12.2 推荐工作流

12.3 入门推荐路径

12.4 关键原则

`@` 指令

`#` 指令

`+` 手动添加

8.1 使用 `/init` 自动生成