导语

想把 AI 真正用到开发里？别只停留在代码补全。今天教你把 VSCode 装成一台会写代码的助手。🔧

跟着本文，你能做到：

在本地 VSCode 里安装并配置 Copilot。
用 Chat（Plan / Agent / Ask）做需求拆解和自动编码。
通过 MCP、Skills、Hooks 扩展 AI 的真实能力。
用一个示例（AI 塔罗占卜网站）走通从需求到运行的全流程。

短句直说。跟朋友聊一样。把电脑打开，我们开始动手。

1 安装与第一步配置（3 分钟） ⚙️

到 VSCode 官网下载并安装。傻瓜式。无难度。
打开 VSCode 左侧扩展面板，搜索 "GitHub Copilot"，安装官方插件。
安装后，点底部 Copilot 图标登录 GitHub。
- 没订阅的话会进 Copilot Free，免费额度够你试手感。
- 要完整体验就试 Pro（新用户通常有 30 天试用）。学生可用 GitHub Education 申请长期免费。🎓

小提示：想中文界面可以装汉化插件，但不影响 Copilot 本体功能。

2 快速上手：聊天、行内、补全（马上能用）

打开顶部「聊天」按钮，就能和 AI 对话。需求拆解、写代码、修 Bug 都行。
三种内置模式：Agent（自主执行）、Plan（先出方案）、Ask（单纯问答）。
- Agent：AI 会创建文件、跑命令、写代码，自动化很强。
- Plan：先列清单，适合复杂任务。
- Ask：纯答疑，适合学习。

快捷键合集：

行内对话：Ctrl+I（Mac: Cmd+I）
快速聊天弹窗：Ctrl+Shift+Alt+L（Mac: Cmd+Shift+Option+L）

代码补全：看见浅色建议按 Tab 接受。Copilot 还有 Next Edit Suggestions（NES），会预测你下一步要改哪儿，按 Tab 采纳。体验丝滑。

3 真刀真枪：用 Plan + Agent 做个 AI 塔罗占卜网站（实战） 🚀

场景：你想一个页面，用户输入问题，点击按钮后 AI 抽 3 张塔罗牌并生成解读。界面要暗紫＋金边，有翻牌动画，手机也能看。

步骤很直观：

在本地建个空文件夹（例如 ai-diviner），在 VSCode 打开。
在 Chat 面板选择 Plan 模式，然后把需求贴进对话：

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

跟 AI 互动，确认它的方案（需要哪些文件、依赖、API Key 放哪儿等）。Plan 会输出文件列表与实现步骤。
方案 OK 后，点 "Start Implementation"（或类似按钮）把任务交给 Agent。
- Agent 会按步骤创建 index.html、style.css、script.js。必要时会弹出终端命令审批。
- 你可以观察 Agent 的 Todos 列表或随时中断、修改方向。
Agent 可能会启动一个本地服务器并输出地址。把地址复制到浏览器，输入 API Key（不要把 key 写在代码里），测试功能。

小技巧：

如果对某处不满意，直接对话框写 "把占卜页面改成鱼皮塔罗"，Agent 会定位并修改对应代码。
上下文满了（AI 断片儿）时，让 AI 把当前项目沉淀成文档（生成 README 或 Summary），以后把这个文档交给 AI 即可恢复记忆。

体验感：从需求到可运行页面，通常几分钟。你只要监督就行。

4 核心功能拆解（你真正会频繁用到的）

Tools（工具箱）

AI 能干活靠工具。常见工具：代码搜索、读写文件、跑终端、抓网页。

可视化开关工具，方便按需开启。
在对话里用 #codebase、#fetch 等手动引用工具。
支持工具集（Tool Sets），一次启用一组工具。

示例工具集配置：

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

在对话里输入 #reader 就会启用这组只读工具。

MCP（连接外部能力）

MCP 是标准接口。通过 MCP，AI 能调用 API、读数据库、控制浏览器。

VSCode 扩展市场里能直接安装 MCP 服务，体验比手动贴 JSON 舒服多。
安装后，AI 在需要时会调用 MCP 提供的工具。你也能手动用 # 引用。

如果想手动配置，可以创建 .vscode/mcp.json：

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

MCP 还能提供 Resources（上下文数据）和 MCP Apps（对话中渲染表单、仪表盘）。

Agent Skills（技能包）

Skills 是 AI 的工作手册。把标准流程、示例代码、最佳实践写进 Skill。AI 需要时才加载。省 Token，又专业。

