VS Code GitHub Copilot 完整使用教程

专业严谨的 VS Code GitHub Copilot 完整使用教程

1. 引言

GitHub Copilot 是由 GitHub 和 OpenAI 合作开发的一款基于 AI 的“结对程序员”。它利用先进的语言模型，根据您在编辑器中的代码、注释以及聊天输入，生成代码建议、解释代码、修复 Bug、生成文档，甚至执行某些开发任务。在 Visual Studio Code (VS Code) 中，GitHub Copilot 深度集成，提供了无缝的使用体验，极大地提高了开发效率。

本教程将详细阐述如何在 VS Code 中有效、专业地利用 GitHub Copilot 的各项功能，包括基本的代码建议、强大的聊天交互、上下文管理以及各种模式（角色）的应用。

2. 前置条件

在使用 GitHub Copilot 之前，请确保满足以下条件：

1. 安装 Visual Studio Code (VS Code): 从 VS Code 官方网站 下载并安装最新版本。
2. GitHub 账号: 拥有一个 GitHub 账号。
3. GitHub Copilot 订阅: 拥有有效的 GitHub Copilot 订阅。您可以在 GitHub 官网 查看订阅详情并进行购买。
4. 网络连接: 确保您的计算机具备稳定的互联网连接。

3. 安装与设置

1. 打开 VS Code: 启动 Visual Studio Code 应用程序。
2. 安装 GitHub Copilot 扩展:
   • 点击侧边栏的“扩展”图标 (或按下 Ctrl+Shift+X) 打开扩展视图。
   • 在搜索框中输入 “GitHub Copilot”。
   • 找到由 “GitHub” 发布的 “GitHub Copilot” 扩展，点击“安装”。
3. 安装 GitHub Copilot Chat 扩展:
   • 在搜索框中输入 “GitHub Copilot Chat”。
   • 找到由 “GitHub” 发布的 “GitHub Copilot Chat” 扩展，点击“安装”。（通常安装 Copilot 会提示您也安装 Chat）
4. 登录 GitHub 账号:
   • 安装完成后，VS Code 右下角或扩展视图可能会提示您登录 GitHub。点击相应的提示进行登录。
   • 如果您没有看到提示，可以点击左下角的“账户”图标，选择“通过 GitHub 登录”，然后选择“GitHub Copilot”。
   • VS Code 会在浏览器中打开 GitHub 授权页面，按照提示完成授权即可。
   • 登录成功后，VS Code 底部状态栏会显示 GitHub Copilot 图标，表示已激活。

4. 基本使用：代码建议（Inline Suggestions）

这是最初也是最常见的 Copilot 功能，它会在您编写代码时实时提供建议。

1. 打开一个代码文件: 在 VS Code 中打开或创建一个支持的编程语言文件（如 .js, .py, .java, .cs 等）。
2. 开始编写代码或注释: 当您开始输入函数名、变量名、注释或代码逻辑时，Copilot 会根据上下文预测您可能要写的内容。
3. 查看建议: Copilot 的建议会以淡灰色（或您的主题设定的颜色）文本形式显示在您的光标位置之后。
4. 接受建议: 如果建议是您想要的，按下 Tab 键即可接受。
5. 忽略建议: 如果建议不是您想要的，按下 Esc 键即可忽略。
6. 查看更多建议: 有时 Copilot 会提供多个备选建议。您可以按下 Alt+[ (向前切换) 和 Alt+] (向后切换) 来循环查看不同的建议。

示例:
在一个 Python 文件中输入 # Function to calculate the factorial of a number，Copilot 可能立即建议整个函数体。或者输入 def fibonacci(，Copilot 可能会建议函数签名和实现。

5. GitHub Copilot Chat：核心交互界面

Copilot Chat 提供了一个对话式的界面，让您可以直接与 Copilot 进行自然语言交流，进行更复杂的任务。

5.1 打开 Copilot Chat

有几种方式可以打开 Copilot Chat 面板：

