> 技术文档 > VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明

VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明

VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明

一、GitHub Copilot 概述

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

核心功能亮点

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

二、安装与设置步骤

获取访问权限

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

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

详细安装流程

  1. 启动设置向导
    悬停状态栏中的 Copilot 图标,选择 Set up Copilot
    VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明

  2. 登录 GitHub 账号
    选择 Sign in 登录账号(若未登录),无订阅用户将自动注册 Free 计划
    VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明

  3. 切换账号(如需)
    若需使用其他账号,通过活动栏的 Accounts 菜单 登出当前账号
    VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明

    重新登录方式:

    • Copilot 状态栏菜单选择 Sign in to use Copilot
      VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明
    • 活动栏 Accounts 菜单 选择 Sign in with GitHub to use GitHub Copilot
      VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明

高级设置选项

  • 隐藏 AI 功能:通过命令面板(⇧⌘P)运行 Chat: Hide AI Features 完全隐藏 Copilot 功能
    VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明

  • 工作区禁用:在扩展视图(⇧⌘X)中找到 GitHub Copilot,选择 禁用(工作区) 并重启扩展
    VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明

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

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

前提条件

  • 已安装 VS Code
  • 已完成 Copilot 访问设置(参考上文)

Step 1: 体验智能代码补全

  1. 创建项目文件夹并在 VS Code 中打开,新建 index.html 文件
  2. 输入 ,Copilot 会自动建议完整 HTML 结构(灰色\"幽灵文本\")
    VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明
  3. Tab 接受建议,完成基础 HTML 结构
  4. 标签内继续输入:
    <div class=\"container\"> <h1>My Task Manager</h1> <form id=\"task-form\">
  5. 如需切换多个建议,可悬停幽灵文本查看导航控件,或使用 ⌥](下一个)和 ⌥[(上一个)快捷键循环选择
    VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明

Step 2: 代理模式(Agent Mode)构建完整功能

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

  1. 打开聊天视图(快捷键 ⌃⌘I 或点击活动栏 Copilot 图标)
  2. 在聊天模式下拉菜单中选择 Agent
    VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明
  3. 输入以下指令并回车:
    创建一个完整的任务管理器网页应用,支持添加、删除任务和标记完成状态。包含现代 CSS 样式,确保响应式设计。使用语义化 HTML 并保证可访问性。将标记、样式和脚本分离到各自文件。
  4. 观察 Copilot 自动执行以下操作:
    • 更新 index.html 添加任务管理器界面
    • 创建 CSS 文件实现现代响应式样式
    • 生成 JavaScript 文件处理交互功能
  5. 完成后点击 Keep 接受所有更改,在浏览器中打开 index.html 即可看到运行效果

Step 3: 内联聊天(Inline Chat)精确调整代码

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

  1. 打开生成的 JavaScript 文件,找到添加任务的代码块
  2. 选中代码块后按 ⌘I 打开编辑器内联聊天
    VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明
  3. 输入以下指令:
    添加输入验证以防止添加空任务,并去除任务文本中的空格
  4. 内联聊天将专注于选中代码块进行针对性改进
    VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明
  5. 点击 Accept 应用更改

Step 4: 自定义 AI 体验

创建项目专属指令
  1. 在项目根目录创建 .github 文件夹,新建 copilot-instructions.md 文件
  2. 添加编码规范(示例):
    # 项目通用编码指南## 代码风格- 使用语义化 HTML5 元素(header, main, section 等)- 优先使用现代 JavaScript (ES6+) 特性## 命名规范- 组件名、接口和类型别名使用 PascalCase- 变量、函数和方法使用 camelCase- 私有类成员以下划线 _ 为前缀
创建自定义聊天模式
  1. 命令面板运行 Chat: New Mode File,选择保存位置为 .github/chatmodes
  2. 命名为 “Code Reviewer”,替换内容为:
    ---description: \'审查代码质量和最佳实践合规性\'tools: [\'codebase\', \'usages\', \'vscodeAPI\', \'problems\']---# 代码审查模式你是一名资深开发者,负责审查代码质量、最佳实践和项目标准合规性,不直接提供代码修改。## 分析重点- 代码质量、结构和最佳实践- 潜在 bug、安全问题和性能问题- 可访问性和用户体验考量
  3. 在聊天视图的模式下拉菜单中可选择此自定义模式
    VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明

Step 5: 智能操作(Smart Actions)集成工作流

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

  1. 打开源代码管理视图(快捷键 ⌃⇧G
  2. 初始化仓库并暂存所有更改
  3. 点击提交框旁的 ** sparkle 图标**,Copilot 将基于暂存更改生成符合规范的提交信息
    VS Code Copilot 完整使用教程(含图解)_github copilot 详细的使用说明
  4. 满意则直接提交,或再次点击图标生成替代方案

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

多模型切换与管理

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

工作区特定配置

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

常见问题解决

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

五、总结与后续学习

通过本教程,你已掌握:

  • Copilot 核心功能:代码补全、代理模式、内联聊天和智能操作
  • 项目实战:从零构建响应式任务管理应用
  • 个性化配置:自定义指令和专用聊天模式

进阶学习路径

  1. 探索 MCP(Model Context Protocol)服务器扩展 AI 能力
  2. 创建更多专用聊天模式(如调试专家、文档生成器)
  3. 学习 Copilot CLI 工具集成终端工作流

提示:使用 # 符号在聊天中引用特定文件(如 #index.html)或使用 #codebase 引用整个项目,可提供更精准的上下文建议。