阅读(90) 书签 (0)

快速入门

2024-11-28 18:41 更新

前置条件

  • 要在 VS Code 中使用 GitHub Copilot,您必须具有 GitHub Copilot 扩展。安装此扩展时,还会安装 GitHub Copilot Chat 扩展。
  • 要使用 GitHub Copilot,您必须在个人帐户中拥有 GitHub Copilot 的有效订阅,或者您的组织需要为您分配一个席位。

按照以下步骤通过在 VS Code 中注册订阅并在 VS Code 中安装 Copilot 扩展,在 VS Code 中设置 GitHub Copilot。

获取您

获取您的第一个代码建议

要在 VS Code 中开始使用 GitHub Copilot,您无需执行任何特殊操作。当您在编辑器中键入代码时,Copilot 会自动在编辑器中为您提供代码建议,以帮助您更高效地编码。

  1. 打开 Visual Studio Code 并创建一个新的 JavaScript 文件calculator.js。
  2. 在 JavaScript 文件中,开始键入以下代码:class Calculator CopyCopilot 会自动为我们的 Calculator 类建议一个方法,采用灰色灰色文本(虚影文本)。在我们的示例中,建议使用 add 和 subtract 方法。您收到的确切建议可能会有所不同。Screenshot of VS Code editor, showing Copilot suggesting the  method inside the  class.
  3. 要接受建议,请按 Tab 键。祝贺!您刚刚接受了您的第一个 AI 驱动的内联建议。当您继续键入时,Copilot 会相应地更新内联建议。
  4. 对于任何给定的输入,可能有多个建议。在类中键入以下代码以添加阶乘方法:factorial(n) { Copy
  5. 将鼠标悬停在编辑器中的建议上,并注意有多个建议。Screenshot of VS Code editor, showing Copilot giving multiple suggestions for  when hovering over it.您可以使用箭头控件或使用键绑定来显示下一个 (Alt+]) 或上一个 (Alt+[) 建议。

AI 驱动的代码补全可以帮助您生成样板代码或重复代码,让您留在开发人员流程中并专注于更复杂的编码任务。

使用内联聊天生成基本 Web 服务器

通过 Copilot Chat,您可以在 VS Code 中与 Copilot 开始聊天对话,以使用自然语言询问有关代码的特定任务。

让我们使用 Inline Chat 来帮助生成一个基本的 Express Web 服务器。

  1. 首先,将新的 TypeScript 文件server.ts添加到工作区。
  2. 现在,按键盘上的 Ctrl+I 调出 Copilot 内联聊天。Copilot Inline Chat 为您提供了一个聊天界面,可让您询问有关活动编辑器中代码的问题。Screenshot of VS Code editor, showing the Copilot Inline Chat control.
  3. 在聊天输入字段中键入“添加简单的快速 Web 服务器”,然后按 Enter 将提示发送到 Copilot。请注意,Copilot 在编辑器中返回流式响应。响应是简单的 Node.js Express Web 服务器的实现。Screenshot of VS Code editor, showing the Copilot Inline Chat response for adding an Express web server.
  4. 选择 Accept 或按 Ctrl+Enter 以应用建议的代码更改。祝贺!您已使用 Copilot Chat 通过聊天和自然语言生成代码。

通过 AI 聊天重构代码

您还可以使用 Inline Chat 来重构或改进编辑器中的现有代码。

请注意,我们的 Web 服务器当前使用静态端口号 3000。让我们将其更改为使用端口号的环境变量。

  1. 在编辑器中,选择 server.ts 文件中的 3000 端口号,然后按 Ctrl+I 启动内嵌聊天。
  2. 在聊天输入字段中键入“use an environment variable for the port number”,然后按 Enter 键发送聊天请求或提示。请注意 Copilot 如何更新现有代码以使用端口号的环境变量。Screenshot of VS Code editor, showing Inline Chat to use an environment variable for the port number.
  3. 选择 Accept 或按 Ctrl+Enter 以应用建议的代码更改。
  4. 如果您对提议的更改不满意,可以修改提示并要求 Copilot 提供不同的解决方案。例如,您可以要求 Copilot 为端口号使用不同的环境变量名称。

使用 Copilot Chat 解决一般编程问题

当您在新的代码库中工作或探索新的编程语言时,您可能会遇到更通用的编码问题。Copilot Chat 可让您在侧面打开聊天对话,并跟踪您的问题历史记录。

  1. 从 Command Center Copilot 菜单打开聊天视图,或按 Ctrl+Alt+I。Screenshot of VS Code editor, showing the Copilot Chat view, highlighting the Copilot menu in the Command Center. 提示您可以随时从命令中心菜单访问不同的 Copilot 功能。
  2. 在聊天输入字段中键入“什么是递归?”,然后按 Enter 将请求发送到 Copilot。Screenshot of VS Code editor, showing the Copilot Chat view containing the answer to what recursion is. The result contains both text and a code block.请注意聊天响应如何包含富媒体搜索结果,包括文本和代码块。聊天响应中的代码块支持 IntelliSense,它使你能够通过将鼠标悬停在方法和符号上来获取有关它们的信息,或者转到它们的定义。
  3. 按照 Copilot Chat 教程中的步骤,了解如何使用 Copilot Chat 询问有关特定代码库的问题。

使用 Copilot Edits (预览版) 跨多个文件进行编辑

较大的代码更改可能涉及对多个文件进行编辑。借助 Copilot Edits,您可以在编辑器中跨工作区中的多个文件内联获取 AI 支持的建议。

让我们使用 Copilot Edits 在 Web 服务器响应中返回 HTML 文件的内容。

  1. 从命令中心 Copilot 菜单中选择打开 Copilot 编辑,或按 Ctrl+Shift+I。Screenshot showing the Copilot menu in the Command Center, highlighting the Open Edit Session item
  2. 此时将打开 Copilot Edits 视图。请注意,server.ts 文件已添加到 Working Set(工作集)。工作集包含可由 Copilot 编辑修改的文件。如果未添加文件,请使用 *Add Files... 将文件添加到工作集。Screenshot of the Copilot Edits view, showing the Working Set with the  file.
  3. 输入 Return a static html page as the home page 并实施它。,然后按 Enter 键以启动新的编辑会话。请注意,Copilot Edits 会更新 server.ts 文件,以在 Web 服务器响应中返回静态 HTML 页面。它还会向工作区添加新的文件index.html。Screenshot of VS Code editor, showing the Copilot Edits response for returning a static HTML page in the web server response.
  4. 如果您对结果感到满意,请选择 Accept (接受) 以应用所有建议的更改。Screenshot of the Copilot Edits view, highlighting the Accept button to apply the changes.

使用 Copilot 修复编码错误

除了内联完成和聊天对话之外,GitHub Copilot 还可用于 VS Code 中的不同位置和整个开发人员流程。您可能会通过 VS Code 用户界面中的闪烁图标注意到 Copilot 功能的存在。

编辑器中的 Copilot 编码操作就是这样一个位置,只要由于编译器错误而出现红色波浪线。让我们看看 Copilot 如何帮助解决编码错误。

  1. 打开您之前在编辑器中创建的 server.ts TypeScript 文件。请注意,该 import express from 'express'; 语句包含一个红色波浪线。如果将光标放在红色波浪线上,则可以看到 Copilot 闪烁。Screenshot of VS Code editor, showing the Copilot sparkle because of an error with the express import statement.
  2. 选择 sparkle 以查看 Copilot 代码操作,然后选择 “使用 Copilot 修复”。Screenshot of VS Code editor, showing the Copilot code actions, highlighting .
  3. 请注意,Copilot 内联聊天会出现,其中预先填充了错误消息和解决问题的解决方案。Screenshot of VS Code editor, showing the Copilot Inline Chat proposing to install the express npm package to solve the problem.您可以直接从聊天响应中选择 Insert into Terminal (插入到终端) 按钮,以在终端中复制建议的命令。