大家好，我是風箏

其(qi)實很早之(zhi)前(qian)就想學學 VSCode 插件開發了，但是又不知道做什么(me)，加上我這(zhe)半吊子前(qian)端水平(ping)，遲遲沒有(you)動(dong)手。

最近(jin) ChatGPT 火(huo)的一塌糊(hu)涂，我也一直(zhi)在(zai)用，真的非常好用，有些問題之前需要(yao) Google 搜索，現在(zai)用 ChatGPT 基本(ben)上都能直(zhi)接解決，效率提升了不少。

但是吧，瀏覽器(qi)和 IDE 來(lai)回切換(huan)又很麻煩，所以(yi)我靈機一(yi)動，那就開發個 ChatGPT 插(cha)件吧，即可以(yi)學習學習 VSCode 插(cha)件開發，又可以(yi)做一(yi)個方(fang)便的效率(lv)工(gong)具，豈不是一(yi)舉兩得(de)，美哉美哉。

于是我就動手寫了下面這個插件，叫做 mini ChatGPT，現在(zai)已(yi)經發布(bu)到 VSCode 插(cha)件市場了。

有條件的同學可以安裝(zhuang)一(yi)下，試(shi)(shi)試(shi)(shi)效果如何。

插件功能特點

• 界面簡潔，沒有多余的干擾；
• 像 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 即可。

使用建議

此插件(jian)只有(you)一(yi)個(ge)(ge) webview 實現，打開之后獨占一(yi)個(ge)(ge) tab，可以設置向(xiang)左(zuo)或向(xiang)右(you)拆分，然后在左(zuo)側(ce)使用此插件(jian)向(xiang) ChatGPT 提問，右(you)側(ce)是代碼(ma)文件(jian)，這(zhe)樣就不用來回切換了(le)，而且可以將(jiang)代碼(ma)片段一(yi)鍵復制(zhi)，然后直(zhi)接運行。

獲取 ChatGPT API key

1. 先(xian)準備好正確的上網工具，不(bu)要用亞洲(zhou)節(jie)點。

2. 之后到 注冊賬號。

3. 到(dao) 創(chuang)建(jian)一個 API key。

開發歷程

作為一(yi)個后端(duan)開發，我的(de)前端(duan)水(shui)平(ping)是(shi)非(fei)常一(yi)般的(de)，所以代(dai)碼中有瑕疵的(de)地方還請見諒。對了(le)，代(dai)碼已(yi)經放到(dao) GitHub 上了(le)。

倉庫地址：

VSCode 插件開發，官方建議是用 TypeScript 開發，所以項目完全采用了 TS 開發。由于功能比較簡單，沒有那么多復雜的設置，由于邊學邊做，太復雜的也沒考慮。整個插件的核心其實就是一個 webview，在webview中實(shi)現界面布局和樣式，難點就在于(yu)webview與插件本身來回的數據傳(chuan)遞，但也都(dou)是常規用法(fa)。

整個(ge)寫代碼的(de)過程其實(shi)也就(jiu)(jiu)幾個(ge)小時，當然過程中的(de)遇到的(de)一(yi)(yi)(yi)些問題我都是跟 ChatGPT 提(ti)問的(de)，包括樣式(shi)都是直接描述需求，ChatGPT 給(gei)我一(yi)(yi)(yi)個(ge)大致(zhi)的(de)框(kuang)架，我再微調(diao)一(yi)(yi)(yi)下就(jiu)(jiu)可以了。

所以這樣(yang)看(kan)下(xia)來(lai)，其實是我(wo)和(he) ChatGPT 合作開發的。

后來發布到應(ying)用商店，寫(xie) readme 介(jie)紹和使用說明花了一些時(shi)間。

問題和建議

目(mu)前的(de)版本功能比(bi)較(jiao)簡單，沒(mei)有 ChatGPT 官方的(de)聊天記錄(lu)列表功能，如果真的(de)有人用的(de)話，后期考慮加上。

由于ChatGPT 官方(fang)并未提(ti)供上下文(wen)的(de)(de) API 支持，所以只能采用其他方(fang)式模仿上下文(wen)能力，目前的(de)(de)做(zuo)法是記錄前兩輪提(ti)問(wen)(wen)和(he)回(hui)答(da)，然后在下次提(ti)問(wen)(wen)的(de)(de)時候，將(jiang)前兩輪的(de)(de)提(ti)問(wen)(wen)和(he)回(hui)答(da)告(gao)訴 ChatGPT ，并且明(ming)確告(gao)訴 ChatGPT，例如下面這樣。

第一輪問題：你好。

第一輪回答：你好(hao)，請問(wen)有什么要幫忙的(de)嗎？

第二論問題：請幫我寫一段 Python 爬蟲抓(zhua)取(qu)知(zhi)乎回答的(de) demo。

第二輪回答(da)：好的，下面是一(yi)段抓(zhua)取(qu)知(zhi)乎回答(da)的 Python 示例。....省略多行代碼。

第三輪(lun)問題：幫我改成 Java 的。

這時候，我(wo)會將實際的 prompt 改成下面(mian)這樣的。

下面中括號部分(fen)是(shi)前兩輪(lun)的(de)(de)(de)問題和回(hui)答，只(zhi)用作參(can)考。[my question is:"你好(hao)(hao)",your anwser is:"你好(hao)(hao)，請問有什么要幫忙的(de)(de)(de)嗎？".my question is:"請幫我寫一(yi)段 Python 爬(pa)蟲抓(zhua)(zhua)取(qu)知乎回(hui)答的(de)(de)(de) demo。",your anwser is:"好(hao)(hao)的(de)(de)(de)，下面是(shi)一(yi)段抓(zhua)(zhua)取(qu)知乎回(hui)答的(de)(de)(de) Python 示例(li)。....省略多行代碼。".]

下(xia)面引號包含的(de)(de)這(zhe)部分(fen)是真正的(de)(de)問題："幫我改成(cheng) Java 的(de)(de)。"

采用這種方式，幾(ji)乎可(ke)以模(mo)擬上下文的(de)操作，但是偶爾(er)會出(chu)現錯亂，這塊兒還(huan)有優(you)化(hua)空間，還(huan)會繼續優(you)化(hua)。

如(ru)果各位小伙伴使(shi)用過程(cheng)中發現什(shen)么問(wen)題，或者有(you)什(shen)么更(geng)好的建議，都可以加(jia)我好友直接(jie)跟我說。

歡迎捧場，趕緊用(yong)(yong)一(yi)(yi)用(yong)(yong)吧，覺得(de)好用(yong)(yong)的話(hua)，可以推薦給身(shen)邊的小伙(huo)伴(ban)也(ye)用(yong)(yong)一(yi)(yi)下。