AI干不掉程序员,但却能让一个程序员干两个程序员的活儿~

从两年多前 github copilot 正式上线以来,AI辅助编程逐渐改变了程序员的日常工作,曾经总是自嘲的CV工程师慢慢变成了TAB工程师。虽然这期间经常会看到一些什么AI取代程序员的文章,但我相信每个程序员心中有自己的理解,取代还是太远了,但是如果能熟练应用AI辅助编程,一个人干两个人的活倒是很有可能(牛马之魂崛起)~

我大概也是两年前开始使用 github copilot ,随着使用逐渐熟练,竟然已经开始对AI辅助编程有了依赖,那些简单逻辑AI能快速响应,生成可采纳代码,让我越来越不想动脑子去写那些数组处理、布局样式或者是原来需要自己手动CV的代码。

今天我就列举那些让我日常工作大幅提效的场景,顺便说一下,目前我使用的AI辅助编程插件已经变成了 腾讯AI代码助手 ,原因也很简单,就是它的响应速度更快,越快的响应速度,可以让我在思考具体逻辑之前先审视AI代码的合理性,毕竟我也不想代码逻辑已经想好了,然后写到一半AI才把后面的逻辑生成预览。先生成再调整一直是我使用AI的基本原则。

CSS补全

刚工作那会儿,最常做的事就是去MDN查找各种CSS属性的使用方式,其中像什么单(多)行省略、grid 布局、flex布局、媒体查询等尤为常见。后来流行了原子化CSS库,实际用下来也是要各种翻文档,而且同事也老是吐槽这东西写起来 HTML 的代码都是一大坨一大坨的,看着很乱。

AI辅助编程可以让CSS的编写彻底免去查询文档的过程,就比如单(多)行省略,合理的类命名可以让AI快速明白你的需求:

又比如涉及到CSS动画,只需要简单描述需求:

再看看最常见的布局问题,很多时候大家更愿意使用flex布局,一个原因可能就是它的属性好理解也好记,但其实我一直觉得grid布局更加强大,麻烦的就是每次想用都要去查文档,老是记不住那几个相关的属性,但有了AI辅助,我也更喜欢写一些注释了:

三方库API带出

日常开发中项目中经常会使用到第三方库,以往开发过程中涉及到三方API的使用避免不了查询文档,通过AI简单描述需求或者声明合理的变量名即可生成可用的代码,免去了大量查询文档的时间。

首先看个经典的三方库 dayjs ,我想在座各位应该大多数碰到这个库都要先把文档打开边查边写吧,比如我现在有个需求如下图:

如果在以前,这几个选项的验证都能让我抓狂几个小时,但现在没有这个问题了:

合理的命名加上上下文的理解,AI已经可以举一反三了,什么官方文档的这下可以从我的浏览器收藏夹扔掉了。

当然我们有时候也会在开发小程序或者uniapp这种集成API的框架里面开发,对于AI来说当然这也是没有问题的:

上半部先写了一个 logout 的方法,当光标聚焦到逻辑代码区域,AI助手自动生成了 logout 方法的实现,同样也用到了 uni 的弹窗API。

日常代码补全

要说AI编程提效最明显的场景应该就是日常代码的补全,因为日常代码中的简单逻辑有很多,而AI的快速响应提供大量简短可用的逻辑代码,切实提升了前端开发的效率。

首先看个上下文代码的补全,上半部定义了接口地址,下半部就自动生成API方法,省去了CV重复代码的时间。

然后是一个最常见的需求场景,动态表单字段的新增和删除,删除操作经常会导致各种BUG,我们可以看到删除方法AI自动给出了调用filter方法生成新数组的方式,免去了很多逻辑思考的时间。

再来看一个业务性更强的场景,我们需要把后端返回来的数据重新处理成新的数组,id和name都是字符串数组,AI自动生成了分离字符串生成新的对象数组的方法。

至于还有一些类似生成正则、mock数据等不是那么常见的场景,也就不一一举例了。

列举了以上几种实际开发的使用场景,我想说的就是,对于简单逻辑、简单代码段或者明显CV场景,不需要我们再一个一个代码敲出来,而是熟练使用AI辅助编程,一个TAB键省去大量重复简单的劳动,这才是AI最实际的应用。

其他

AI辅助编程一般都提供了CHAT交互,用处比ChatGPT多了一些针对编程场景的功能,但对于AI直接生成页面文件或者大段逻辑之类的,我还是不太信任,正确率暂且不表,就是代码风格或者代码可维护性都是一个未知数,与其绞尽脑汁想怎么描述自己的需求,不如立即新建文件,CV代码先把页面框架搭好,再慢慢通过上面的各种场景AI提效或许会更好。

总结

当然说到AI编程避免不了最近大火的 trae ,它集成了AI辅助编程和CHAT式沟通,所以说本质上和AI插件相差不多,作为程序员我们更多考虑的还是,能为我日常工作提效多少,在我看来,长时间使用AI辅助编程,提效30%应该是绰绰有余的,至于提效多出的时间是用来摸鱼还是多做点工作,那就另说了。

AI辅助编程终究是工具,无法完全替代各种实际业务场景中各位程序员的身影,工欲善其事必先利其器,现在给程序员的提效工具越来越多了,那是否意味着今天一个程序员干的活比十年前两个程序员做的都多了呢~

相关推荐
码客前端1 分钟前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
Komorebi゛1 分钟前
【CSS】圆锥渐变流光效果边框样式实现
前端·css
工藤学编程14 分钟前
零基础学AI大模型之CoT思维链和ReAct推理行动
前端·人工智能·react.js
徐同保14 分钟前
上传文件,在前端用 pdf.js 提取 上传的pdf文件中的图片
前端·javascript·pdf
怕浪猫15 分钟前
React从入门到出门第四章 组件通讯与全局状态管理
前端·javascript·react.js
欧阳天风23 分钟前
用setTimeout代替setInterval
开发语言·前端·javascript
EndingCoder26 分钟前
箭头函数和 this 绑定
linux·前端·javascript·typescript
郑州光合科技余经理27 分钟前
架构解析:同城本地生活服务o2o平台海外版
大数据·开发语言·前端·人工智能·架构·php·生活
沐墨染29 分钟前
大型数据分析组件前端实践:多维度检索与实时交互设计
前端·elementui·数据挖掘·数据分析·vue·交互
xkxnq32 分钟前
第一阶段:Vue 基础入门(第 11 天)
前端·javascript·vue.js