企业官网建设流程全解析

• 文档
• 教程
• 知识库
• 人工智能

本指南以《ai-guide》开源教程中的 VSCode + GitHub Copilot：微软全家桶的 AI 编程实战 为主体，结合仓库内 AI 塔罗牌占卜网站项目实战、AI 热点监控工具项目实战、Agent Skills：通用 AI 技能库 等文档，系统讲解 GitHub Copilot 在 VSCode 中的完整使用链路。

如果你已经习惯使用 VSCode，又想在 AI 编程时代无缝升级，GitHub Copilot 是门槛最低的选择：无需更换编辑器、无需迁移配置，装一个插件即可获得代码补全、AI 对话、Agent 自主开发、MCP 生态接入、技能包与自定义智能体编排等一整套能力。读完本文，你将能够从零完成安装配置，并用 Plan + Agent 模式在几分钟内从自然语言需求做出一个可运行的完整网站，同时掌握 Tools、MCP、Skills、Hooks、Custom Instructions、Custom Agents、Prompt Files 等核心特性的原理与配置方法。

一、为什么选择 VSCode + GitHub Copilot

VSCode 是微软出品的全球流行的代码编辑器，GitHub Copilot 则是 GitHub 官方出品的 AI 编程助手插件，直接安装在 VSCode 中使用。在 AI 编程工具百花齐放的当下（Cursor、Claude Code、OpenCode 等层出不穷），Copilot 的核心竞争力在于"全面"：

1. 支持最新 AI 大模型：Opus、GPT、Gemini、Claude 等模型可随意切换，实测编程质量高，可支撑全栈项目开发；
2. 多种运行模式：支持本地、后台 CLI、云端、Claude Code 等运行方式，兼容性强；
3. 可视化管理：MCP、Skills、工具调用均支持可视化配置，无需手动编写配置文件；
4. 清晰的 Agent 执行体验：支持子智能体，AI 的每一步交互都清晰可见。

正如仓库中 AI IDE 插件 一文所评价的，GitHub Copilot 是"最成熟的 AI 编程助手之一"，除代码补全和 Chat 对话外，已支持 Agent 模式、Plan 模式、MCP 服务管理、Agent Skills 技能包、自定义智能体、Hooks 自动化脚本等核心特性，"体验上堪称六边形战士"。

二、安装与配置

1. 安装 VSCode

进入 VSCode 官网下载安装包，傻瓜式安装即可。安装完成后打开 VSCode。

2. 安装 GitHub Copilot 插件

点击 VSCode 左侧「扩展市场」图标，搜索GitHub Copilot，安装官方 AI 编程插件。如果你更习惯中文界面，可同时安装 Chinese 汉化插件。

3. 登录 GitHub 账号

安装完成后，点击 VSCode 底部状态栏的 Copilot 图标，按提示登录 GitHub 账号即可完成激活。

4. 订阅方案选择

登录后如果没有 Copilot 订阅，会自动进入Copilot Free 免费计划，每月提供一定的 AI 对话和代码补全额度，零门槛上手。想体验完整功能可开通 Copilot Pro，新用户支持免费试用 30 天；在校学生还可通过 GitHub Education 申请学生认证，认证通过后 Copilot Pro 可免费使用。

整个安装配置过程比折腾 Claude Code（网络受限 + 账号受限 + 命令行界面）简单得多。安装完成后，你可以在 VSCode 中通过Ctrl+I打开行内对话、通过Ctrl+Shift+Alt+L（Mac 为Cmd+Shift+Option+L）打开 Quick Chat，快速验证插件是否工作正常。

三、基本使用

AI 对话

点击 VSCode 上方的「聊天按钮」打开 Chat 对话面板，即可与 AI 对话，让它分析需求、写代码、改 Bug。对话区域有一个智能体选择器，可在 3 种内置模式间切换：

• Agent 全自主模式：AI 自己分析、写代码、跑命令，一条龙完成任务（最常用）；
• Plan 规划模式：AI 先出方案再动手，适合复杂任务；
• Ask 纯问答模式：只回答问题、不改代码，适合探索和学习。

除了 Chat 面板，还有两种更轻量的对话方式：

• Ctrl+I（Mac 为Cmd+I）打开行内对话，直接在代码中与 AI 交互；
• Ctrl+Shift+Alt+L（Mac 为Cmd+Shift+Option+L）打开Quick Chat弹窗，适合快问快答。

AI 代码补全

写代码时，Copilot 会自动给出浅色补全建议，按Tab接受。例如你写了一个计算日期的函数名plusDate，它能直接帮你把整个函数体补全出来。

