现已发布!阅读有关 11 月的新功能和修复的信息。

在 VS Code 中开始使用 GitHub Copilot

本教程将引导你了解 Visual Studio Code 中 GitHub Copilot 的主要功能。了解如何开始使用 GitHub Copilot 扩展,以便在编辑器中获得 AI 驱动的代码建议,使用聊天对话重构代码,并使用智能操作修复代码错误。

注意

虽然我们在本教程中使用 TypeScript,但请注意,Copilot 还接受过大量其他语言和各种框架的训练。

有关你可以使用 VS Code 中的 GitHub Copilot 执行的操作的概述,请参阅 GitHub Copilot 概述

先决条件

  • 若要在 VS Code 中使用 GitHub Copilot,你必须安装 GitHub Copilot 扩展。安装此扩展时,还会安装 GitHub Copilot Chat 扩展。

  • 若要使用 GitHub Copilot,你必须在个人帐户中拥有 GitHub Copilot 的有效订阅,或者需要由你的组织分配席位。

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

获取你的第一个代码建议

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

  1. 打开 Visual Studio Code 并创建一个新的 JavaScript 文件 calculator.js

  2. 在 JavaScript 文件中,开始键入以下代码

    class Calculator
    

    Copilot 会自动以灰色暗淡文本(虚影文本)建议我们的 Calculator 类的相应方法。在我们的示例中,建议使用 addsubtract 方法。你收到的确切建议可能会有所不同。

    Screenshot of VS Code editor, showing Copilot suggesting the  method inside the  class.

  3. 若要接受建议,请按 Tab 键。

    恭喜!你刚刚接受了你的第一个 AI 驱动的内联建议。当你继续键入时,Copilot 会相应地更新内联建议。

  4. 对于任何给定的输入,可能会有多个建议。在类中键入以下代码以添加 factorial 方法

    factorial(n) {
    
  5. 将鼠标悬停在编辑器中的建议上,你会注意到有多个建议。

    Screenshot of VS Code editor, showing Copilot giving multiple suggestions for  when hovering over it.

    你可以使用箭头控件或使用按键绑定来显示下一个(⌥] (Windows, Linux Alt+])) 或上一个(⌥[ (Windows, Linux Alt+[)) 建议。

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

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

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

让我们使用内联聊天来帮助生成一个基本的 Express Web 服务器。

  1. 首先,将一个新的 TypeScript 文件 server.ts 添加到你的工作区。

  2. 现在,按键盘上的 ⌘I (Windows, Linux Ctrl+I) 以启动 Copilot 内联聊天。

    Copilot 内联聊天为你提供了一个聊天界面,你可以使用该界面询问有关活动编辑器中代码的问题。

    Screenshot of VS Code editor, showing the Copilot Inline Chat control.

  3. 在聊天输入字段中键入“添加一个简单的 Express 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. 选择接受或按 ⌘Enter (Windows, Linux Ctrl+Enter) 以应用建议的代码更改。

    恭喜!你已使用 Copilot 聊天通过聊天和自然语言生成代码。

通过 AI 聊天重构代码

你还可以使用内联聊天重构或改进编辑器中的现有代码。

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

  1. 在编辑器中,选择 server.ts 文件中的 3000 端口号,然后按 ⌘I (Windows, Linux Ctrl+I) 以启动内联聊天。

  2. 在聊天输入字段中键入“使用环境变量来表示端口号”,然后按 Enter 以发送聊天请求或提示。

    请注意 Copilot 如何更新现有代码以使用环境变量来表示端口号。

    Screenshot of VS Code editor, showing Inline Chat to use an environment variable for the port number.

  3. 选择接受或按 ⌘Enter (Windows, Linux Ctrl+Enter) 以应用建议的代码更改。

  4. 如果你对建议的更改不满意,你可以修改提示,并要求 Copilot 提供不同的解决方案。

    例如,你可以要求 Copilot 使用不同的环境变量名称来表示端口号。

使用 Copilot 聊天提出一般编程问题

当你使用新的代码库或探索新的编程语言时,你可能会遇到更一般的编码问题。Copilot 聊天允许你在侧面打开聊天对话,并保留你的问题历史记录。

  1. 从命令中心 Copilot 菜单打开聊天视图,或按 ⌃⌘I (Windows、Linux 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 聊天教程中的步骤,了解如何使用 Copilot 聊天来询问有关您特定代码库的问题。

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

较大的代码更改可能涉及对多个文件进行编辑。使用 Copilot Edits,您可以在编辑器中跨工作区中的多个文件获得 AI 驱动的内联建议。Copilot Edits 不会应用单个代码块,而是会在整个工作区中进行编辑。

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

  1. 从命令中心 Copilot 菜单中选择 打开 Copilot Edits,或按 ⇧⌘I (Windows Ctrl+Shift+I,Linux Ctrl+Shift+Alt+I

    Screenshot showing the Copilot menu in the Command Center, highlighting the Open Edit Session item

  2. 此时会打开 Copilot Edits 视图。请注意,server.ts 文件已添加到工作集中。

    工作集包含可以由 Copilot Edits 修改的文件。如果文件未添加,请使用*添加文件... 将文件添加到工作集中。

    Screenshot of the Copilot Edits view, showing the working set with the  file.

  3. 在聊天输入字段中输入将静态 HTML 页面作为主页返回并实现它。,然后按 Enter 开始新的编辑会话。

    请注意,Copilot Edits 进行了多项编辑:它更新了 server.ts 文件以返回静态 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. 如果您对结果满意,请选择 接受 以应用所有建议的更改。

    Screenshot of the Copilot Edits view, highlighting the Accept button to apply the changes.

    您还可以使用编辑器覆盖控件在不同的编辑文件之间导航并接受/放弃它们。

    Screenshot of the Copilot Edits view, highlighting editor overlay controls to navigate between edits and accept or discard them.

使用 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. 选择闪光以查看 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.

    您可以直接从聊天响应中选择 插入到终端 按钮,将建议的命令复制到终端中。

后续步骤

恭喜,您现在已经使用了人工智能来增强您的编码!在本教程中,您已成功在 VS Code 中设置了 Copilot,并使用了 Copilot 代码完成、Copilot 聊天和代码操作来帮助您更高效地进行编码。

  • 要了解有关 Copilot 聊天的更多信息,请继续阅读 Copilot 聊天教程

  • 要了解有关 Copilot Edits 的更多信息,请继续阅读 Copilot Edits 文档。

请观看我们在 YouTube 上的 高级功能 视频,深入了解如何使用 Copilot 进行重构、基于上下文的建议、单元测试等。