当前位置：首页 > news >正文

VS Code Copilot 完整使用教程（含图解）

news 2025/8/19 12:57:11

一、GitHub Copilot 概述

GitHub Copilot 是一款集成在 Visual Studio Code 中的 AI 驱动编码助手，它基于公共代码仓库训练而成，能够支持大多数编程语言和框架。通过自然语言提示和现有代码上下文，Copilot 可提供实时代码建议、解释说明和自动化实现，显著提升开发效率。

核心功能亮点

智能代码补全：输入时提供单行到整函数级别的实时建议，支持多种编程语言
自主编码模式（Agent Mode）：根据自然语言指令，自动规划并执行复杂开发任务，跨文件协调修改
自然语言交互：通过聊天界面与代码库对话，提问、解释代码或指定修改需求
多文件批量修改：单个指令即可应用更改到项目中多个文件，AI 会分析项目结构并进行协调修改
模型灵活切换：可根据速度、推理能力或特定任务需求切换不同 AI 模型，支持接入外部模型

二、安装与设置步骤

获取访问权限

不同用户类型需通过以下方式获取 Copilot 访问权限：

用户类型	访问方式说明
个人用户	注册 Copilot Free 免费计划（每月有限制）或付费订阅（无限使用），新用户可享受 30 天免费试用
组织/企业成员	通过组织管理员分配的订阅访问，或访问 GitHub 设置页面申请组织提供的 Copilot 权限

详细安装流程

启动设置向导
悬停状态栏中的 Copilot 图标，选择 Set up Copilot
登录 GitHub 账号
选择 Sign in 登录账号（若未登录），无订阅用户将自动注册 Free 计划
切换账号（如需）
若需使用其他账号，通过活动栏的 Accounts 菜单 登出当前账号

重新登录方式：
- Copilot 状态栏菜单选择 Sign in to use Copilot
- 活动栏 Accounts 菜单 选择 Sign in with GitHub to use GitHub Copilot

高级设置选项

隐藏 AI 功能：通过命令面板（⇧⌘P）运行 Chat: Hide AI Features 完全隐藏 Copilot 功能
工作区禁用：在扩展视图（⇧⌘X）中找到 GitHub Copilot，选择 禁用（工作区） 并重启扩展

三、快速入门：构建任务管理应用

通过实战项目学习 Copilot 核心功能，本教程将创建一个包含添加、删除和标记任务功能的响应式网页应用。

前提条件

已安装 VS Code
已完成 Copilot 访问设置（参考上文）

Step 1: 体验智能代码补全

创建项目文件夹并在 VS Code 中打开，新建 index.html 文件
输入 <!DOCTYPE html>，Copilot 会自动建议完整 HTML 结构（灰色"幽灵文本"）
按 Tab 接受建议，完成基础 HTML 结构

在 <body> 标签内继续输入：

<div class="container"><h1>My Task Manager</h1><form id="task-form">

如需切换多个建议，可悬停幽灵文本查看导航控件，或使用 ⌥]（下一个）和 ⌥[（上一个）快捷键循环选择

Step 2: 代理模式（Agent Mode）构建完整功能

代理模式能将自然语言需求转化为跨文件的完整实现：

打开聊天视图（快捷键 ⌃⌘I 或点击活动栏 Copilot 图标）
在聊天模式下拉菜单中选择 Agent

输入以下指令并回车：

创建一个完整的任务管理器网页应用，支持添加、删除任务和标记完成状态。包含现代 CSS 样式，确保响应式设计。使用语义化 HTML 并保证可访问性。将标记、样式和脚本分离到各自文件。

观察 Copilot 自动执行以下操作：
- 更新 index.html 添加任务管理器界面
- 创建 CSS 文件实现现代响应式样式
- 生成 JavaScript 文件处理交互功能
完成后点击 Keep 接受所有更改，在浏览器中打开 index.html 即可看到运行效果

Step 3: 内联聊天（Inline Chat）精确调整代码

内联聊天适用于对特定代码块进行精准修改：

打开生成的 JavaScript 文件，找到添加任务的代码块
选中代码块后按 ⌘I 打开编辑器内联聊天

输入以下指令：

添加输入验证以防止添加空任务，并去除任务文本中的空格

内联聊天将专注于选中代码块进行针对性改进
点击 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、安全问题和性能问题
- 可访问性和用户体验考量

在聊天视图的模式下拉菜单中可选择此自定义模式

Step 5: 智能操作（Smart Actions）集成工作流

智能操作将 AI 功能无缝集成到 VS Code 界面，无需切换到聊天窗口：

打开源代码管理视图（快捷键 ⌃⇧G）
初始化仓库并暂存所有更改
点击提交框旁的 ** sparkle 图标**，Copilot 将基于暂存更改生成符合规范的提交信息
满意则直接提交，或再次点击图标生成替代方案

四、高级功能与个性化配置

多模型切换与管理

在聊天视图中通过模型下拉菜单选择不同 AI 模型
支持连接外部模型提供商，需在设置中配置 API 密钥

工作区特定配置

禁用特定语言：在设置中搜索 copilot.languageFilter 排除不需要的语言
自定义快捷键：通过 文件 > 首选项 > 键盘快捷方式 配置 Copilot 相关操作的快捷键

常见问题解决

网络问题：确保 VS Code 可访问 https://api.github.com 和 https://copilot-proxy.githubusercontent.com
性能优化：在大型项目中可通过设置 copilot.suggestionsPerRequest 减少建议数量
隐私设置：通过 telemetry.telemetryLevel 设置为 off 禁用遥测数据收集