我做了一个 VSCode 插件版的 ChatGPT

大家好,我是风筝

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

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

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

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

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

插件功能特点

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

我做了一个 VSCode 插件版的 ChatGPT

插件安装

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

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

我做了一个 VSCode 插件版的 ChatGPT

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

我做了一个 VSCode 插件版的 ChatGPT

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

插件使用

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

使用建议

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

我做了一个 VSCode 插件版的 ChatGPT

获取 ChatGPT API key

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

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

  3. 个人中心 创建一个 API key。

我做了一个 VSCode 插件版的 ChatGPT

开发历程

作为一个后端开发,我的前端水平是非常一般的,所以代码中有瑕疵的地方还请见谅。对了,代码已经放到 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

原文链接:https://www.cnblogs.com/fengzheng/p/17389879.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:我做了一个 VSCode 插件版的 ChatGPT - Python技术站

(0)
上一篇 2023年5月11日
下一篇 2023年5月11日

相关文章

  • JQUERY操作JSON实例代码

    下面是关于“JQUERY操作JSON实例代码”的完整攻略。 什么是JSON JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式,在前端开发中经常用来进行数据传输和交换。JSON格式的数据由于具有轻巧、易读、易解析的优点,被越来越广泛地用于Web前端的数据交互和传输。 JSON的语法 JSON数据用于数据交换,它是一…

    JavaScript 2023年5月27日
    00
  • jQuery时间插件jquery.clock.js用法实例(5个示例)

    当用户需要在网页中显示时间时,可以使用jQuery时间插件jquery.clock.js。 下面是关于该插件的完整攻略和5个示例。 1. 下载和引入jquery.clock.js 首先,需要从官方网站下载jquery.clock.js。然后在你的HTML页面中引入jquery和jquery.clock.js: <script src="jqu…

    JavaScript 2023年5月27日
    00
  • JavaScript中的this妙用实例分析

    讲解JavaScript中的this妙用实例分析的完整攻略如下: 什么是this 在JavaScript中,this是一个特殊的关键字,其用于指向函数运行时的上下文对象。在不同的上下文中,this指向的对象不同,因此this可以有多种用途和应用场景。 this的使用场景 1. 普通函数的调用 当函数被作为普通函数调用时,this指向window对象(全局对象…

    JavaScript 2023年5月28日
    00
  • js几秒以后倒计时跳转示例

    下面我将为您提供“js几秒以后倒计时跳转示例”的完整攻略。 示例一:使用window.setTimeout()方法实现倒计时跳转 首先,在HTML页面中添加一个div元素,用于显示倒计时的时间: <div id="countdown">5</div> 接下来,添加以下JavaScript代码: // 获取倒计时di…

    JavaScript 2023年5月27日
    00
  • JavaScript调用客户端Java程序的方法

    下面我将为您详细讲解“JavaScript调用客户端Java程序的方法”的完整攻略。 1. 前置条件 为了实现JavaScript调用客户端Java程序的方法,我们需要满足以下前置条件: 客户端浏览器支持Java Applet。 您已经编写了相应的Java Applet程序,并将其打包为Jar文件。 2. 实现过程 下面是具体的实现过程: 2.1 在HTML…

    JavaScript 2023年5月27日
    00
  • js闭包的9个使用场景

    下面是详细讲解“js闭包的9个使用场景”的完整攻略。 什么是JavaScript闭包? JavaScript闭包是一个函数和定义该函数的环境的组合。闭包让你可以在一个内部函数中访问到其外部函数的作用域。具体来说,就是内部函数能够“记住”并访问外部函数的变量,即使外部函数已经返回了。 9个JavaScript闭包的使用场景 1. 模块化开发 闭包可以帮助我们实…

    JavaScript 2023年6月10日
    00
  • 一种新的日期处理方式之JavaScript Temporal API

    一、JavaScript Temporal API简介 JavaScript Temporal API是一个新的JavaScript API,它提供了一种新的日期和时间处理方式,用于简化处理日期、时间和时间间隔的操作。它的设计目标是提供一个简单易用的API,能够处理所有的日期和时间操作,包括处理时区、分别取年月日等操作。 二、安装JavaScript Tem…

    JavaScript 2023年6月10日
    00
  • vscode 一键规范代码格式的实现

    下面我将为大家讲解“vscode 一键规范代码格式的实现”的完整攻略。 1. 安装插件 要实现一键规范代码格式,需要安装 vscode 的插件 Prettier – Code formatter,可以通过在 vscode 中按下快捷键 Ctrl + Shift + X 打开插件商店,在搜索框中输入 Prettier,然后点击安装即可。 2. 配置插件 在 v…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部