2025年4月6日 星期日 3:15am

在 VS Code 中使用 GitHub Copilot

id="article_content" class="article_content clearfix"> id="content_views" class="htmledit_views">

Code 结合使用。

GitHub Copilot 是什么

GitHub Copilot 是一个可以帮助你更简单、更快速地编写代码的工具，由 GPT-3 提供支持。你只需编写所需代码的描述——例如，编写一个函数来生成一个随机数，或对一个数组进行排序——Copilot 就会为你创建它。

它不只是创建一种解决方案，而是创建多个，你可以选择你想要的一个。

在本教程中，我们将学习如何为 Visual Studio Code 设置 GitHub Copilot AI 工具，以及如何生成 JavaScript、React 和 HTML 代码。

如何安装 GitHub Copilot

在 VS Code 中使用 GitHub Copilot 的步骤如下：

  1. 首先确保你已经安装了最新版本的 Visual Studio Code。你可以从官方网站（https://code.visualstudio.com/）下载并安装。

  2. 打开 VS Code，点击左侧边栏的扩展图标（Extensions），或者按下快捷键 Ctrl+Shift+X（Windows/Linux）或 Cmd+Shift+X（Mac）。

  3. 在搜索框中输入 "GitHub Copilot"，找到名为 "GitHub Copilot" 的扩展，点击 "Install" 按钮进行安装。

  4. 安装完成后，重启 VS Code。

  5. 登录 GitHub Copilot。点击左上角的文件（File）> 首选项（Preferences）> 设置（Settings），在搜索框中输入 "GitHub Copilot"，找到 "GitHub Copilot: Sign In" 设置项，点击 "Edit in settings.json"，然后按照提示登录你的 GitHub 账户。

  6. 现在你可以在 VS Code 中使用 GitHub Copilot 了。当你编写代码时，GitHub Copilot 会自动为你生成代码片段和建议。你可以通过按下 Tab 键来接受建议，或者使用箭头键在多个建议之间切换。

关于 GitHub Copilot 和 Visual Studio Code

GitHub Copilot 在编写代码时提供 AI 对程序员的自动完成样式的建议。 有关详细信息，请参阅“关于 GitHub Copilot Individual”。

如果使用 Visual Studio Code，可以直接在编辑器中查看并合并来自 GitHub Copilot 的建议。 本指南演示如何在适用于 macOS、Windows 或 Linux 的 Visual Studio Code 中使用 GitHub Copilot。

先决条件

在 Visual Studio Code 中安装 GitHub Copilot 扩展

若要使用 GitHub Copilot，必须先安装 GitHub Copilot 扩展。

  1. 在 Visual Studio Code Marketplace 中，转到 GitHub Copilot 扩展页，然后单击“安装”。

  2. 此时会显示一个弹出窗口，要求打开 Visual Studio Code。 单击“打开 Visual Studio Code”。

  3. 在 Visual Studio Code 的“扩展: GitHub Copilot”选项卡中，单击“安装”。

  4. 如果以前未在 GitHub 帐户中授权 Visual Studio Code，系统会提示你在 Visual Studio Code 中登录到 GitHub。

    • 如果以前已在 GitHub 上的帐户中授权 Visual Studio Code，系统将会自动授权 GitHub Copilot。

    • 如果未收到授权提示，请单击 Visual Studio Code 窗口底部面板中的钟形图标。

      带有 GitHub Copilot 图标的 Visual Studio Code 任务栏的屏幕截图。 钟形图标用深橙色框标出。

  5. 在浏览器中，GitHub 将请求 GitHub Copilot 所需的权限。 若要批准这些权限，请单击“授权 Visual Studio Code”。

  6. 要确认身份验证，请在 Visual Studio Code 的“Visual Studio Code”对话框中单击“打开”。

查看第一个建议

注意：如果为 GitHub Copilot 启用了重复检测，则使用提供的代码示例时，可能会收到有限的建议或没有建议。 作为替代方法，你可以首先键入自己的代码，以查看来自 GitHub Copilot 的建议。 有关重复检测的详细信息，请参阅“在 GitHub.com 上配置 GitHub Copilot 设置”。

