我做了一个 VSCode 插件版的 ChatGPT

大家好，我是风筝

其实很早之前就想学学 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 的。"

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

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

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