1. 键盘快捷键: 按下 Ctrl+Alt+I (Windows/Linux) 或 Cmd+Option+I (macOS)。
2. 侧边栏图标: 点击 VS Code 侧边栏的 Copilot Chat 图标。
3. 命令面板: 按下 Ctrl+Shift+P (Windows/Linux/macOS) 打开命令面板，输入 “Copilot Chat” 或 “Focus on Copilot Chat View” 并选择对应的命令。

打开后，Copilot Chat 面板通常会出现在侧边栏或底部面板中。

5.2 Chat 面板结构

Copilot Chat 面板主要包含以下部分：

• 聊天记录: 显示您和 Copilot 之前的对话。
• 输入框: 用于输入您的问题、指令或请求。
• 上下文指示符: 输入框上方可能会显示当前对话的上下文，如 #file, #selection, #editor 等。您可以点击这些指示符来调整或添加上下文。
• 发送按钮: 输入框旁的纸飞机图标，用于发送您的消息。
• 新聊天按钮: 面板顶部或输入框旁可能会有按钮用于开始新的对话。

5.3 发送消息与获取响应

1. 在输入框中输入您的请求: 使用自然语言清晰地表达您想要 Copilot 做什么。例如：“请解释一下这段代码是做什么的”、“如何用 JavaScript 实现冒泡排序？”、“帮我重构一下当前选中的函数，让它更具可读性”。
2. 发送消息: 按下 Enter 键或点击输入框旁的发送按钮。
3. 等待响应: Copilot 会处理您的请求，并在聊天记录中显示其回答、建议或生成的代码。
4. 处理响应:
   • 对于文字解释，直接阅读即可。
   • 对于代码块，通常会在代码块上方显示一些操作按钮，如“Insert into Cursor”（插入到光标位置）、“Insert into New File”（插入到新文件）、“Copy”（复制）、“Replace File Contents”（替换当前文件内容）等。点击这些按钮可以将生成的代码应用到您的项目中。这对应于用户提及的“发送和调度”功能。

5.4 添加上下文（Adding Context）

为 Copilot 提供明确的上下文是获得准确有用响应的关键。您可以通过以下方式添加上下文：

1. 自动上下文: Copilot Chat 通常会根据您当前活动的文件或选中的代码自动添加上下文。输入框上方会显示当前的上下文来源（如 #file, #selection）。
2. 手动添加上下文指令: 在输入框中输入 # 符号，Copilot 会弹出一个列表，显示您可以添加的上下文来源。常见的上下文指令包括：
   • #file: 引用当前活动文件或指定的文件。
   • #selection: 引用当前选中的代码块。
   • #editor: 引用当前编辑器中的内容。
   • #terminal: 引用当前终端窗口的输出（这需要终端视图可见并聚焦）。
   • #workspace / #codebase: 引用整个工作区或项目代码库（详细说明见下一节）。
   • #symbol: 引用工作区中的特定符号（类、函数等）。
   • #解决错误: 让 Copilot 帮助您解决当前活动文件中检测到的错误。
3. 在消息中直接提及: 您可以在请求中直接提及文件名、函数名等，Copilot 会尝试理解并利用这些信息作为上下文。

示例:

• 要让 Copilot 解释当前选中的代码，可以先选中代码，然后打开 Chat，输入框上方会显示 #selection，然后输入 “Please explain this selected code.” (请解释这段选中的代码)。
• 要询问关于另一个文件的内容，可以在输入框中输入 #file path/to/another/file.js，然后输入您的请求。

5.5 使用 #codebase 发送

#codebase (有时也写作 #workspace) 是 Copilot Chat 中一个非常强大的上下文指令。它允许 Copilot 访问并理解您的整个项目代码库（工作区）。

1. 触发方式: 在 Chat 输入框中输入 #codebase 或 #workspace，然后按下 Enter 键选择它，或者在您的请求中直接包含此指令。
2. 功能: 当您使用 #codebase 作为上下文时，Copilot 可以：
   • 回答关于项目整体结构、模块之间关系的问题。
   • 查找某个函数或变量在整个项目中的所有用法。
   • 帮助您实现一个跨多个文件的新功能。
   • 提供关于如何在项目中特定位置集成新代码的建议。
   • 分析项目中的 Bug 或问题，并定位可能的原因。