更智能的是Next Edit Suggestions（NES，下一步编辑建议）：它不仅能补全当前位置的代码，还能预测你接下来要改哪里。编辑器左侧会出现一个小箭头，按Tab即可跳过去并应用建议。比如你把一个类名从Point改成Point3D，它会自动建议你在下面加一个z变量——这种跨位置的编辑预测能力，是 Copilot 相比同类工具更"丝滑"的地方。

四、AI Agent 编程实战

前面的对话和代码补全只是开胃菜，Agent 模式才是 GitHub Copilot 的核心能力。所谓 Agent，就是你给它一个需求，它会自己分析项目、制定计划、创建文件、写代码、跑命令、装依赖，遇到报错还会自动修复，全程自主执行。这与 Manus、OpenClaw 以及各家 AI 编程工具中的 Agent 本质相同，都是"AI 自主规划、调用工具、执行任务"的能力。

各家工具都在卷 Agent 能力：Cursor 的子 Agent 可操作浏览器自主验证，Claude Code 的 Agent Teams 支持多 AI 组队协作。GitHub Copilot 除 Agent 模式外，也提供了Plan 模式——先让 AI 出方案、拆步骤，确认没问题后再动手，能有效减少复杂项目中 AI 一上来就乱写导致翻车的情况。

下面以仓库 AI 塔罗牌占卜网站项目实战 中的项目为例，实战 Plan + Agent 工作流。

第一步：用 Plan 制定方案

新建空项目文件夹（如ai-diviner），在 VSCode 中打开，在对话区域的智能体选择器中选择Plan 模式并选择大模型（如 Claude Opus），然后输入需求：

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

选择 Plan 模式后，AI不会直接写代码，而是先研究需求、通过交互式提问消除歧义。例如它会询问 AI 解读是"调用 AI 大模型接口"还是"从预设文案库随机生成"。你可以像聊天一样告诉它自己的想法（比如希望调用 DeepSeek 大模型的 API），也可以让它分析不同方案的优缺点或自主决定。

AI 理解需求后，会给出结构化实施方案，列出要创建哪些文件、每个文件负责什么、实现步骤先后顺序、如何验证效果。你可以在此阶段与 AI 反复讨论、调整方案。

Plan 模式的本质是4 阶段的迭代工作流：需求研究 → 问题对齐 → 方案设计 → 迭代细化。AI 先用只读工具深入研究代码库，再通过交互式问答消除歧义，最后给出方案草稿。这其实就是软件开发的标准步骤。即使不用内置 Plan 模式，你也可以通过提示词引导 AI 先设计方案、人工确认后再开发，养成"先想清楚再动手"的习惯。关于如何写好这类需求描述，仓库 Vibe Coding 对话工程技巧 中的"从大到小、逐步细化""具体而非抽象"等技巧值得参考。

第二步：用 Agent 执行方案

确认方案后，点击方案下方的Start Implementation按钮，AI 开始自动执行。执行过程中，Agent 会自动管理一个Todos 任务列表跟踪进度，你可以清楚看到它在创建index.html、style.css、script.js等文件、往里面写代码，甚至自动打开终端执行命令。

如果 AI 要跑终端命令或调用某些工具，会弹出确认框让你审批，安全性有保障。你也可以在 Agent 工作时继续发消息，选择排队等待、立即打断或引导 AI 调整方向。建议刚开始 AI 编程的朋友多观察 AI 的工作，发现不对劲时及时人工插手，可以节约 Tokens 并避免返工。

第三步：查看效果与迭代修改

几分钟后，Agent 不仅完成了开发，还会用 Python 启动 Web 服务器直接运行网站。复制网址到 Chrome 浏览器打开，输入从 DeepSeek 开放平台获取的 API Key，输入问题（如"我最近爱情运势如何"）点击「开始占卜」，即可看到三张塔罗牌依次翻开、下方出现 AI 生成的占卜解读——深紫色星空背景配金色边框，加上流畅翻牌动画，效果相当完整。

如果你对页面细节不满意，可以在内置浏览器中点击「元素选择」按钮，哪里不爽点哪里，然后在 Chat 框编写提示词（比如"改为鱼皮塔罗"），Agent 会自动定位对应代码并精准修改。

整个过程中要特别注意上下文的用量：如果上下文满了，AI 可能会"断片儿失忆"、开始乱改。在上下文快满时，最好让 AI 把当前项目信息沉淀为文档，之后每次打开新的对话框时把历史文档交给 AI，就能快速找回记忆。这正是仓库 Vibe Coding 上下文管理技巧 强调的"上下文就是 AI 的工作记忆"。

