我做了一个 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日

相关文章

  • Javascript 倒计时源代码.(时.分.秒) 详细注释版

    我来为你详细讲解“JavaScript 倒计时源代码(时.分.秒)详细注释版”的完整攻略。该源代码可以实现一个简单的倒计时功能,以时分秒的形式展示倒计时剩余时间。 首先,我们需要在 HTML 页面中创建对应的元素来显示倒计时。例如,我们可以使用以下代码: <div id="countdown"></div> 接着,…

    JavaScript 2023年5月27日
    00
  • JavaScript对象拷贝与赋值操作实例分析

    JavaScript对象拷贝与赋值操作实例分析 在JavaScript中,对象的赋值与拷贝是一个非常重要的话题。这篇文章将会分析对象的赋值与拷贝两种操作的差异以及使用场景,并通过实例展示它们的不同表现。 基本数据类型与引用数据类型 在JavaScript中,数据类型可分为基本数据类型和引用数据类型。基本数据类型包括Number、String、Boolean、…

    JavaScript 2023年5月27日
    00
  • DOM中事件处理概览与原理的全面解析

    DOM中事件处理是Web开发中非常重要的一部分,掌握了事件处理程序,可以让我们更好地控制网页中的交互行为,提高用户体验。下面就详细讲解一下DOM中事件处理概览与原理的全面解析。 1. 事件处理概述 事件就是一件发生的事情,比如用户点击、鼠标移动等,事件处理就是对这些事件做出反应,比如触发函数、修改页面等等。在DOM中,事件处理可以分为三个部分:事件源、事件类…

    JavaScript 2023年6月10日
    00
  • JS实现探测网站链接的方法【测试可用】

    非常感谢您对该篇文章的关注和探究。本篇文章将详细介绍如何通过JS实现探测网站链接的方法。 前言 在现代Web开发中,许多应用程序都需要通过链接访问其他资源。尤其是在网站开发中,网站链接是非常常用的功能之一。那么如何通过JS实现对链接的探测呢?在本文中,我们将答疑解惑,为您提供一份可实践的完整攻略。 准备工作 为了实现探测链接的功能,首先需要准备一下所需的工具…

    JavaScript 2023年6月11日
    00
  • Ajax Blog 用到的几个函数第2/3页

    我来详细讲解一下 “Ajax Blog 用到的几个函数第2/3页” 的完整攻略。 一、几个函数的作用 在 “Ajax Blog 用到的几个函数第2/3页” 中,主要介绍了以下几个函数: 1. getHttpObject() 该函数的作用是创建 XMLHttpRequest 对象,用于执行与服务器端的交互。在 Ajax 中,XMLHttpRequest 对象是…

    JavaScript 2023年6月11日
    00
  • 一次让你了解全部JavaScript的作用域

    一次让你了解全部JavaScript的作用域的攻略包含了以下步骤: 第一步:理解作用域和作用域链 在JavaScript中,作用域是指变量可访问的范围。JavaScript中的作用域是词法作用域,即作用域的范围由代码中变量和函数声明的位置决定。当搜索变量时,会沿着作用域链一级一级地向上查找变量定义。作用域链是指一个指向外部环境的指针列表,它指向所有父级作用域…

    JavaScript 2023年6月10日
    00
  • vscode录音及语音实时转写插件开发并在工作区生成本地mp3文件附踩坑日记!

    vscode录音及语音实时转写插件开发并在工作区生成本地mp3文件附踩坑日记! 背景 语音识别技术的普及使得语音转写逐渐成为电脑输入的重要方式之一,而实时语音转写更是越来越多的应用场景。本文介绍如何在VS Code中开发一个语音实时转写插件,并将实时转写的结果保存到本地mp3文件中。 准备 在进行实时语音转写插件的开发之前,需要准备以下工具和环境: 麦克风及…

    JavaScript 2023年6月11日
    00
  • Bootstrap Fileinput文件上传组件用法详解

    Bootstrap Fileinput文件上传组件用法详解 Bootstrap Fileinput是一款基于Bootstrap的文件上传组件,可以方便地进行文件上传并对上传的文件进行一些处理。 安装 下载源码 可以从 Bootstrap Fileinput 的官方 Github 页面下载源码:https://github.com/kartik-v/boots…

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