3. 注意: 使用 #codebase 需要 Copilot 对您的工作区进行索引。大型项目可能需要一些时间来完成索引。并不是所有问题都需要 #codebase 上下文；对于特定文件或代码块的问题，使用 #file 或 #selection 会更高效和聚焦。

示例:

• “How does the data flow from the frontend component in src/frontend/app.js to the backend API in src/backend/api.py? #codebase” (数据是如何从前端组件 app.js 流向后端 API api.py 的？请参考整个代码库)
• “Find all usages of the UserService class in the entire project and explain its main responsibilities. #codebase” (在整个项目中找到 UserService 类的所有用法，并解释其主要职责。)
• “Suggest how to add a new feature ‘user profile’ that requires modifications in the database schema, backend API, and frontend UI. #codebase” (请建议如何添加一个 ‘用户资料’ 的新功能，它需要在数据库 schema、后端 API 和前端 UI 中进行修改。请参考整个代码库。)

5.6 发送到新聊天（Send to New Chat）

如果您当前正在进行的对话偏离了主题，或者您想就一个完全不同的问题开始新的讨论，可以开始一个新的聊天会话。

1. 在 Chat 面板中找到“新聊天”按钮: 这个按钮的位置可能因 VS Code 版本和布局而异，通常位于 Chat 面板的顶部区域或输入框附近。
2. 点击按钮: 点击后，当前的聊天历史会被清除，您可以开始一个新的会话。

通过开始新聊天，可以保持不同讨论的清晰性和聚焦性。

5.7 快速聊天（Quick Chat / Inline Chat）

Quick Chat 提供了一个不打开完整 Chat 面板的快速交互方式。

1. 触发方式: 按下 Ctrl+Shift+I (Windows/Linux) 或 Cmd+Shift+I (macOS)。
2. 界面: 这会在编辑器区域附近弹出一个小的输入框。
3. 使用: 您可以在这个输入框中输入简短的问题或指令，按下 Enter 发送。Copilot 的回复会以类似通知或临时窗口的形式显示。
4. 目的: Quick Chat 适用于快速提问、获取解释或生成小段代码，而无需切换到单独的 Chat 面板。

示例:

• 选中一段代码，按下 Ctrl+Shift+I，输入 “Explain this.” (解释一下这个)。
• 按下 Ctrl+Shift+I，输入 “How to write a simple fetch request in JS?” (如何用 JS 写一个简单的 fetch 请求？)。

6. 模式选择：询问、编辑、代理（Capabilities/Roles）

用户提到的“模式选择(询问 编辑 代理)”并非指 Copilot 有一个明确的“询问模式”、“编辑模式”、“代理模式”切换按钮。更准确的理解是，Copilot 扮演着不同的角色（Roles）或具备不同的能力（Capabilities），这些角色/能力通过您提问的方式、使用的命令以及提供的上下文来体现。

1. 询问 (Inquiry):

   • 作用/功能: 这是最基础的 Chat 交互。您向 Copilot 提问，获取信息、解释、概念说明、如何操作等等。
   • 如何使用: 在 Chat 输入框中直接用自然语言提问。
   • 示例:
     • “What is a closure in JavaScript?” (JavaScript 中的闭包是什么？)
     • “Explain the difference between == and === in JavaScript.” (解释一下 JavaScript 中 == 和 === 的区别。)
     • “How can I read a file line by line in Node.js?” (如何在 Node.js 中逐行读取文件？)

2. 编辑 (Editing / Refactoring):

   • 作用/功能: 让 Copilot 帮助您修改、改进、重构现有代码，或根据需求修改生成的代码。这通常通过特定的指令或在 Chat 中描述您的编辑需求来实现。
   • 如何使用:
     • 通过 Chat 指令: 使用 @editor 或 @selection 上下文，并提出编辑请求。例如，选中代码后，在 Chat 中说 “Refactor this function to use async/await.” (重构这个函数以使用 async/await。) 或 “Add JSDoc comments to this function.” (为这个函数添加 JSDoc 注释。)
     • 通过特定命令 (Agent): 使用 / 命令（见下文的代理部分），如 /fix 用于修复 Bug，/refactor 用于重构。
   • 示例:
     • 选中一个复杂的函数，Chat 中输入 “Simplify this logic.” (简化这个逻辑。)
     • 发现代码有潜在 Bug，选中相关代码，Chat 中输入 “Find potential bugs in this code.” (找出这段代码中潜在的 Bug。) Copilot 可能会指出问题并提供修复建议。