该项目虽然小巧，却完整展示了 Vibe Coding 的核心工作流——用自然语言描述需求，AI 设计方案和编写代码，人工审核和调整细节。掌握这个流程后，你可以用同样方式做更复杂的项目，例如仓库中基于 Express 5 + React 19 + OpenRouter + Socket.io 的 AI 热点监控工具项目实战，该企业级项目 99% 以上的代码由 AI 编写，主要使用 VSCode + GitHub Copilot，并搭配了 Firecrawl MCP（网页抓取）、Context7 MCP（获取最新技术文档）与 UI UX Pro Max 这个 Agent Skills。

五、核心特性详解

1. Tools：给 AI 的工具箱

Agent 之所以能自主干活，靠的是工具调用（Tool Use）。工具就是 AI 执行任务时可调用的能力，如搜索代码、读写文件、跑终端命令、抓取网页内容等。VSCode 给 AI 提供三种类型的工具：

• 内置工具：开箱即用，包括代码搜索、文件读写、终端执行、问题诊断等常用能力；
• MCP 工具：通过 MCP 协议接入的外部工具；
• 扩展工具：VSCode 插件提供的工具，装了对应插件自动可用。

所有工具都可通过 Chat 对话区域的「配置工具」按钮可视化开关，无需编写任何配置文件。开启后，多数情况下 AI 会自动判断该调用哪些工具；你也可以在对话中用#号手动引用，例如#codebase搜索整个代码库、#fetch codefather.cn抓取网页内容、#problems查看当前项目的所有报错。

Agent 执行终端命令时有一套安全审批机制：默认弹出确认框等待人工确认，也可配置自动审批规则，甚至开启终端沙箱（支持 macOS 和 Linux）限制文件和网络访问。

Tool Sets（工具集）可以把多个相关工具打包成一组，在对话中用#工具集名称一次性引用。例如创建一个名为reader的只读工具集用于代码审查：先在对话面板设置中打开「工具集」，点击创建新的工具集文件并输入名称，VSCode 会自动弹出配置文件，填入以下代码保存即可：

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

配置好后，在对话中输入#reader即可一次性启用这组只读工具。

2. MCP：让 AI 连接外部能力

MCP（Model Context Protocol）是一种开放标准协议，作用是让 AI 连接外部工具和服务——可以理解为给 AI 装了一个"万能接口"，通过它 AI 就能操作数据库、调用 API、控制浏览器等。仓库 MCP 服务开发 一文对其架构有详细说明：MCP 采用"客户端-服务器"架构，客户端主机（如 IDE、AI 工具）可连接多个服务器，使用分为 STDIO（本地运行）和 SSE（远程服务）两种模式。

GitHub Copilot 在管理 MCP 上的体验很有亮点：微软把 MCP 直接集成到了 VSCode 的扩展市场。你只需要打开扩展市场、开启 MCP 服务市场，就能看到一堆热门的 MCP 服务，点击安装即可。例如安装获取最新技术文档的 Context7 MCP 时，会自动弹窗让你输入 API Key；确认后，AI 在执行任务时会自动调用 MCP 提供的工具，写代码时自动拉取最新技术文档作为参考，减少 AI 瞎编 API 用法的情况。

整个过程不需要手写 JSON 配置，全程可视化选择和安装，对新手非常友好。当然，老手也可以通过.vscode/mcp.json文件手动配置 MCP 服务：

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

这个文件不会自动生成，需要自己创建，或通过 VSCode 命令面板执行MCP: Open Workspace Folder Configuration命令打开。此外：

• MCP 服务除提供工具外，还支持Resources（资源，可给 AI 提供数据库表、API 响应等上下文）和MCP Apps（交互式应用，可在对话中渲染表单、仪表盘等交互式 UI 组件）；
• VSCode 能自动发现其他应用中已配置的 MCP 服务，在 VSCode 聊天设置中搜索chat.mcp.discovery.enabled即可开启；
• MCP 配置支持通过Settings Sync跨设备同步，在同步设置中勾选「MCP 服务器」选项，换电脑不用重新配置。

3. Agent Skills：给 AI 的技能包

Agent Skills 是给 AI 准备的能力扩展包。与 Tools 不同，Skills 更像一份详细的工作手册，包含操作指南、脚本、示例代码等资源，让 AI 在特定任务上表现更专业。比如给 AI 装一个"Web 应用测试"的 Skill，里面写好用 Playwright 写测试的标准流程、示例模板和最佳实践，之后让 AI 写测试就会自动按这套标准执行。