GitHub Copilot 为多种语言和各种框架提供建议，但尤其适用于 Python、JavaScript、TypeScript、Ruby、Go、C# 和 C++。 GitHub Copilot 还可以帮助生成数据库的查询。 以下示例使用的是 JavaScript，但其他语言的工作方式类似。

  1. 在 Visual Studio Code 中，创建一个新的 JavaScript (*.js) 文件。

  2. 在 JavaScript 文件中，键入以下函数标头。 GitHub Copilot 将自动以灰色文本建议整个函数正文，如下所示。 具体的建议可能会有所不同。

    JavaScript

    1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1">
class="hljs-ln-code"> class="hljs-ln-line">function calculateDaysBetweenDates(begin, end) {
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2">
    • class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

  • 要接受建议，请按 Tab。

    • 注意：**** 如果未看到建议，请确保已启用 GitHub Copilot。 应在 Visual Studio Code 窗口右下角看到 Copilot 图标。

    如果文件已配置为 GitHub Copilot 的排除内容，则状态栏中的图标将有一条对角线穿过。 将鼠标悬停在该图标上可看到工具提示，告知哪些设置已应用此限制。

    VS Code 中 Copilot 图标的屏幕截图，其中包含内容排除的工具提示。

    有关详细信息，请参阅“为 GitHub Copilot 配置内容排除”。

    查看替代建议

    对于任何给定的输入，GitHub Copilot 可以提供多个建议。 可以选择要使用的建议，或拒绝所有建议。

    1. 在 Visual Studio Code 中，创建一个新的 JavaScript (*.js) 文件。

    2. 在 JavaScript 文件中，键入以下函数标头。 GitHub Copilot 将向你显示建议。

      JavaScript

      1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">function calculateDaysBetweenDates(begin, end) {
      2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">
       class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    3. （可选）如果有其他建议，可以选择查看。