3. 代理 (Agent):

   • 作用/功能: Copilot 作为您的一个自动化代理，可以理解并执行某些更结构化的开发任务，而不仅仅是生成文本或代码。这些任务通常通过在 Chat 输入框中使用 / 命令来触发，有时结合 @ 提及特定的代理或上下文。
   • 如何使用: 在 Chat 输入框中输入 / 会弹出一个列表，显示可用的命令。输入 @ 会显示可以与之交互的代理或上下文类型。
   • 常见的代理命令示例:
     • /fix: 帮助您找到并修复代码中的错误。选中代码或将光标放在错误附近，使用此命令。
     • /explain: 解释当前选中的代码或文件。这与询问模式类似，但 /explain 更侧重于对已有代码的深入分析。
     • /test: 为当前代码生成单元测试。
     • /doc: 为当前代码生成文档（如 JSDoc, Pyhton Docstrings 等）。
     • /refactor: 重构选中的代码（类似于编辑模式下的请求，但通过命令触发）。
     • @terminal /run [command]: 有时 Copilot 可以与终端集成，帮助执行命令。
     • @workspace /find [symbol]: 在整个工作区中查找符号（类似于 #codebase 查找）。
   • 示例:
     • 您的代码有一个波浪线标记的错误，打开 Chat，输入 /fix。Copilot 会分析错误并建议修复方案，通常会提供直接“Apply Fix”（应用修复）的按钮。
     • 选中一个函数，打开 Chat，输入 /test。Copilot 会尝试为该函数生成一个测试用例。

总结来说，这三种“模式”是 Copilot 在 VS Code 中扮演的不同角色：询问者（获取信息）、代码助手（修改和生成代码）和任务执行者（通过命令自动化开发流程）。您在 Chat 中的输入方式决定了 Copilot 会以哪种角色回应。

7. 模型选择（Model Selection）

通常情况下，GitHub Copilot 使用的模型是由 GitHub 后端管理的，用户无需手动选择特定的底层 AI 模型（如 GPT-3.5, GPT-4 等）。然而，VS Code 的 Copilot 扩展提供了一些配置选项，允许用户在 GitHub 提供不同的模型选项时进行选择。

1. 打开 VS Code 设置: File > Preferences > Settings (Windows/Linux) 或 Code > Preferences > Settings (macOS)，或按下 Ctrl+, (Windows/Linux) 或 Cmd+, (macOS)。
2. 搜索设置: 在搜索框中输入 “GitHub Copilot”。
3. 查找模型设置: 查找与模型相关的设置，例如 GitHub Copilot: Chat: Model。
4. 选择模型: 如果存在多个模型选项（例如，GitHub 可能会提供实验性的模型或不同性能/成本的模型），您可以在下拉菜单中选择您希望 Copilot Chat 使用的模型。
5. 应用设置: 修改设置后通常会自动保存。

注意:

• 这个设置选项只有在 GitHub 提供了可供选择的模型时才会显示并生效。在大多数情况下，您可能只有一个默认选项。
• 更改模型可能会影响 Copilot 的响应速度、质量或成本（如果涉及）。请根据 GitHub 提供的文档或说明谨慎选择。

8. 完整流程示例：使用 Copilot 实现一个新功能并解释

假设您想在现有的 Node.js 项目中添加一个功能：读取一个 JSON 文件并解析其内容。

1. 打开项目: 在 VS Code 中打开您的 Node.js 项目文件夹。
2. 决定实现位置: 找到或创建一个您想添加此功能的文件，例如 src/utils/jsonReader.js。
3. 获取初步建议 (Inline):
   • 在新文件中输入注释：// Function to read and parse a JSON file
   • Copilot 可能会立即建议函数签名甚至整个实现。如果满意，按下 Tab 接受。