示例 SKILL.md：

---
name: webapp-testing
description: 使用 Playwright 测试 Web 应用的指南
---

# Web 应用测试指南

1. 使用测试模板
2. 在 tests/ 下新增测试文件
3. 运行：npx playwright test

安装社区作者的 Skills 能快速提升 AI 在特定任务的输出质量。

多种 Agent 运行方式

Local（本地）: 交互式，适合试错、实时反馈。
Background（后台）: 在本地后台跑，适合明确任务想同时干别事的时候。
Cloud（云端）: 在远程跑并自动提 PR，适合团队协作。
Third-party（第三方）: 用 Anthropic Claude、OpenAI 等特定厂商能力。

你可以在不同 Agent 之间移交任务：比如在本地做 Plan，再把执行交给 Cloud Agent 去跑并提 PR。

Hooks（自动触发脚本）

Hooks 在 Agent 执行关键节点跑脚本。常见用途：自动格式化、拦截危险命令、生成会话报告。

示例：每次工具修改文件后自动运行 Prettier。

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

Custom Instructions（定制规范）

把编码规范、偏好写进 .github/copilot-instructions.md，AI 每次对话都会遵守。支持按文件模式生效。

示例片段：

# 项目编码规范
- 使用 ES6+ 语法
- 变量使用 camelCase
- 前端优先 React + TypeScript

还有个命令 /init：让 AI 自动生成一份针对当前仓库的指令，省很多时间。

Custom Agents（自定义智能体）

把角色写成智能体。比如写作助手、架构师、测试工程师。每个角色有自己的工具权限和行为规则。

示例 .agent.md：

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

# 写作助手
你是一位经验丰富的技术写作者，段落短，口语化。

自定义智能体还能设 Handoffs，做任务移交（Plan -> Implementation）时一键切换。

Prompt Files（复用提示词模板）

常用任务写成斜杠命令，随时触发。示例 /gen-test：

---
description: 为当前文件生成单元测试
agent: agent
tools: ['search','edit/editFiles']
---
为 [${fileBasename}](${file}) 生成单元测试。

触发 /gen-test，AI 会帮你生成测试模板并放到合适目录。

Smart Actions（右键 AI 操作）

右键就能用的便捷动作：生成 Commit message、解释代码、生成测试、修复错误、代码审查、语义搜索等。平时最常用的是自动生成 Commit message，省心。

5 实操示例与常用命令（摘录）

打开行内对话：Ctrl+I
快速 Chat 弹窗：Ctrl+Shift+Alt+L
在对话里使用工具集：输入 #reader
新建 MCP 配置：.vscode/mcp.json
新增 Skill：在项目或用户目录下放 SKILL.md
定制指令：.github/copilot-instructions.md

示例：给函数命名为 plusDate，让 Copilot 补全

function plusDate(dateStr, days) {
  // 输入函数名，Copilot 会补全函数体
}

按 Tab 接受自动补全。看到 NES 小箭头时也按 Tab 跳到下一步建议。

6 避坑清单（必须看）⚠️

别把 API Key、私密配置写进代码库。用环境变量或本地配置。
Agent 要跑终端命令时留心审批弹窗。别随手同意所有命令。
上下文满了 AI 会失忆。频繁把项目关键点导成文档沉淀。
Hooks 很方便，但别把危险命令自动审批放开（比如自动执行 rm -rf）。
安装第三方 MCP 前看清权限和数据流向。别把敏感数据暴露给不可信服务。
Skill、Prompt 的质量参差不齐。先在隔离项目里试验再放到主项目。

7 小结与行动建议（两句话）

VSCode + Copilot 能把重复工作交给 AI，剩下的就是审核和创意。把 Plan 当验收门，把 Agent 当执行手段，别全部交给 AI。

想试起点低且见效快的玩法？先用 Plan 设计一个小功能，再把实现交给 Agent 跑一次，看着它写完代码、跑服务器，那种感觉很上瘾。😄

如果你想，我可以把实战中用到的 Prompt、Skill、Hooks 配置打包成一个可直接导入的仓库，省你配置时间。想要就回复“要导入包”。

写到这儿，我先去吃饭。觉得有用就收藏，或者在评论区告诉我你常用的 AI 工具，互相安利。

VSCode + GitHub Copilot 保姆级实战教程：从安装到 Agent 上线，一个人也能搞定

导语