在 VS Code 中使用 GitHub Copilot

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。

先决条件

  • 若要使用 GitHub Copilot,必须拥有有效的 GitHub Copilot 订阅。 有关详细信息,请参阅“关于 GitHub Copilot 的计费”。

  • 若要在 Visual Studio Code 中使用 GitHub Copilot,必须安装 Visual Studio Code。 有关详细信息,请参阅 Visual Studio Code 下载页面。

在 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

    function calculateDaysBetweenDates(begin, end) {
    
  3. 要接受建议,请按 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

    function calculateDaysBetweenDates(begin, end) {
    
  3. (可选)如果有其他建议,可以选择查看。

    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

    function calculateDaysBetweenDates(begin, end) {
    
  3. 要仅接受建议的下一个字词,请使用以下键盘快捷键中的一种。

    操作系统接受下一个字词
    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

    function calculateDaysBetweenDates(begin, end) {
    
  3. 若要打开具有多个其他选项的新选项卡,请按 Ctrl+Enter。

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

从注释生成代码建议

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

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

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

    JavaScript

    // find all images without alternate text
    // and give them a red border
    function process() {
    

使用框架

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

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

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

    JavaScript

    // Express server on port 3000
    
  3. 要接受每行,请按下 Tab,然后按下 Enter。

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

    JavaScript

    // Return the current time
    
  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 的建议,请单击“对 LANGUAGE 禁用”。

      全局或为当前语言禁用 GitHub Copilot 的选项的屏幕截图。

后续步骤

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

  • GitHub Copilot:查看 GitHub Copilot 如何帮助你工作的实用示例。
  • “在 IDE 中使用 GitHub Copilot Chat”:了解如何要求 GitHub Copilot 提供信息和帮助。
  • “配置 GitHub Copilot”:这些指南提供有关如何将 GitHub Copilot } 配置为个人首选项的详细信息。
  • “管理 GitHub Copilot 的计费”:了解有关 GitHub Copilot 的计费的详细信息。
  • “GitHub Copilot 故障排除”:这些指南提供了有关 GitHub Copilot 故障排除的信息。

其他阅读材料

  • GitHub Copilot 网站
  • “关于 GitHub Copilot Individual”
  • “关于 GitHub Copilot Business”

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/527545.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ATM04-6P 安费诺汽车连接器6芯压线端子胶壳

ATM04-6P是一款压线端子胶壳,属于Amphenol(安费诺)品牌 ATM04-6P 规格信息: 制造商:Amphenol 产品种类:汽车连接器 RoHS:是 产品:Connectors 位置数量:6 Position 型式:Receptacle (Female) 线规量程:22 AWG to 16 AWG 系列:ATM 颜…

蓝桥杯真题Day48 倒计时7天 练了几道真题小程序+回溯剪枝应用一个小程序

[蓝桥杯 2023 省 A] 更小的数 题目描述 小蓝有一个长度均为 n 且仅由数字字符 0∼9 组成的字符串,下标从0到 n−1,你可以将其视作是一个具有n位的十进制数字num,小蓝可以从num 中选出一段连续的子串并将子串进行反转,最多反转一次…

RuleEngine规则引擎底层改造AviatorScript 之函数执行

https://gitee.com/aizuda/rule-engine-open 需求:使用上述开源框架进行改造,底层更换成AviatorScript ,函数实现改造。 原本实现方式 Overridepublic Object run(ExecuteFunctionRequest executeTestRequest) {Integer functionId executeT…

5G如何助力物流智能化转型

导语 大家好,我是智能仓储物流技术研习社的社长,你的老朋友,老K。行业群 新书《智能物流系统构成与技术实践》人俱乐部 整版PPT和更多学习资料,请球友到知识星球 【智能仓储物流技术研习社】自行下载 智能制造-话题精读 1、西门子…

移植内核linux-2.6.32.24遇见的问题和解决方法

目录 概述 1 配置编译环境 2 编译内核 2.1 配置内核 2.2 编译存在的问题 2.3 验证zImage 3 移植 yaffs2 3.1 下载yaffs2 3.2 为内核打上 yaffs2 补丁 3.3 配置和编译带 YAFFS2 支持的内核 3.3.1 配置 YAFFS2内核 3.3.2 编译带YAFFS2 支持的内核 3.4 验证带YAFFS2 支…

Mudbus协议CRC校验码C#

Mudbus协议CRC校验码C# 什么是modbus协议特点协议格式modbus-crc16校验原理方法帧校验CRC计算方法:例子 C#代码Demo源码下载 什么是modbus Modbus是一种串行通信协议,最初由Modicon(目前属于施耐德电气公司)于1979年开发 Modbus协…

机器学习知识点

1鸢尾花分类 鸢尾花分类问题是一个经典的机器学习问题,旨在根据鸢尾花的花萼长度、花萼宽度、花瓣长度和花瓣宽度等特征,将鸢尾花分成三个品种:山鸢尾(setosa)、变色鸢尾(versicolor)和维吉尼亚…

使用 proxySQL 来代理 Mysql

我有若干台云主机, 但是只有1个台vm 具有外部ip 而在另1台vm上我安装了1个mysql instance, 正常来讲, 我在家里的电脑是无法连接上这个mysql 尝试过用nginx 代理, 但是nginx只能代理http协议的, mysql 3306 并不是http协议 解决…

Leetcode面试经典150_Q14最长公共前缀

题目: 编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀,返回空字符串 ""。 思路A:横向/纵向扫描 Python: class Solution:def longestCommonPrefix(self, strs: List[str]) -> str:s "…

Mac 每次重启终端都要重新配置mysql环境变量解决办法

1、问题 Mac 每次关闭终端后,mysql环境配置就失效了,需要重新配置mysql环境变量 2、解决方法 在 " ~/.zshrc "文件添加" source ~/.bash_profile "即可 vim ~/.zshrc source ~/.bash_profile 3、验证 退出终端后重新打开终端 mys…

PDF锐化

PDF Shaper Ultimate(pdf转图片) 编辑->添加文件->选中一个要处理的pdf 操作->转换->PDF转为图片 ComicEnhancerPro设置(把图片锐化) PDF Shaper Ultimate(图片转pdf) 编辑-添加图片->选中所有锐化处理后的图片 转换->图片转为pdf(会把所有图…

3. Django 初探路由

3. 初探路由 一个完整的路由包含: 路由地址, 视图函数(或者视图类), 可选变量和路由命名. 本章讲述Django的路由编写规则与使用方法, 内容分为: 路由定义规则, 命名空间与路由命名, 路由的使用方式.3.1 路由定义规则 路由称为URL (Uniform Resource Locator, 统一资源定位符)…

Springboot使用教程

二、配置文件 SpringBoot使用一个全局的配置文件,配置文件名是固定的; •application.properties •application.yml 1.配置文件的作用: 修改SpringBoot自动配置的默认值;SpringBoot在底层都给我们自动配置好; Y…

HiveSQL之lateral view

lateral view是hiveQL中的一个高级功能,用于和表生成函数一起,来处理嵌套数组和结构的数据,特别是在处理复杂的数据结构如JSON或数组内嵌套数组时特别有用。它允许用户在每一行上应用TGF(表生成函数),将生成…

再探Java为面试赋能(二)Java基础知识(二)反射机制、Lambda表达式、多态

文章目录 前言1.4 反射机制1.4.1 Class对象的获取1.4.2 Class类的方法1.4.3 通过反射机制修改只读类的属性 1.5 Lambda表达式1.5.1 函数式接口1.5.2 Lambda表达式的使用 1.6 多态1.6.1 多态的概念1.6.2 多态的实现条件1.6.3 重载(Overload)和重写&#x…

odoo16 安装

1、安装 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 2、安装git brew install git 3、安装python3 brew install python3 brew install python3.10 -- odoo16 如果用python3.12 - 会报错 brew unlink python3.1…

Python数学建模学习-莱斯利(Leslie)种群模型

Leslie模型是一种用于离散时间的生物种群增长模型,经常用于描述年龄结构对种群增长的影响。在1945年,人口生态学家Patrick H. Leslie(莱斯利)为了研究具有离散年龄结构的种群,特别是对于有不同年龄阶段的生物&#xff…

nginx This request has been blocked; the content must be served over HTTPS问题处理

This request has been blocked; the content must be served over HTTPS问题处理 1.问题现象2.解决问题3.解决后的现象4.proxy_set_header x-forwarded-proto 作用 1.问题现象 Mixed Content: The page at https://www.ssjxx.cn/ssjy/viy-edu/index.html?systemCodeTW0010#/…

电脑与多台罗克韦尔AB PLC无线通讯的搭建方法分为几步?

在实际系统中,同一个车间里分布多台PLC,通过上位机集中控制。通常所有设备距离在几十米到上百米不等。在有通讯需求的时候,如果布线的话,工程量较大耽误工期,这种情况下比较适合采用无线通信方式。本方案以组态王和2台…

OpenCV单通道图像按像素成倍比例放大(无高斯平滑处理)

OpenCV中的resize函数可以对图像做任意比例的放大(/缩小)处理,该处理过程会对图像做高斯模糊化以保证图像在进行放大(/缩小)后尽可能保留源图像所展现的具体内容(消除固定频率插值/采样带来的香农采样信息损失)&#x…