4. 使用 Chat 寻求更详细的帮助：
   • 如果您对建议不满意，或者想用不同的方法实现（例如使用 async/await），打开 Copilot Chat (Ctrl+Alt+I 或 Cmd+Option+I)。
   • 添加文件上下文: 如果您正在编辑该文件，输入框上方应该已经有 #file src/utils/jsonReader.js 的上下文。如果没有，手动输入 #file src/utils/jsonReader.js。
   • 提出请求: 在输入框中输入：“请为我编写一个 Node.js 函数，用于异步读取指定路径的 JSON 文件并返回解析后的对象。确保处理文件不存在或解析错误的情况。”
   • 发送: 按下 Enter。
5. 处理 Copilot 的响应：
   • Copilot 会生成一段代码，通常包含 fs.promises 和 try...catch 块来处理异步读取和错误。
   • 在代码块上方，您会看到按钮，如“Insert into Cursor”。点击它将代码插入到您的文件中。
6. 迭代和改进：
   • 如果您想让函数接受相对路径，可以在 Chat 中继续说：“这个函数现在假设路径是绝对的。如何修改它以支持相对于项目根目录的相对路径？”
   • Copilot 会提供修改建议，您再次应用代码。
7. 理解生成的代码 (询问模式)：
   • 如果您对代码中的某个部分不理解，例如 fs.promises.readFile，可以选中那部分代码。
   • 打开 Quick Chat (Ctrl+Shift+I 或 Cmd+Shift+I)。
   • 输入 “Explain this.” (解释一下这个)。Copilot 会简要解释该代码的作用。
   • 或者在主 Chat 面板中，确保 #selection 上下文存在，输入 “What does this code do?” (这段代码是做什么的？)。
8. 生成测试 (代理模式):
   • 选中最终的 readJsonFile 函数。
   • 打开 Chat，输入 /test。
   • Copilot 会尝试生成一个或多个使用 Node.js 内置模块或测试框架（如 Jest）的测试用例。您可以将这些测试用例复制到您的测试文件中。
9. 使用 #codebase 查找用法：
   • 完成 readJsonFile 函数后，如果您想知道未来哪些地方可能会用到它，可以在 Chat 中输入：“请在整个项目中查找函数 readJsonFile 的所有潜在用法，或者建议哪些模块可能会用到这个函数。#codebase”。
   • Copilot 会分析您的项目代码库，提供相关信息或建议。

9. 最佳实践与提示

• 提供清晰明确的提示 (Prompt): 您给出的指令越具体，Copilot 的响应就越准确。说明您想做什么、使用什么语言/框架、有哪些限制或特殊要求。
• 利用上下文: 充分利用 #file, #selection, #codebase 等上下文指令，帮助 Copilot 理解您的问题是基于哪部分代码或项目。
• 迭代式交流: 如果第一次的响应不完全符合要求，不要放弃。继续在 Chat 中提出细化要求或指出不足，与 Copilot 进行多轮对话。
• 验证和审查代码: Copilot 生成的代码是建议，不是保证正确无误的。始终仔细审查生成的代码，理解其工作原理，并在集成到项目中之前进行测试。
• 理解 Copilot 的局限性: Copilot 是一个强大的工具，但它不是完美的。它可能会生成不完全正确的代码、过时的语法，或者无法理解非常复杂的业务逻辑。不要盲目信任，保持批判性思维。
• 利用 VS Code 的其他功能: Copilot 与 VS Code 的其他功能（如终端、调试器、源代码控制）结合使用时效果最佳。

10. 总结

GitHub Copilot 在 VS Code 中的集成，通过智能的代码建议、强大的聊天交互和多功能的代理能力，极大地增强了开发者的生产力。掌握好基本的代码建议、熟练使用 Chat 面板进行询问和编辑、理解并运用上下文（特别是 #codebase）、以及利用 / 命令触发代理任务，将使您能够更高效、更愉快地进行软件开发。记住，Copilot 是您的AI助手，最有效的使用方式是将其作为协作伙伴，结合您自身的专业知识和判断，共同完成任务。

---