VSCode初体验chatGPT

9,379 阅读1分钟

最近chatGPT火出圈了,听说可以写代码,前端程序媛坐不住了,摸索后找到了一个最简单的使用方法。

打开VSCode,点击扩展,这里要用到1个插件,指路插件作者juejin.cn/post/717577…

输入“chatGPT中文版”,如图,点击安装:

Snipaste_2023-02-11_10-43-12.png

往下滑动,可以看到2种使用方式。

image.png

我个人选择了方式一获取API keys(具体购买方式请自行上网搜索,某鱼某宝都有),回到主页面,点击鼠标打开命令面板,或者使用快捷键(ctrl+shift+p/command+shift+p)打开命令面板。

image.png

在命令面板输入ChatGPT,选择 ChatGPT: 切换成国内/国外模式(将会重启VSCode)

image.png

回车后,会跳到这个页面,输入你的API keys,回车。

image.png

来到这个页面,左下角输入框输入文字,就可以开始愉快地聊天了。

image.png

第一次安装完之后,下一次使用可以直接点左边的这个图标

image.png

体验1:用vue和react写HelloWorld,代码正确。

image.png

体验2:加大难度,用vue写一个登录页。代码完全正确,而且还很贴心地有注释。

image.png

体验3:再加大难度,用vue和element写一个登录页。

image.png

image.png

结果出现,看到这里我倒吸一口凉气,安装vue-cli,安装element,导入element,编写表单,提交表单,表单验证,这不就是我们前端平时的工作流程吗?chatGPT居然逻辑清晰步骤完整地做到了,而且完全没有错误,瞬间感觉危机四伏。

呜呜呜我还想保住饭碗,滚去学习了。