我也想在 vscode 中写一个 chatGPT 插件

上一篇 vscode 插件开发入门已经带大家入门了 vscode 插件开发，学习本篇文章如若不懂的地方请翻看上篇文章。

学完这篇文章后，你也能开发一个 chatGPT 的 vscode 插件，做一个 chatGPT 聊天框，
可以直接在 vscode 中安装我的插件 CodeToolBox 体验~

实现的功能

在侧边栏添加插件图标，点击图标后打开一个插件视图，视图中有两个按钮
- 打开 chatGPT 对话框：可以与 chatGPT 进行问答
- 设置：可以设置用户的 chatGPT 信息，这里需要你去购买一个 openAi 的转发
  apikey ,毕竟调用 chatGPT 接口是需要 💴 的。
选中一段文案后，可以右键找到 CodeToolBox => 解释这段文案，自动唤起
chatGPT 对话框，自动提问

代码仓库地址，可以先下载后再看文章，更易理解，创作不易，觉得不错赏个 star 吧 🙏

运行截图：

我也想在 vscode 中写一个 chatGPT 插件

那开始学习吧~

在侧边栏添加插件图标

vscode 内置图标库

`package.json` 添加设置

"contributes": {
    // 左侧侧边栏的容器设置，唯一标识 id 需要下方设置对应的 views，这里设置其名称、图标
    "viewsContainers": {
      "activitybar": [
        {
          "id": "CodeToolBox",
          "title": "CodeToolBox",
          "icon": "images/tool.png" // 自定义图标，请手动添加图片
        }
      ]
    },
    // 对应上方设置的唯一 id，设置这个标签点击打开后的视图，name是视图上方的名称
    "views": {
      "CodeToolBox": [
        {
          "id": "CodeToolBox.welcome",
          "name": "welcome",
        }
      ]
    },
    // 设置这个视图里面的内容，
    // 目前添加两个按钮（打开chatGPT对话框、设置）
    "viewsWelcome": [
      {
        "view": "CodeToolBox.welcome",
        "contents": "[打开chatGPT对话框](command:CodeToolBox.chatGPTView)\n[设置](command:CodeToolBox.openSetting)"
      }
    ],
}

下面把图示位置称为插件视图

添加插件设置

package.json 添加设置按钮命令

"contributes": {
  "commands": [
    {
      "command": "CodeToolBox.openSetting",
      "title": "设置"
    },
  ],
}

新建 /src/commands/createSetting.ts

import { commands, ExtensionContext } from "vscode";

export const registerCreateSetting = (context: ExtensionContext) => {
  context.subscriptions.push(
    commands.registerCommand("CodeToolBox.openSetting", () => {
      // 打开插件设置
      commands.executeCommand("workbench.action.openSettings", "CodeToolBox");
    }),
  );
};

在 src/extension.ts 添加命令

import { registerCreateSetting } from "./commands/createSetting";
export function activate(context: vscode.ExtensionContext) {
  registerCreateSetting(context);
}

package.json 添加插件的设置项

"contributes": {
  "configuration": {
        "type": "object",
        "title": "CodeToolBox",
        "properties": {
          "CodeToolBox.hostname": {
            "type": "string",
            "default": "api.openai.com",
            "description": "第三方代理地址"
          },
          "CodeToolBox.apiKey": {
            "type": "string",
            "default": "api.openai.com",
            "description": "第三方代理提供的apiKey"
          },
          "CodeToolBox.model": {
            "type": "string",
            "default": "gpt-3.5-turbo",
            "description": "chatGPT模型（默认：gpt-3.5-turbo）"
          }
        }
      }
  }

这样当点击设置时，插件的设置就会自动打开，这里必须设置两个值，一个是你购买的
apiKey，还有一个 houtname,如果你也是在我上面那个地址购买的应该是
api.chatanywhere.com.cn，这些设置后面需要获取然后传给 webview 去调 openAI
的接口

添加 chatGPT 对话框

需要实现：

点击 打开chatGPT对话框 按钮后在当前插件视图中切换到 chatGPT对话框
打开后当然需要关闭吧，所以我们要在视图上方添加设置按钮以及关闭按钮
后面再去编写这个 chatGPT对话框 的页面

实现切换 `chatGPT对话框`

在 package.json 添加配置

新增命令，我们需要下面三个命令，对应的 title 都很清楚了

"contributes": {
   {
        "command": "CodeToolBox.chatGPTView",
        "title": "chatGPT对话框"
    },
    {
        "command": "CodeToolBox.openChatGPTView",
        "title": "打开chatGPT对话框"
    },
    {
        "command": "CodeToolBox.hideChatGPTView",
        "title": "关闭chatGPT对话框",
        "icon": "$(close)"
    }
}

设置 chatGPT对话框 出现的时机

