大家好,我是風箏
其實很早之前就想學學 VSCode 外掛開發了,但是又不知道做什麼,加上我這半吊子前端水平,遲遲沒有動手。
最近 ChatGPT 火的一塌糊塗,我也一直在用,真的非常好用,有些問題之前需要 Google 搜尋,現在用 ChatGPT 基本上都能直接解決,效率提升了不少。
但是吧,瀏覽器和 IDE 來回切換又很麻煩,所以我靈機一動,那就開發個 ChatGPT 外掛吧,即可以學習學習 VSCode 外掛開發,又可以做一個方便的效率工具,豈不是一舉兩得,美哉美哉。
於是我就動手寫了下面這個外掛,叫做 mini ChatGPT
,現在已經發布到 VSCode 外掛市場了。
有條件的同學可以安裝一下,試試效果如何。
外掛功能特點
- 介面簡潔,沒有多餘的干擾;
- 像 ChatGPT 官網輸出效果一致,打字效果實時輸出;
- 支援兩輪上下文(太多了浪費 tokens),大致等於支援上下文;
- 程式碼美化+格式化,並且可以一鍵複製,直接貼上到 vscode 中;
外掛安裝
當然了,這是需要正確的上網姿勢。
你可以直接在 VSCode 的商店直接搜尋 mini ChatGPT
安裝。
也可以到應用市場上安裝。
外掛地址:https://marketplace.visualstudio.com/items?itemName=fengzheng.code-chatgpt-assistant
外掛使用
- 點選檢視->命令皮膚,或者使用快捷鍵(MacOS: Shift + Command + P,Windows:Shift + Control + P
- 輸入
Chat
並回車。
- 如果是首次使用,會彈出提示輸入框,在此輸入 ChatGPT 的 API。使用的就是原滋原味的 ChatGPT API 介面,官網上都寫的很清楚,所以需要使用外掛的小夥伴提供自己賬號的 API key。下面有介紹如何獲取ChatGPT API key。
- 之後就可以使用啦
- 如果之後想更換 ChatGPT 的 API key,在命令皮膚中輸入
ChatGPT API
即可。
使用建議
此外掛只有一個 webview 實現,開啟之後獨佔一個 tab,可以設定向左或向右拆分,然後在左側使用此外掛向 ChatGPT 提問,右側是程式碼檔案,這樣就不用來回切換了,而且可以將程式碼片段一鍵複製,然後直接執行。
獲取 ChatGPT API key
開發歷程
作為一個後端開發,我的前端水平是非常一般的,所以程式碼中有瑕疵的地方還請見諒。對了,程式碼已經放到 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 的。"
採用這種方式,幾乎可以模擬上下文的操作,但是偶爾會出現錯亂,這塊兒還有最佳化空間,還會繼續最佳化。
如果各位小夥伴使用過程中發現什麼問題,或者有什麼更好的建議,都可以加我好友直接跟我說。
歡迎捧場,趕緊用一用吧,覺得好用的話,可以推薦給身邊的小夥伴也用一下。