      class="table-box">
      OS查看下一个建议查看上一个建议
      macOSOption (⌥) 或 Alt+]Option (⌥) 或 Alt+[
      WindowsAlt+]Alt+[
      LinuxAlt+]Alt+[

    4. 或者，可以将鼠标悬停在建议上方，查看 GitHub Copilot 命令面板以选择建议。

    5. 若要接受建议，请按 Tab。若要拒绝所有建议，请按 Esc。

    部分接受建议

    你可能不希望全部接受 GitHub Copilot 建议。 可以使用键盘快捷键来接受建议的下一个字词或下一行。

    1. 在 Visual Studio Code 中，创建一个新的 JavaScript (*.js) 文件。

    2. 在 JavaScript 文件中，键入以下函数标头。 GitHub Copilot 将自动以灰色文本建议整个函数正文，如下所示。 具体的建议可能会有所不同。

      JavaScript

      1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">function calculateDaysBetweenDates(begin, end) {
      2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">
       class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    3. 要仅接受建议的下一个字词，请使用以下键盘快捷键中的一种。

      class="table-box">
      操作系统接受下一个字词
      macOSCommand+→
      WindowsControl+→
      LinuxControl+→

    4. 如果要接受下一行建议，则需要为命令 editor.action.inlineSuggest.acceptNextLine 设置自定义键盘快捷键。 有关设置自定义键盘快捷键的详细信息，请参阅“在环境中配置 GitHub Copilot”。

    5. 或者，可以将鼠标悬停在建议上方，查看 GitHub Copilot 命令面板以选择建议。

    在新选项卡中查看多个建议

    你可能不想获得 GitHub Copilot 提供的任何初始建议。 可以使用键盘快捷方式来提示 GitHub Copilot 在新选项卡中显示多个建议。

    1. 在 Visual Studio Code 中，创建一个新的 JavaScript (*.js) 文件。

    2. 在 JavaScript 文件中，键入以下函数标头。 GitHub Copilot 将向你显示建议。

      JavaScript

      1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">function calculateDaysBetweenDates(begin, end) {
      2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">
       class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    3. 若要打开具有多个其他选项的新选项卡，请按 Ctrl+Enter。

    4. 要接受建议，请单击建议下方的“接受建议编号”。 若要拒绝所有建议，请关闭选项卡。

    从注释生成代码建议

    可以在注释中使用自然语言描述要执行的操作，GitHub Copilot 会提供代码建议来实现你的目标。

    1. 在 Visual Studio Code 中，创建一个新的 JavaScript (*.js) 文件。

    2. 在 JavaScript 文件中，键入以下注释。 GitHub Copilot 将建议函数的实现。

      JavaScript

      1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">// find all images without alternate text
      2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">// and give them a red border
      3.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">function process() {
       class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    使用框架

    还可以使 GitHub Copilot 为 API 和框架生成建议。 以下示例使用 GitHub Copilot 创建将返回当前时间的简单 Express 服务器。

    1. 在 Visual Studio Code 中，创建一个新的 JavaScript (*.js) 文件。

    2. 在 JavaScript 文件中，键入以下注释，然后按 Enter。 GitHub Copilot 将建议 Express 应用的实现。

      JavaScript

      // Express server on port 3000
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    3. 要接受每行，请按下 Tab，然后按下 Enter。

    4. 键入以下注释，然后按下 Enter。 GitHub Copilot 将建议默认处理程序的实现。

      JavaScript

      // Return the current time
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    5. 若要接受每行，请按 Tab。

    启用或禁用 GitHub Copilot

    可以在 Visual Studio Code 中启用或禁用 GitHub Copilot。 Visual Studio Code 窗口底部面板中的 GitHub Copilot 状态图标指示 GitHub Copilot 是启用还是禁用。 启用后，图标的背景色将与状态栏颜色相匹配。 禁用后，图标的背景色将与状态栏颜色形成对比。

    1. 若要启用或禁用 GitHub Copilot，请单击 Visual Studio Code 窗口底部面板中的状态图标。

      Visual Studio Code 中底部面板的屏幕截图。 GitHub Copilot 图标用深橙色框标出。

    2. 如果要禁用 GitHub Copilot，系统会询问是全局禁用建议，还是要禁用当前正在编辑的文件的语言。

    后续步骤

    你已成功安装 GitHub Copilot 并收到了你的第一个建议，但这只是开始！ 以下是一些有用的资源，可帮助你对 GitHub Copilot 执行后续操作。

    其他阅读材料

    data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://zhengkai.blog.csdn.net/article/details/137527699","extend1":"pc","ab":"new"}">>
    注：本文转载自blog.csdn.net的Moshow郑锴的文章"https://blog.csdn.net/moshowgame/article/details/137527699"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
    复制链接
    复制链接
    相关推荐
    软件工程

    解决github无法克隆私有仓库，Repository not found问题（2024最新）
    一、背景这个问题出现，是你用了其他主机设备，需要重新clone私有库时，发现一直报找不到仓库，如下报错：remote: Repository not found.1二、解决方法（1）账号密码方式（已不支持，不推荐）之前有个解决方法，通过HT...
    2025-03-08 3675 11515
    软件工程

    【ubuntu+git】(已解决)fatal 无法访问 ‘https github.com…‘ Failed to connect to 127.0.0.1 port 9090 拒绝连接
    文章目录1 背景2 解决1 背景前段时间用了某些特殊的上网方式，结果用git工具clone一个项目的时候，报了如下错误：很快我意识到是因为代理服务导致的，但在网上找了好久都没有发现有用的解决办法，不过最后成功摸索出来了。2 解决Step1：...
    2025-03-08 3785 9638
    软件工程

    一文详解开源ETL工具Kettle!
    一、Kettle 是什么Kettle 是一款开源的 ETL（Extract - Transform - Load）工具，用于数据抽取、转换和加载。它提供了一个可视化的设计环境，允许用户通过简单的拖拽和配置操作来构建复杂的数据处理工作流，能够...
    2025-03-08 2533 13830
    软件工程

    git 代码提交规范，feat，fix，chore都是什么意思?
    写到前面经常看到别人提交的代码记录里面包含一些feat、fix、chore等等，而我在提交时也不会区分什么，直接写下提交信息，今天就来看一下怎么个事，就拿element-plus举例来看一下其实这么写是一种代码提交规范，当然不是为了炫技，主...
    2025-03-08 2522 10044
    发表评论

    评论记录：

    未查询到任何数据！