Skills 是一个开放标准，不仅在 GitHub Copilot 里能用，Claude Code、Cursor 等工具中也能用，一套 Skill 多处复用。仓库 Agent Skills：通用 AI 技能库 详细讲解了其内部原理：技能本质上是一个包含SKILL.md技能说明文件的文件夹（还可包含 scripts 脚本、references 参考文档、assets 资源），SKILL.md以 YAML 头部的name和description作为元数据——描述写得越清晰，AI 越容易在合适的时机自动调用它。其核心机制是渐进式披露（Progressive Disclosure）：AI 先只扫描每个技能的元数据（名字和描述），发现与任务相关时才加载完整技能说明和资源，做到"用到哪个查哪个"，既精准匹配又节省上下文——装了几十个 Skill 也不用担心上下文爆炸。

在 VSCode 中，你可以通过对话框的 Skills 设置按钮查看和管理本地已有的 Skills，也可以自己创建：通过可视化界面选择安装位置（当前项目下仅本项目可用，或用户目录下所有项目可用）。创建技能的核心是编写SKILL.md，例如创建一个「Web 应用测试」技能：

--- name: webapp-testing description: 使用 Playwright 测试 Web 应用的指南，当需要创建或运行浏览器测试时使用 --- # Web 应用测试指南 ## 创建测试 1. 参考 测试模板 2. 确定要测试的用户流程 3. 在 tests/ 目录创建新的测试文件 4. 使用 Playwright 的定位器来查找元素 ## 运行测试 运行命令：npx playwright test ## 最佳实践 - 为动态内容使用>{ "hooks": { "PostToolUse": [ { "type": "command", "command": "npx prettier --write \"$TOOL_INPUT_FILE_PATH\"" } ] } }

Hooks 的应用场景很多：自动格式化代码、拦截危险命令（如rm -rf和DROP TABLE，防止删库跑路）、记录每次工具调用便于排查问题。而且 Hooks 的配置格式与 Claude Code 兼容，如果你之前配过 Claude Code 的 Hooks，可以直接复用。

6. Custom Instructions：让 AI 遵循你的规范

自定义指令就是给 AI 定规矩：把编码规范、技术偏好、项目约定写到一个 Markdown 文件里，AI 每次对话时都会自动遵循，不用每次都重复说"用 TypeScript 写""变量名不要用 a b c"。

这个概念与 AGENTS.md 类似，区别在于 Copilot 的指令文件路径是.github/copilot-instructions.md，且支持更细粒度的文件模式匹配（类似 Cursor 的 Rules）。创建方式有两种：在对话区域的设置中打开「聊天指令」选择创建位置，或手动在项目根目录新建.github/copilot-instructions.md文件：

# 项目编码规范 ## 代码风格 - 使用语义化 HTML5 元素 - 优先使用 ES6+ 语法（const/let、箭头函数、模板字符串） - 变量命名使用 camelCase，组件命名使用 PascalCase ## 技术偏好 - 前端框架优先用 React + TypeScript - CSS 使用 Tailwind CSS - 测试使用 Vitest ## 代码质量 - 函数和变量名要有意义，能自解释 - 复杂逻辑要加注释 - 用户输入和 API 调用要加错误处理

VSCode 支持两种指令类型：

• 全局生效（Always-on）：所有对话自动应用；
• 基于文件模式匹配（File-based）：例如.tsx文件用 React 组件规范、.test.ts文件用测试规范，只有匹配到对应文件时才生效。带 YAML 头部的结构是其标准写法，通过description字段描述何时生效、applyTo字段指定匹配的文件模式。

还有个实用技巧：在对话区域输入/init，AI 会自动分析项目结构和代码风格，帮你生成一份自定义指令文件——特别适合接手老项目或在已有项目上扩展功能的场景。

7. Custom Agents：给 AI 分配角色

自定义智能体就是给 AI 分配不同角色（安全审查员、测试工程师、架构师等），每个角色有自己的指令、工具权限和行为规则。与 Custom Instructions 的区别在于：Instructions 是全局规则，无论聊什么都会遵循；Custom Agents 是角色切换，选中某角色后 AI 只按该角色设定工作，能用哪些工具、不能做哪些操作都由角色定义。

创建方式有两种：在对话区域设置中打开「自定义智能体」选择创建位置（当前项目或用户目录），或手动写一个.agent.md文件放在.github/agents/目录下。比如创建一个写作助手article.agent.md：

