一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情。
前言
活动不停,更文不息。既然开了一个头,那就要继续写起文章走,都参与了四月更文挑战活动那怎么也要完成第一关嘛,誓将卷进行到底!
背景
前一久,在睡觉前刷到一个短视频,是介绍GitHub Copilot这一编码插件的,视频中讲解了GitHub Copilot是一款基于AI
的、应用于写程序场景的工具,其作用是在程序员写程序的过程中,帮忙写出接下来的一句或者一段代码;而且视频还演示了在编辑器里面只写出一句注释,它就能根据注释写出相应的代码。嗯???这么牛啤的么?瞬间就有了兴趣,瞌睡一下子就醒了,赶紧起来跟着视频操作了起来,故就有了这篇介绍GitHub Copilot安装和使用的文章。
介绍
在聊这个GitHub Copilot开始之前,我在掘金上搜索了一下相关的文章,发现都是聊它如何如何好用,有什么功能,就是没有人介绍它如何安装,怎么配置才能使用。安装都没能安装上怎么能让人和你一起感同身受呢,所以这篇文章会很细致的告诉你如何在编辑器里面安装并使用它,go!→
什么是GitHub Copilot?
官网地址:https://copilot.github.com/#faqs
GitHub Copilot是一位人工智能结对程序员。GitHub Copilot由OpenAI Codex开发的新AI
系统提供支持,并且即将在Visual Studio Code中推出,它旨在帮助程序员更快地编码。它基本上从你正在处理的代码中提取上下文,建议整行或整个函数。
GitHub Copilot如何工作?
它可以通过分析您的编码方式来建议完整的代码行或整个功能。GitHub Copilot可以从用户评论中组合代码,并通过读取你声明的函数名称来预测你的代码。它允许你循环查看替代建议并手动编辑建议的代码。它会自动填充重复代码,或为你的方法创建单元测试。
GitHub Copilot编辑器扩展将你的评论和代码发送到GitHub Copilot服务,然后该服务使用OpenAI Codex来合成和建议代码。实际上,它的工作原理是通读全球GitHub存储库上的所有开源代码,然后收集数据并尝试找到与之相关的最佳代码!据说它可以很好地处理重复的代码模式,因此用户可以让它生成其余的代码。AI
助手还可以帮助你学习一门新的编程语言。
参考资料:GitHub Copilot: All you need to know——作者:Ayushi Rawat
安装并使用
如何查找到GitHub Copilot?
打开Github网站,在左上角搜索'GitHub Copilot'
,点击进入即可,如下图:
根据结果,查询到的是它的文档仓库,如下图:
进入仓库可以看到它可以支持4中代码编辑器,如下图:
根据自己常用的编辑器,选择进入相应的文档进行了解安装及使用步骤。这里主要介绍它在Visual Studio Code编辑器里面的使用,所以进入的VS Code的文档,如下图:
这里可以看到GitHub Copilot的一些安装使用步骤,只是提供的是英文文档,理解和查看相对来说不是那么友好,所以后续我会一步步来讲解它是如何在VS Code上面安装使用的,见下文→
在VS Code上如何安装及配置?
打开VS Code编辑器,点击扩展
进入扩展商店页面并搜索'github copilot'
,如下图:
接着,在搜索结果里面点击选择Github Copilot,可以看到详细信息,点击安装即可,如下图:
很快就能安装完成好插件了。
安装好之后,VS Code会提示使用Github登录。
点击允许之后就会激活它,它会自动打开提示页面,要求进行认证,如下图:
接着就需要你使用Github注册的邮箱账号和密码进行登录,如下图:
登录之后,会向你的邮箱发送一个验证,这时就需要你将收到的验证输入下图:
验证码输入正确之后,就会提示你成功了,如下图:
到这里就意味着你的VS Code已经配置好了GitHub Copilot插件了,接下来你就可以愉快地去体会它的强大了!
在VS Code上如何使用?
既然上面都已经安装并配置好了,那激动的心颤动的手,我们下面就一起搞一手,看看它是不是那么牛啤,整!→
首先新建一个test.html
文件,先试试它文档上提供的例子,创建一个计算两个日期之间天数的函数calculateDaysBetweenDates()
看看能不能成功,如下图:
我擦,神奇吧!它居然知道我要创建这么一个函数,而且字母还一个不差,牛呀!可以看到灰色颜色的代码
就是Copilot
自动提示我们的,我们只需要按一下Tab键
就能获得该段代码。既然函数创建好了,正确与否我们还是要来验证验证的,看下图:
居然没问题,真有你的👍;那下面再试试根据注释来写代码么,看看是不是也是真的,如下图:
我只是输入一个手写冒泡
,它就提示是不是想写冒泡排序
,选择是,回车
等一下它就直接把代码显示出来了,牛啤,真的牛啤!👍
如果在提示的时候觉得代码不是那么清楚,可以在键盘上按下Ctrl+Enter键
之后,就会出现一个框出现另外一些实现代码供你选择,如下图:
它其实还能根据编辑器上下文判断你接下来想写什么代码并给你进行建议,如下图:
从上面这个动图可以看到,我又创建了一个快速排序
函数,然后我写了一个注释比较
,它就自动的询问是不是要比较快速排序和冒泡排序的性能
,所以它是真有一套,不得不服它是真的牛啤呀!👍
它其实提供了一些快捷键,方便我们在使用它时更加便捷,下图所展示的就是它的文档提供的一些快捷键列表:
Copilot
可以支持十几种语言,与 Python、JavaScript、TypeScript、Ruby 和 Go等主流语言配合效果更佳。
至此,Github Copilot的安装和使用方法就介绍结束了,对于如此强大的代码插件,还是建议大家去亲身感受它的魅力,然后一起在评论区探讨探讨它的强大之处吧→
感想
对于我这一段时间的体验来说,更多的是对它的惊叹:它在我停止敲击键盘的任何一刻,就能给出接下来对本行代码内容补全的建议,只要我停下来,它就会蹦出它认为我接下来想写的内容,而且延迟基本不会慢于我大脑的思考速度。最神奇的是,它出具的建议的80%以上是我想要的代码片段,甚至还提供得有备选建议,并且它自身还在不断进行学习,跟随着时间的推移,它后面会给出更加优秀的代码片段建议,真的是太牛了!
虽然网上对它是褒贬不一,但是在我这里它是神奇的,它并不会影响实际工作中的开发效率,反而有时会提升一点开发时间。有人会问它能写出完美的代码么?现在可能还是有缺陷,现在的它只是在尝试地去了解你的意图并尽可能生成最好的代码给到你建议,但是是否真正符合你预期需求就需要自己去斟酌筛选。在不远的将来,我相信它一定会写出完美的代码并替代一部分程序员(瞬间危机感就来了)。尽管现实会如此残酷,但是我还是希望它能够越来越强大,希望它能带动一次变革!
最后,xdm看文至此,点个赞👍再走哦,3Q^_^
往期精彩文章
- 如何使用React-sortable-hoc和React-draggable拖拽组件实现产品需求?
- 聊聊前端如何实现复制粘贴功能及Github上提请代码PR的具体流程?
- (建议收藏)快来看看最值得拥有且最详细的Git使用教程
- (建议收藏)快来看看我们团队是如何制定前端开发规范的
- (建议收藏)前端开发中常见的浏览器兼容性问题及解决方案大汇总
- 如何在前端项目中对页面元素进行放大缩小操作?
- 聊聊如何在React项目中使用Antd的Table组件实现Echarts的热力图效果?
- 如何在Vue或React项目中引入外部字体并使用?
- 如何在React项目中使用高德地图插件并封装弹窗组件呢?
- 数据可视化-如何在React项目中使用Echarts插件并封装图表组件?
- 快来看看我是如何更改Antd中DatePicker周选择器默认设置的?
- 如何封装Vue水印组件和 React中如何使用水印组件?
- 最强富文本编辑器?TinyMCE系列文章【3】
- 最强富文本编辑器?TinyMCE系列文章【2】
- 最强富文本编辑器?TinyMCE系列文章【1】
- 在React项目中实现仿饿了么Checkbox多选按钮样式的效果组件
- 2022第一次更文:前端项目实战中的3种Progress进度条效果
- 2022年前端技术趋势:你不进来看看,怎么赚它一个小目标?
- 假如古代有程序员写总结,大概就是这样吧 | 2021年终总结
后语
伙伴们,如果觉得本文对你有些许帮助,点个👍或者➕个关注在走呗^_^ 。另外如果本文章有问题或有不理解的部分,欢迎大家在评论区评论指出,我们一起讨论共勉。