我做了一个 VSCode 插件版的 ChatGPT

news2024/11/25 22:48:54

大家好,我是风筝,公众号:「古时的风筝」

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

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

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

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

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

插件功能特点

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

插件安装

当然了,这是需要正确的上网方式。

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

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

插件地址:插件市场查看下载

插件使用

  1. 点击查看->命令面板,或者使用快捷键(MacOS: Shift + Command + P,Windows:Shift + Control + P
  2. 输入 Chat 并回车。
  3. 如果是首次使用,会弹出提示输入框,在此输入 ChatGPT 的 API。使用的就是原滋原味的 ChatGPT API 接口,官网上都写的很清楚,所以需要使用插件的小伙伴提供自己账号的 API key。下面有介绍如何获取ChatGPT API key。
  4. 之后就可以使用啦
  5. 如果之后想更换 ChatGPT 的 API key,在命令面板中输入 ChatGPT API 即可。

使用建议

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

获取 ChatGPT API key

  1. 先准备好正确的上网方式。

  2. 之后到 OpenAI 官网注册账号。

  3. 到个人中心 创建一个 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 的。”

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/513771.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

StarRocks 3.0 极速统一的湖仓新范式

2023 年 4 月,StarRocks 3.0 版本正式发布,正式开启了 StarRocks 极速统一的新篇章。从 OLAP 到 Lakehouse,从存算一体到存算分离,从 ETL 到 ELT,经过两个大版本后 StarRocks 在为用户创造极速统一的数据分析新范式上有…

视频转二维码怎么操作?简单一步在线生成视频二维码

当今各种各样的视频、电影、电视剧短视频等丰富这我们的生活。但是视频的体积一般都比较大不方便保存和传播,这时候我们就可以把视频、电影等做成二维码图片。扫一扫就能随时随地的观看,非常的方便。那么,要怎么操作呢? 一、什么工…

如何在MySQl数据库中给已有的数据表添加自增ID?

前言: 由于使用MySQL数据库还没有多久的缘故,在搭建后台往数据库导入数据的时候发现新增的表单是没有自增id的,因次就有了上面这个问题。解决方法1、给某一张表先增加一个字段,这里我们就以event_20230417这张表来举例,在数据库命令行输入下面…

滴水逆向三期笔记与作业——02C语言——03 数据类型_IF语句

OneNote防丢失。 海哥牛逼。 目录 一、ASCII编码二、GB2312-80编码三、全局变量和局部变量四、分支结构五、数组作业12345 一、ASCII编码 1、ASCII 码使用指定的 7 位或 8 位二进制数组合来表示128或 256 种可能的字符。 2、标准 ASCII 码使用 7 位二进制数来表示所有的大写和…

SSM框架学习-AOP介绍及简单案例

1. AOP介绍 面向切面编程(Aspect-oriented programming,简称AOP),是一种编程思想和技术,用于将应用程序的业务逻辑与系统服务(例如事务、日志记录、安全性等)进行分离。AOP可以通过在代码中插入…

多ip,多端口、多域名访问多网站

目录标题 多ip访问多网站当前主机配置多个ip同行配置基于多个虚拟主机标签配置多个网站站点根据配置创建对应资源文件 多端口访问多网站根据配置创建对应资源文件重启httpd服务 基于域名访问多网站创建对应资源文件重启服务 排错方式启动不成功(配置文件有问题&…

技术好≠薪资高,业务价值才是王道

2023年软件测试为什么发生巨变? 2023年了,软件测试行业发生了很大的改变,就像今年的金三银四不像是一个高峰期,我觉得有以下原因: 1、整个IT技术人员在行业内角色的转变 变化的一个原因就是现在变成了纯业务价值的导…

stm32 iic调试ds1307 rtc时钟

使用代码 (1条消息) stm32iic调试ds1307rtc时钟,采用iic接口,驱动软件,可以设置,读取ds1307时钟代码资源-CSDN文库 使用STM32调试ds1307,采用iic接口,由于有个项目需要使用外部RTC功能,所以需…

JimuReport积木报表 v1.5.8版本发布—免费的数据可视化报表

项目介绍 一款免费的数据可视化报表,含报表和大屏设计,像搭建积木一样在线设计报表!功能涵盖,数据报表、打印设计、图表报表、大屏设计等! Web 版报表设计器,类似于excel操作风格,通过拖拽完成报…

用frp开源工具,实现内网穿透(详细教程)

本文转载于: https://blog.csdn.net/qq_40903527/article/details/123850647 选取其中的frp内网穿透方式,给大家分享本此教程供大家参考。 ^ - ^ 如果你有一台云服务器(有公网IP),或者有使用权,那么 在开…

Vue使用keep-Alive实现从详情页返回到列表页,还能记住当前的page页码以及切换的tab选项

哈喽,大家好,今天遇到一个小需求,就是要求从订单详情页返回到订单列表页,定位到跳转前的page页码和切换对应的tab选项 从我看了大量博主写的文章后,发现可以使用vue中的keep-Alive知识 下面是Vue中讲解keep-alive K…

我先肝了,爆火的Java全能笔记,分布式/开源框架/微服务/性能调优全有

前言 程序员,立之根本还是技术,一个程序员的好坏,虽然不能完全用技术强弱来判断,但是技术水平一定是基础,技术差的程序员只能CRUD,技术不深的程序员也成不了架构师。程序员对于技术的掌握,除了…

如何选择合适的智能氮气柜?

随着电子产品的普及,IC、半导体、精密元件、检测仪器之类的物品对湿度要求越来越高,潮湿、霉菌和金属氧化所造成的损害,随时在发生。人们对于物品的存放环境要求逐渐提高,利用防潮设备如智能氮气柜、电子防潮柜来存储产品也越来越…

《编程思维与实践》1060.浮点数加法

《编程思维与实践》1060.浮点数加法 题目 思路 浮点数可以分为[整数部分].[小数部分],可以将两个部分分开处理,最后再合并,但在处理四舍五入时较为繁琐, 为了方便起见,这里采用将两个部分一起处理的方式: 由于浮点数不超过500位:整数部分最多500位,小数部分最多500位, 所以加法…

gpio 子系统驱动LED

gpio 子系统 API 函数 1、gpio_request 函数 gpio_request 函数用于申请一个 GPIO 管脚,在使用一个 GPIO 之前一定要使用 gpio_request 进行申请,函数原型如下: int gpio_request(unsigned gpio, const char *label)/*函数参数和返回值含义如…

企业应该如何做到数字化转型成功?

01 成长型企业数字化转型的意义 成长型企业想要实现数字化转型,那么我们需要先弄明白,对于成长型企业而言,数字化转型到底具有什么意义?希望实现哪些目标? 可以归结为以下四点: 提升企业的生产力和效率&…

吴恩达机器学习课程的重点内容解析

吴恩达(Andrew Ng)教授是机器学习领域的知名专家,其机器学习课程在全球范围内备受欢迎。本文将解析吴恩达机器学习课程的重点内容,帮助读者了解机器学习的基本原理、常见算法和实践技巧。 一、机器学习简介 在课程的第一部分&…

今年这面试难度,我给跪了……

大家好,最近有不少小伙伴在后台留言,又得准备面试了,不知道从何下手! 不论是跳槽涨薪,还是学习提升!先给自己定一个小目标,然后再朝着目标去努力就完事儿了! 为了帮大家节约时间&a…

Winforms不可见组件开发

Winforms不可见组件开发 首先介绍基本知识,有很多的朋友搞不清楚Component与Control之间的区别,比较简单形象的区别有下面两点: 1、Component在运行时不能呈现UI,而Control可以在运行时呈现UI。 2、Component是贴在容器Container上的,而Control则是贴…

流控验证太麻烦?不敢上生产?MSE 有办法!

作者:涯客 影响服务稳定性的因素有很多,其中比较常见但又往往容易被忽视的就是面向流量的稳定性,流控是保障服务稳定性的重要手段。但是,我们发现大量客户仅仅在开发环境和预发环境中测试流控,却在生产环境中鲜有使用…