【场景方案】前端如何结合GPT提升我们的开发效率，个人经验总结，不定期更新~

不得不说AI生态的发展真的很快，文章发布后的3个月就能把我之前写的内容心得颠覆了，删了文章80%的内容，重写一遍，哈哈哈哈~

---

AI模型的选择

截至到2024年3月14号，我仍然推荐GPT4，国内的大模型在编程这块目前还是比不上。

提一下，国内那些对接了GPT key的套壳网站就没必要去用了，基本上要么充好多钱，要么签到领token。

---

使用途径推荐

自己去github想办法学习怎么科学上网，为了我这篇文章的存活我不能详细讲这块，抱歉~

能科学上网后，直接用字节扣子（Coze）的海外版，可以免费使用GPT4。

国内版的只有云雀大模型可以使用。

---

Coze海外版简单使用

进入页面登陆，然后选择创建机器人：

会有一个弹窗，填好机器人的基本信息后确认进到一个新的页面，把模型切换成GPT4：

然后在最右边的窗口里就可以使用了。

不过这个方式使用有点不爽，对话区才这么一点点，我推荐直接去机器人商店，找别人做好的发布的GPT4角色：

打开后：

开用~

我这里推荐下我发布的AI角色：前端代码审核组长。

---

GPT4提问技巧心得

有时候提问的方式合理，容易得到更好的答案，下面我介绍几个提问技巧

从整体再到局部，再逐步补充

在与GPT交流时，不要一开始就急于将所有需求全部告诉它，因为GPT可能无法在第一次提问时就理解你真正想要的答案。

所以，不要一次性给AI分配过多的任务。相反，你可以先提出一个整体大纲，然后再逐步细化其中的某个点。这种方式更有可能获得接近你所想要的答案，并且更有条理性和全面性。

例如我想做个中后台的登录登出流程功能，那么首先要梳理大纲（例子的图还是以前的旧图，意会就行了）：

然后开始细化前端整体步骤：

再继续细化一个具体步骤：

他后面开始有代码展示了。

这样子提问的好处是，你和他对整体功能的实现大纲同步了，思路同步了，你们后续的对话主题不是割裂的，出现偏差回答的概率大大降低。

再举个编程中的例子。

例如咱们要对axios进行一个在中小型项目中比较可靠的二次封装，首先让他给个最简单的封装实现：

然后咱们让他补充一下token在请求头中的设置：

以此类推，不断地把api.js这个文件完善，最终咱们得到的就是一个可靠的二次封装方法了。

举例子说明

有时候，我们的问题可能比较“定制化”，意味着它们具有特殊性和独特性。在这种情况下，仅仅通过描述，对方可能无法完全理解你的意思。为了更好地沟通，可以给出一些例子作为思路参考，以帮助对方更准确地理解你的问题和需求。

例如我要写个工具函数：

给的信息尽量详尽

在与GPT进行提问时，为了让它能够更准确地理解你的意思，你应该尽量提供详细的问题描述。最好的方式是列出具体的条目或要点，以便GPT能够更好地把握问题的核心和细节。

例如提问：

我是一名学生，想向老师请个病假，帮我写个假期条，要求：
1.语气正式
2.对老师用敬语称呼
3.病因是发烧，症状你自由发挥
4.还要表达来不了学校的惋惜之情

学会即时放弃

如果对方一直无法给出正确答案，不要再优化提问方式了，立马放弃，自己想办法去解决，不要把自己耗死在里面。

设置prompt

未来补充~

使用变量记住之前的信息

未来补充~

---

编辑器中的AI工具

现在很多编辑器也出了结合GPT能力的代码辅助插件，这里就推荐几个。

Copilot：国外的一个编辑器AI插件，基于GPT-4深度定制，收费（需翻墙）。
CodeGeex、TalkX、通义灵码：国内Copilot的平替，目前不收费。

他们的功能一般都是：

• 更加智能的代码补全工具
• 通过注释自动生成代码
• 一键生成注释
• 内置对话工具
• 代码翻译
• 单元测试

还有个是一个集成了GPT的客户端编辑器Cursor，支持vscode插件导入。

我个人还是非常推荐vscode去装个AI插件的，真的有用。使用方法去他们的官网上看看就懂了。

---

尾巴

如果你有好的补充，欢迎评论区留下你的评论。

我后续也会不断地完善文章，敬请期待~