当 CodeToolBox.chatGPTView 为 false 时就是那两个按钮的视图
当 CodeToolBox.chatGPTView 为 true 时就是 chatGPT对话框 的视图

在 package.json 添加配置

"views": {
    "CodeToolBox": [
      {
        "id": "CodeToolBox.welcome",
        "name": "welcome",
        "when": "!CodeToolBox.chatGPTView"
      },
      {
        "type": "webview",
        "id": "CodeToolBox.chatGPTView",
        "name": "chatGPT",
        "when": "CodeToolBox.chatGPTView"
      }
    ]
  },

当插件视图为 chatGPT对话框 时，我们在其顶部添加两个按钮，设置与关闭

在 package.json 添加配置，配置插件视图顶部，即 title

 "menus": {
   "view/title": [
        {
          "command": "CodeToolBox.hideChatGPTView",
          "when": "view == CodeToolBox.chatGPTView", // 当插件视图为 `chatGPT对话框` 时才出现
          "group": "navigation@4" // 分组是为了不让他两在同一个 `...` 出现
        },
        {
          "command": "CodeToolBox.openSetting",
          "when": "view == CodeToolBox.chatGPTView",
          "group": "navigation@3"
        }
      ]
 }

配置完了，我们来编写命令的代码了，新建 /src/commands/createChatGPTView.ts

CodeToolBox.chatGPTView、CodeToolBox.openChatGPTView、CodeToolBox.hideChatGPTView，
现在这里处理这三个命令

解释代码
- 我们定一个 MyWebviewViewProvider 类，这个是 webview 视图的类型，初始化一
  个 webviewViewProvider 的实例，在 resolveWebviewView 这个方法中去设置
  webview 里面的内容，有一些封装的方法在上一篇文章有，如果实在看不懂就下载我的
  代码下来研究吧。
- 并且给 webview 发送消息，让它打开 chat-gpt-view 页面，传入
  hostname、apiKey、model、selectedText 参数，其中 selectedText 这个
  参数是用户选中的文案，下面会介绍这个功能
- 打开 chatGPT聊天框 其实就是下面代码，其实就是让 vscode 打开
  CodeToolBox 插件后再设置 CodeToolBox.chatGPTView 为 true，前面我们在
  package.json 设置的条件就会生效,就能切换到 chatGPT聊天框 了，然后再打开
  webview 项目的页面
在 src/extension.ts 添加命令

编写 `chatGPT对话框` 页面

这里就是自己写一个 chatGPT对话框 的页面，我上一篇文章有提到 webview 项目的创
建，这里我使用的 vue2+vite，打包的时候必须要要打包成一个 js 才能在 vscode
中使用，所以这里建议大家跟我使用一样的，可以直接拉代码看我的项目吧，避免踩坑。

一个聊天对话框的页面相信大家都会写，这里有个关键点就是 openAI 返回的数据其实
一段字符串，我们需要去解析它，并让它以 markdown 的格式输出，并且要逐字输出
因为 openAI 自带的流式输出我不知道如何监听获取，所以我这里是直接获取整个答案
文本，使用 requestAnimationFrame 逐字输出
这里我使用的 markdown-it、
markdown-it-code-copy、markdown-it-highlightjs 这三个插件，封装了一个渲染
返回数据的组件，可供大家参考一下

需要安装四个依赖

组件代码：CodeDisplay.vue

贴一下自己的页面代码、关键方法以及样式吧

页面模板文件：index.vue

页面数据：model.ts

方法文件：service.ts

接口文件：api.ts

方法驱动文件：presenter.tsx

ps：总感觉这样贴代码很罗嗦，但也怕大家看不懂，下面看看效果图：

至此，chatGPT 对话框 的动能就算完成了~

实现选中文案自动打开 `chatGPT 对话框` , 并且自动提问

这里要实现的功能：用户选中编辑器的一段文案后，右键找到
CodeToolBox => 解释这段文案，自动唤起 chatGPT 对话框，并自动提问

在 package.json 添加命令 explainByChatGPT 命令

编辑 /src/commands/createChatGPTView.ts，添加命令代码

这里会获取用户选中的文本，若没有选中文本则会提示，调用 openChatGPTView方法，传
递 hostname、apiKey、model、selectedText 参数给 webview 进行处理，接收到
selectedText 的值就会自动提问。

至此，就做完啦

原文链接：https://juejin.cn/post/7312356320207175691 作者：_jiang

我也想在 vscode 中写一个 chatGPT 插件

在侧边栏添加插件图标

package.json 添加设置

添加插件设置

添加 chatGPT 对话框

实现切换 chatGPT对话框

编写 chatGPT对话框 页面

实现选中文案自动打开 chatGPT 对话框 , 并且自动提问

相关推荐

发表回复

`package.json` 添加设置

实现切换 `chatGPT对话框`

编写 `chatGPT对话框` 页面

实现选中文案自动打开 `chatGPT 对话框` , 并且自动提问