我做了一个 VSCode 插件版的 ChatGPT

2023-07-29,,

大家好,我是风筝

其实很早之前就想学学 VSCode 插件开发了,但是又不知道做什么,加上我这半吊子前端水平,迟迟没有动手。

最近 ChatGPT 火的一塌糊涂,我也一直在用,真的非常好用,有些问题之前需要 Google 搜索,现在用 ChatGPT 基本上都能直接解决,效率提升了不少。

但是吧,浏览器和 IDE 来回切换又很麻烦,所以我灵机一动,那就开发个 ChatGPT 插件吧,即可以学习学习 VSCode 插件开发,又可以做一个方便的效率工具,岂不是一举两得,美哉美哉。

于是我就动手写了下面这个插件,叫做 mini ChatGPT,现在已经发布到 VSCode 插件市场了。

有条件的同学可以安装一下,试试效果如何。

插件功能特点

界面简洁,没有多余的干扰;
像 ChatGPT 官网输出效果一致,打字效果实时输出;
支持两轮上下文(太多了浪费 tokens),大致等于支持上下文;
代码美化+格式化,并且可以一键复制,直接粘贴到 vscode 中;

插件安装

当然了,这是需要正确的上网姿势。

你可以直接在 VSCode 的商店直接搜索 mini ChatGPT安装。

也可以到应用市场上安装。

插件地址:https://marketplace.visualstudio.com/items?itemName=fengzheng.code-chatgpt-assistant

插件使用

    点击查看->命令面板,或者使用快捷键(MacOS: Shift + Command + P,Windows:Shift + Control + P
    输入 Chat 并回车。

    如果是首次使用,会弹出提示输入框,在此输入 ChatGPT 的 API。使用的就是原滋原味的 ChatGPT API 接口,官网上都写的很清楚,所以需要使用插件的小伙伴提供自己账号的 API key。下面有介绍如何获取ChatGPT API key。

    之后就可以使用啦

    如果之后想更换 ChatGPT 的 API key,在命令面板中输入 ChatGPT API 即可。

使用建议

此插件只有一个 webview 实现,打开之后独占一个 tab,可以设置向左或向右拆分,然后在左侧使用此插件向 ChatGPT 提问,右侧是代码文件,这样就不用来回切换了,而且可以将代码片段一键复制,然后直接运行。

获取 ChatGPT API key

    先准备好正确的上网工具,不要用亚洲节点。

    之后到 OpenAI 官网注册账号。

    到个人中心 创建一个 API key。

开发历程

作为一个后端开发,我的前端水平是非常一般的,所以代码中有瑕疵的地方还请见谅。对了,代码已经放到 GitHub 上了。

仓库地址:https://github.com/huzhicheng/vscode-ChatGPT

VSCode 插件开发,官方建议是用 TypeScript 开发,所以项目完全采用了 TS 开发。由于功能比较简单,没有那么多复杂的设置,由于边学边做,太复杂的也没考虑。整个插件的核心其实就是一个 webview,在webview中实现界面布局和样式,难点就在于webview与插件本身来回的数据传递,但也都是常规用法。

整个写代码的过程其实也就几个小时,当然过程中的遇到的一些问题我都是跟 ChatGPT 提问的,包括样式都是直接描述需求,ChatGPT 给我一个大致的框架,我再微调一下就可以了。

所以这样看下来,其实是我和 ChatGPT 合作开发的。

后来发布到应用商店,写 readme 介绍和使用说明花了一些时间。

问题和建议

目前的版本功能比较简单,没有 ChatGPT 官方的聊天记录列表功能,如果真的有人用的话,后期考虑加上。

由于ChatGPT 官方并未提供上下文的 API 支持,所以只能采用其他方式模仿上下文能力,目前的做法是记录前两轮提问和回答,然后在下次提问的时候,将前两轮的提问和回答告诉 ChatGPT ,并且明确告诉 ChatGPT,例如下面这样。

第一轮问题:你好。

第一轮回答:你好,请问有什么要帮忙的吗?

第二论问题:请帮我写一段 Python 爬虫抓取知乎回答的 demo。

第二轮回答:好的,下面是一段抓取知乎回答的 Python 示例。....省略多行代码。

第三轮问题:帮我改成 Java 的。

这时候,我会将实际的 prompt 改成下面这样的。

下面中括号部分是前两轮的问题和回答,只用作参考。[my question is:"你好",your anwser is:"你好,请问有什么要帮忙的吗?".my question is:"请帮我写一段 Python 爬虫抓取知乎回答的 demo。",your anwser is:"好的,下面是一段抓取知乎回答的 Python 示例。....省略多行代码。".]

下面引号包含的这部分是真正的问题:"帮我改成 Java 的。"

采用这种方式,几乎可以模拟上下文的操作,但是偶尔会出现错乱,这块儿还有优化空间,还会继续优化。

如果各位小伙伴使用过程中发现什么问题,或者有什么更好的建议,都可以加我好友直接跟我说。

欢迎捧场,赶紧用一用吧,觉得好用的话,可以推荐给身边的小伙伴也用一下。

我做了一个 VSCode 插件版的 ChatGPT的相关教程结束。

《我做了一个 VSCode 插件版的 ChatGPT.doc》

下载本文的Word格式文档,以方便收藏与打印。