VS Code Copilot 完整使用教程（含图解）
原创
一、GitHub Copilot 概述
GitHub Copilot 是一款集成在 Visual Studio Code 中的 AI 驱动编码助手，它基于公共代码仓库训练而成，能够支持大多数编程语言和框架。通过自然语言提示和现有代码上下文，Copilot 可提供实时代码建议、解释说明和自动化实现，显著提升开发效率。
核心功能亮点
- 智能代码补全：输入时提供单行到整函数级别的实时建议，支持多种编程语言
- 自主编码模式（Agent Mode）：根据自然语言指令，自动规划并执行复杂开发任务，跨文件协调修改
- 自然语言交互：通过聊天界面与代码库对话，提问、解释代码或指定修改需求
- 多文件批量修改：单个指令即可应用更改到项目中多个文件，AI 会分析项目结构并进行协调修改
- 模型灵活切换：可根据速度、推理能力或特定任务需求切换不同 AI 模型，支持接入外部模型
二、安装与设置步骤
获取访问权限
不同用户类型需通过以下方式获取 Copilot 访问权限：
用户类型 | 访问方式说明 |
|---|---|
个人用户 | 注册 Copilot Free 免费计划（每月有限制）或付费订阅（无限使用），新用户可享受 30 天免费试用 |
组织/企业成员 | 通过组织管理员分配的订阅访问，或访问 GitHub 设置页面 申请组织提供的 Copilot 权限 |
详细安装流程
- 启动设置向导undefined悬停状态栏中的 Copilot 图标，选择 Set up Copilot
image.png
- 登录 GitHub 账号undefined选择 Sign in 登录账号（若未登录），无订阅用户将自动注册 Free 计划
image.png
- 切换账号（如需）undefined若需使用其他账号，通过活动栏的 Accounts 菜单 登出当前账号
image.png
重新登录方式：
- Copilot 状态栏菜单选择 Sign in to use Copilot
image.png
- 活动栏 Accounts 菜单 选择 Sign in with GitHub to use GitHub Copilot
image.png
高级设置选项
- 隐藏 AI 功能：通过命令面板（⇧⌘P）运行 Chat: Hide AI Features 完全隐藏 Copilot 功能
image.png
- 工作区禁用：在扩展视图（⇧⌘X）中找到 GitHub Copilot，选择 禁用（工作区） 并重启扩展
image.png
三、快速入门：构建任务管理应用
通过实战项目学习 Copilot 核心功能，本教程将创建一个包含添加、删除和标记任务功能的响应式网页应用。
前提条件
- 已安装 VS Code
- 已完成 Copilot 访问设置（参考上文）
Step 1: 体验智能代码补全
- 创建项目文件夹并在 VS Code 中打开，新建
index.html文件 - 输入
<!DOCTYPE html>，Copilot 会自动建议完整 HTML 结构（灰色"幽灵文本"）
image.png
- 按 Tab 接受建议，完成基础 HTML 结构
- 在
<body>标签内继续输入：<div class="container"> <h1>My Task Manager</h1> <form id="task-form"> - 如需切换多个建议，可悬停幽灵文本查看导航控件，或使用 ⌥]（下一个）和 ⌥[（上一个）快捷键循环选择
image.png
Step 2: 代理模式（Agent Mode）构建完整功能
代理模式能将自然语言需求转化为跨文件的完整实现：
- 打开聊天视图（快捷键 ⌃⌘I 或点击活动栏 Copilot 图标）
- 在聊天模式下拉菜单中选择 Agent
image.png
- 输入以下指令并回车：创建一个完整的任务管理器网页应用，支持添加、删除任务和标记完成状态。包含现代 CSS 样式，确保响应式设计。使用语义化 HTML 并保证可访问性。将标记、样式和脚本分离到各自文件。
- 观察 Copilot 自动执行以下操作：
- 更新
index.html添加任务管理器界面 - 创建 CSS 文件实现现代响应式样式
- 生成 JavaScript 文件处理交互功能
- 更新
- 完成后点击 Keep 接受所有更改，在浏览器中打开
index.html即可看到运行效果
Step 3: 内联聊天（Inline Chat）精确调整代码
内联聊天适用于对特定代码块进行精准修改：
- 打开生成的 JavaScript 文件，找到添加任务的代码块
- 选中代码块后按 ⌘I 打开编辑器内联聊天
image.png
- 输入以下指令：添加输入验证以防止添加空任务，并去除任务文本中的空格
- 内联聊天将专注于选中代码块进行针对性改进
image.png
- 点击 Accept 应用更改
Step 4: 自定义 AI 体验
创建项目专属指令
- 在项目根目录创建
.github文件夹，新建copilot-instructions.md文件 - 添加编码规范（示例）：# 项目通用编码指南
代码风格
- 使用语义化 HTML5 元素（header, main, section 等）
- 优先使用现代 JavaScript (ES6+) 特性
命名规范
- 组件名、接口和类型别名使用 PascalCase
- 变量、函数和方法使用 camelCase
- 私有类成员以下划线 _ 为前缀
创建自定义聊天模式
- 命令面板运行 Chat: New Mode File，选择保存位置为
.github/chatmodes - 命名为 "Code Reviewer"，替换内容为：--- description: '审查代码质量和最佳实践合规性' tools: ['codebase', 'usages', 'vscodeAPI', 'problems'] --- # 代码审查模式
你是一名资深开发者，负责审查代码质量、最佳实践和项目标准合规性，不直接提供代码修改。
分析重点
- 代码质量、结构和最佳实践
- 潜在 bug、安全问题和性能问题
- 可访问性和用户体验考量
- 在聊天视图的模式下拉菜单中可选择此自定义模式
image.png
Step 5: 智能操作（Smart Actions）集成工作流
智能操作将 AI 功能无缝集成到 VS Code 界面，无需切换到聊天窗口：
- 打开源代码管理视图（快捷键 ⌃⇧G）
- 初始化仓库并暂存所有更改
- 点击提交框旁的 sparkle 图标，Copilot 将基于暂存更改生成符合规范的提交信息
image.png
- 满意则直接提交，或再次点击图标生成替代方案
四、高级功能与个性化配置
多模型切换与管理
- 在聊天视图中通过模型下拉菜单选择不同 AI 模型
- 支持连接外部模型提供商，需在设置中配置 API 密钥
工作区特定配置
- 禁用特定语言：在设置中搜索
copilot.languageFilter排除不需要的语言 - 自定义快捷键：通过 文件 > 首选项 > 键盘快捷方式 配置 Copilot 相关操作的快捷键
常见问题解决
- 网络问题：确保 VS Code 可访问
https://api.github.com和https://copilot-proxy.githubusercontent.com - 性能优化：在大型项目中可通过设置
copilot.suggestionsPerRequest减少建议数量 - 隐私设置：通过
telemetry.telemetryLevel设置为off禁用遥测数据收集
五、总结与后续学习
通过本教程，你已掌握：
- Copilot 核心功能：代码补全、代理模式、内联聊天和智能操作
- 项目实战：从零构建响应式任务管理应用
- 个性化配置：自定义指令和专用聊天模式
进阶学习路径
- 探索 MCP（Model Context Protocol）服务器扩展 AI 能力
- 创建更多专用聊天模式（如调试专家、文档生成器）
- 学习 Copilot CLI 工具集成终端工作流
提示：使用
#符号在聊天中引用特定文件（如#index.html）或使用#codebase引用整个项目，可提供更精准的上下文建议。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
