近段时间来,人工智能技术在各个领域取得了巨大的突破,其中也包括代码编写领域。我也是也感受了一段时间,从最初的持怀疑态度,到现在基本都是在面向AI编程,以前遇到代码相关的问题,我会去问google,问百度,现在则是优先问chatgpt
,下面和大家一起感受一下
从实现一个业务需求开始
最近项目中有一个需求是这样的,需要将若干个相同尺寸的base64图片合成为一张新的base64图片
,对于canvas
比较陌生的我来说,这个需求确实有点棘手,好在可以求助chatgpt
,让我们一起来看看chatgpt
帮忙写出的代码
// 此处为提供给chatgpt的提示词
请帮我实现一个ts版本的函数,该函数有2个参数,第一个参数base64图片数组,第二个参数是一个对象包含宽和高,该函数需要将base64图片数组中的每个非透明像素点合并为一个新的base64
经过验证,这个函数完全能满足我的需求。如果放在以前,我可能要先去了解canvas
相关的api
,然后去搜索一些相似案例,然后自己进行尝试,虽然最后也能解决,但是肯定没有在chatgpt
的帮助下完成效率高。
生成类型定义
自从使用ts
以后,我感受到它给我们许多好处,也经常为需要定义大量的字段类型而烦恼, 自从有了chatgpt
我就不用再对着接口数据一个一个的手动去定义它的类型直接将数据丢给chatgpt
,让它帮助我生成ts类型定义
,这在数据量较大时候帮我节节省大量的时间以及重复工作
除了上述能力之外,我还体验了让它帮我们优化重构代码
,检查代码中的错误
,以及写一些工具函数并生成对用的测试用例
,甚至还可以将代码从一个技术栈切换到另一个技术栈
,例如从vue3
切换到react
,均有不错的效果
除了chatgpt
之外,copilot
也帮我提升了很多开发效率,下面就来感受一下copilot
的能力
逻辑联想
下图是我想要实现一个按钮的禁用逻辑,我刚写下部分代码,copilot
就帮我联想出了完整的代码,我只需要按一下tab
,就完成了这个需要3行代码
才能实现的逻辑
下图是我需要对一个图片进行导入,这里我先是在template
里面对图片进行了定义,然后我在script
里面对它进行引入,写到一半,copilot就已经帮我智能的联想出了这张图片的正确路径
下图是我需要在文字后面插入个箭头图片,但是最后一个文字后面不需要,copilot
仍然可以准确猜想出我的想法
下图实现了一个手机号的校验,可以看到我只输出了注意和定义了函数的名称(网速够快的话,甚至不需要定义函数名字,)之后,copilot
就已经可以帮我们实现对用的代码了,对于正则类的一些工具函数,copilot
游刃有余
下图是登录流程中的校验逻辑,可以看到在使用copilot
的情况下,可以节省多少时间
上传文件逻辑也能很好的支持,如果没有copilot
,这些代码你需要耗费多长时间,而在copilot
的帮助下,几秒钟就可以完成
下图是一个图片的导入,在上文<img src="@/assets/images/prev.png" class="prev-btn" />
的帮助下, copilot
准确的帮我们联想出了我们接下来的操作
同时在我们对其进行事件逻辑编码的时候,也能进行友好的支持
样式联想
当我需要自定义滚动条的颜色,可以看到我在输入到一半的时候,copilot可以帮我联想出完整的属性名称,同时也帮我联想出了一些属性值(虽然不是我想要的)
同时也可以对属性进行补全,例如这里我写完数字之后自动联想出了px
对于css这一块,copilot
显得比较鸡肋,虽然copilot
联想出了大量的代码,但大部分都不是我们想要的代码,主要原因还是在于css
的属性定制性太大,copilot
很难联想出来的准确的代码,当遇到这种情况时,我们无需理会就行,继续往下写就行了,只有当遇到我们想到的代码时才按下tab
键
总结
通过以上内容,我想大家可以感受copilot
和 chatgpt
已经非常强大,可以大大提高了我们的开发效率。然而我在使用过程中也遇到了一些问题,首先是他们对于稳定的网络环境依赖很高,这一点至关重要。其次chatgpt
免费版已经足够我们使用,但copilot
并不是免费的,需要付出一定的成本。最后在使用过程中,他们也并不是每次都能生成完美的代码,根据我的使用体验来说,想要提高它们生成的代码准确率,我们需要提供尽可能多的上下文信息,并且为变量命名选择语义化的名称。