本文作者是360奇舞团开发工程师
引言
OpenAI
发布了ChatGPT
,就像是给平静许久的互联网湖面上扔了一颗重磅炸弹,刹那间所有人都在追捧学习它。究其原因,它其实是一款真正意义上的人工智能对话机器人
。它使用了深度学习技术,通过大量的训练数据和自监督学习方法进行训练,以模拟人类的对话能力和生成自然语言回应。日常生产、学习中利用好ChatGPT
这个工具,是绝对能够提升我们工作效率的,这一点对于我们程序员来说,感受应该尤为明显。我们最常用的开发工具VSCode
,已经有许多的插件集成了ChatGPT
功能,这篇文章将从零开始,介绍这些插件的实现原理与思路,希望对你有所帮助。
基本需求
实现一款可以跟ChatGPT
对话的插件,可以通过一问一答的形式来进行对话,并且可以将我们选中的代码发送给ChatGPT
,让其可以对代码进行优化。当然如果要访问ChatGPT
,首先需要绑定我们在OpenAI
后台申请的ApiKey
.
VSCode 插件基本配置
首先简单介绍一下VSCode
插件开发的基本流程
安装脚手架
npm install -g yo generator-code
然后cd
到你的工作目录,运行yo code
,根据向导一步步选择即可,没啥好说的,运行完后就生成了一个干净的可以运行的插件工程了。
2. 工程目录介绍
查看当前目录,工程的核心是package.json
与extension.js
.首先看下package.json
的配置文件:
name
:工程名称displayName
: 应用市场名称description
: 应用描述version
: 当前插件版本engines
: 表示插件最低支持的vscode版本categories
: 插件应用市场分类main
: 程序的主入口文件activationEvents
:重要,扩展的激活事件数组,表示可以被哪些事件激活当前插件。比如:
"activationEvents": [
"onView:chatgpt-for-vscode.view",
"onCommand:chatgpt-for-vscode.setAPIKey",
"onCommand:chatgpt-for-vscode.askGPT",
"onCommand:chatgpt-for-vscode.whyBroken",
"onCommand:chatgpt-for-vscode.optimizeCode",
"onCommand:chatgpt-for-vscode.explainCode",
"onCommand:chatgpt-for-vscode.refactor"
],
onView
:表示 通过视图触发,chatgpt-for-vscode.view
是视图Id。当触发这个视图时,唤起当前插件onCommand
: 表示通过命令触发,后面是命令Id,这些都是我们自定义的命令。在VSCode
中按下快捷键:Command + Shift + P
输入命令title
后唤起插件,命令title
在contributes
,commands
模块里面定义,后面介绍。
除了这两个还有:onLanguage
、onUri
、onDebug
、workspaceContains
、onFileSystem
等,如果设置为*
,只要一启动VSCode
,插件就会被激活,当然为了用户体验,官方不推荐这么做。
contributes
: 重要,配置插件的主要功能点。比如:
"contributes": {
"commands": [
{
"command": "chatgpt-for-vscode.setAPIKey",
"title": "GPT:绑定APIKey"
},
{
"command": "chatgpt-for-vscode.askGPT",
"title": "GPT:询问 GPT"
},
{
"command": "chatgpt-for-vscode.whyBroken",
"title": "GPT:说明这段代码存在的问题"
},
{
"command": "chatgpt-for-vscode.optimizeCode",
"title": "GPT:优化这段代码"
},
{
"command": "chatgpt-for-vscode.explainCode",
"title": "GPT:解释这段代码"
},
{
"command": "chatgpt-for-vscode.refactor",
"title": "GPT:重构这段代码"
}
],
"menus": {
"editor/context": [
{
"command": "chatgpt-for-vscode.askGPT",