--- name: 写作助手 description: 帮助撰写和优化技术文章、项目文档 tools: ['search', 'codebase', 'fetch', 'editFiles'] --- # 写作助手 你是一位经验丰富的技术写作者，擅长把复杂的技术概念讲得通俗易懂。 ## 写作风格 - 用口语化的表达，像跟朋友聊天一样 - 段落要短，避免大段文字堆砌 - 适当加入类比和例子帮助理解 ## 重要规则 - 先列大纲，确认后再写正文 - 每段都要有明确的主题 - 技术术语第一次出现时要解释

保存后，在对话区域的智能体下拉菜单中就能看到这个角色，选中后 AI 就按你定义的角色工作。

自定义智能体还有一个强大玩法叫Handoffs（移交）：在 Agent 文件中定义「下一步动作」按钮，实现智能体之间的任务接力。比如 Plan 智能体出完方案后，底部出现「开始实现」按钮，点一下自动切换到 Agent 模式开始编码，并把方案上下文完整传递过去：

handoffs: - label: 开始实现 # 按钮上显示的文字 agent: agent # 移交给哪个智能体 prompt: 按照上面的方案开始编码 # 自动填入的提示词 send: false # false 表示不自动发送，等你确认后再发

你还可以编排多个专业智能体的协作流程：例如创建一个「功能开发」主智能体，先调用只读的「调研员」子智能体分析代码库中的相关模块和设计模式，拿到结果后再调用「编码员」子智能体按分析出的模式写新代码。这种多智能体编排在做复杂功能时特别实用，每个角色各司其职。

另外，VSCode 支持 Claude 格式的 Agent 文件（放在.claude/agents目录），如果你之前在 Claude Code 创建过自定义 Agent，可以直接拿过来用，无缝兼容。

8. Prompt Files：可复用的提示词模板

Prompt Files 可把常用任务封装成斜杠命令，在对话中随时复用。比如经常需要生成 React 组件、执行安全审查、编写单元测试，每次都要重复输入类似提示词，有了 Prompt Files 就不用。与自定义指令的区别是：自定义指令自动应用到所有对话，Prompt Files 需要手动输入/命令名触发，更适合特定任务场景。

创建方式与自定义指令类似：在对话区域设置中打开「提示文件」，选择「新建提示文件」，再选择创建位置，VSCode 自动创建对应文件；也可直接在.github/prompts/目录下创建.prompt.md文件。例如创建一个/gen-test命令自动生成单元测试：

--- description: 为当前文件生成单元测试 agent: agent tools: ['search', 'search/codebase', 'edit/editFiles'] --- 为 ${fileBasename} 生成单元测试。 - 测试文件放在同目录下：${fileDirname} - 命名为：${fileBasenameNoExtension}.test.ts - 测试框架：${input:framework:jest or vitest} - 参考项目的测试规范：testing.md

这里面用到了变量：${file}会自动替换为当前打开的文件路径，${input:framework}表示从用户在对话框中输入的内容取值。保存后在对话框中输入/gen-test即可触发，还可以追加额外信息，比如/gen-test 只测试登录相关的函数。

9. Smart Actions：AI 快捷操作

除上述核心特性外，Copilot 还在 VSCode 各个角落埋了不少右键可触发的 AI 快捷操作（Smart Actions），无需写提示词：

• 自动生成 Commit Message：在 Source Control 面板点小星星图标，AI 根据代码改动自动生成提交信息；
• 代码解释：选中代码右键「Explain」，AI 解释这段代码在干什么；
• 生成测试：选中代码右键「Generate Tests」，AI 写单元测试；
• 生成文档：选中代码右键「Generate Docs」，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 编程，不用换编辑器、不用重新学操作、不用迁移配置。Copilot Free 免费计划零门槛上手，Copilot Pro 支持新用户 30 天免费试用，在校学生可通过 GitHub Education 申请免费使用。

如果你已掌握本文的基础使用、Agent 实战和核心特性，建议进一步阅读仓库中的相关文档：通过 AI 塔罗牌占卜网站项目实战 巩固 Plan + Agent 全流程，通过 AI 热点监控工具项目实战 体验 MCP + Agent Skills 在复杂全栈项目中的组合运用，结合 Agent Skills：通用 AI 技能库 与 MCP 服务开发 深入理解这两大开放标准的原理，即可在 Vibe Coding 的道路上走得更远。

• 文档
• 教程
• 知识库
• 人工智能