VS Code GitHub Copilot 完整使用教程

最新推荐文章于 2025-05-01 10:41:53 发布

YRr YRr

最新推荐文章于 2025-05-01 10:41:53 发布

阅读量665

点赞数 13

文章标签： github copilot

本文链接：https://blog.csdn.net/m0_73640344/article/details/147596535

版权

专业严谨的 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 之前，请确保满足以下条件：

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

3. 安装与设置

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

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

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

打开一个代码文件: 在 VS Code 中打开或创建一个支持的编程语言文件（如 .js, .py, .java, .cs 等）。
开始编写代码或注释: 当您开始输入函数名、变量名、注释或代码逻辑时，Copilot 会根据上下文预测您可能要写的内容。
查看建议: Copilot 的建议会以淡灰色（或您的主题设定的颜色）文本形式显示在您的光标位置之后。
接受建议: 如果建议是您想要的，按下 Tab 键即可接受。
忽略建议: 如果建议不是您想要的，按下 Esc 键即可忽略。
查看更多建议: 有时 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 面板：

键盘快捷键: 按下 Ctrl+Alt+I (Windows/Linux) 或 Cmd+Option+I (macOS)。
侧边栏图标: 点击 VS Code 侧边栏的 Copilot Chat 图标。
命令面板: 按下 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 发送消息与获取响应

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

5.4 添加上下文（Adding Context）

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

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

示例:

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

5.5 使用 `#codebase` 发送

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

触发方式: 在 Chat 输入框中输入 #codebase 或 #workspace，然后按下 Enter 键选择它，或者在您的请求中直接包含此指令。
功能: 当您使用 #codebase 作为上下文时，Copilot 可以：
- 回答关于项目整体结构、模块之间关系的问题。
- 查找某个函数或变量在整个项目中的所有用法。
- 帮助您实现一个跨多个文件的新功能。
- 提供关于如何在项目中特定位置集成新代码的建议。
- 分析项目中的 Bug 或问题，并定位可能的原因。
注意: 使用 #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）

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

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

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

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

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

触发方式: 按下 Ctrl+Shift+I (Windows/Linux) 或 Cmd+Shift+I (macOS)。
界面: 这会在编辑器区域附近弹出一个小的输入框。
使用: 您可以在这个输入框中输入简短的问题或指令，按下 Enter 发送。Copilot 的回复会以类似通知或临时窗口的形式显示。
目的: 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），这些角色/能力通过您提问的方式、使用的命令以及提供的上下文来体现。

询问 (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 中逐行读取文件？)
编辑 (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 可能会指出问题并提供修复建议。
代理 (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 提供不同的模型选项时进行选择。

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

注意:

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

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

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

打开项目: 在 VS Code 中打开您的 Node.js 项目文件夹。
决定实现位置: 找到或创建一个您想添加此功能的文件，例如 src/utils/jsonReader.js。
获取初步建议 (Inline):
- 在新文件中输入注释：// Function to read and parse a JSON file
- Copilot 可能会立即建议函数签名甚至整个实现。如果满意，按下 Tab 接受。
使用 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。
处理 Copilot 的响应：
- Copilot 会生成一段代码，通常包含 fs.promises 和 try...catch 块来处理异步读取和错误。
- 在代码块上方，您会看到按钮，如“Insert into Cursor”。点击它将代码插入到您的文件中。
迭代和改进：
- 如果您想让函数接受相对路径，可以在 Chat 中继续说：“这个函数现在假设路径是绝对的。如何修改它以支持相对于项目根目录的相对路径？”
- Copilot 会提供修改建议，您再次应用代码。
理解生成的代码 (询问模式)：
- 如果您对代码中的某个部分不理解，例如 fs.promises.readFile，可以选中那部分代码。
- 打开 Quick Chat (Ctrl+Shift+I 或 Cmd+Shift+I)。
- 输入 “Explain this.” (解释一下这个)。Copilot 会简要解释该代码的作用。
- 或者在主 Chat 面板中，确保 #selection 上下文存在，输入 “What does this code do?” (这段代码是做什么的？)。
生成测试 (代理模式):
- 选中最终的 readJsonFile 函数。
- 打开 Chat，输入 /test。
- Copilot 会尝试生成一个或多个使用 Node.js 内置模块或测试框架（如 Jest）的测试用例。您可以将这些测试用例复制到您的测试文件中。
使用 #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助手，最有效的使用方式是将其作为协作伙伴，结合您自身的专业知识和判断，共同完成任务。