目錄
一：首先明確插件開發(fā)方式
二：新建一個Vscode 插件項目
1. 官網(wǎng)教程地址
2. 一步一步來創(chuàng)建
3. 分析目錄結(jié)構(gòu)以及運行插件
三：新建一個Vue3 項目，在側(cè)邊欄中展示，實現(xiàn)vscode插件 <=> vue項目 雙向消息傳遞
1. 新建vue3+vite+ts項目
2. 將web頁面展示在vscode側(cè)邊欄
（1） 插件項目修改，把視圖注冊到側(cè)邊欄，完成消息傳遞
（2） web項目修改，增加事件監(jiān)聽
四：接入大模型對話能力，實現(xiàn)ChatUI
1. 大模型接入準(zhǔn)備
2. nodejs調(diào)用api
3. 前端接口調(diào)試
五：注冊開發(fā)者賬號并發(fā)布插件
1. 推薦教程
2. 增加插件商店圖標(biāo)
3. 前端資源的緩存策略會影響插件web頁面的實時更新
六：實戰(zhàn)能力探討（會持續(xù)更新，歡迎探討）
1. 行內(nèi)提示功能的設(shè)計與實現(xiàn)（InlineCompletionItemProvider[9]）
2. SSH 遠(yuǎn)程打開文件能力（使用 remote-ssh 插件提供的命令）
3. Json 文件可視化編輯（JsonToHtml）
????????隨著大模型能力越來越卷，在垂直領(lǐng)域的落地也在加快，對于大模型代碼生成能力而言，最簡潔高效的方式就是集成為常用IDE的插件，在vscode的插件戰(zhàn)場中，比較知名的就有 GitHub Copilot, 智譜清言的codegeex, 訊飛星火的iFlyCode。
那么我們就以開發(fā)一個簡易的大模型對話插件，來探究一下vscode插件開發(fā)到發(fā)布的流程，研究一下文心一言大模型api的接入
跟著操作大約30-60分鐘，你需要
-
安裝vscode，npm/yarn等，node版本 >12.0
-
最好有時間提前看一看?vscode 官網(wǎng)api開發(fā)文檔[1]
萬字長文 Action!
一：首先明確插件開發(fā)方式
-
如果你的插件只提供原生vscode能力，沒有復(fù)雜的UI需求，只需要在
vscode插件項目上開發(fā)即可，類似插件比如Volar?Git History?Eslint -
如果提供復(fù)雜UI交互，定制化界面，就需要在vscode插件內(nèi)嵌iframe頁面（用iframe展示線上web地址與使用vscode提供的一套UI組件皆可，詳見第三節(jié)），我這里選擇訪問線上地址，因此需要
開發(fā)一個vscode插件項目與一個vue3項目（其他框架亦可），類似的復(fù)雜插件比如?CodeGeeX?iFlyCode，會將web頁面展示在側(cè)邊欄中。
image.png
本文主要講解 如何在vscode插件中通過iframe展示web頁面，獲得更好的拓展性與可維護性
二：新建一個Vscode 插件項目
1. 官網(wǎng)教程地址
開始你的第一個插件項目[2]
2. 一步一步來創(chuàng)建
-
找到一個比較舒服的文件夾，打開cmd，通過以下命令安裝 vscode項目腳手架，取的是?registry.npmjs.org[3]?鏡像源，因此可能會有科學(xué)問題
npm install -g yo generator-code
-
安裝完成后，直接用命令創(chuàng)建新的插件項目
yo code
-
進入配置頁面，默認(rèn)就選擇 NewExtension(TypeScript),后面的按照圖中來就可
-
然后會自動創(chuàng)建好項目，并執(zhí)行npm i，然后用?vscode?打開項目
3. 分析目錄結(jié)構(gòu)以及運行插件
目錄結(jié)構(gòu)就很清晰了，我們主要涉及修改 extension.ts 以及 package.json文件
上圖中，extension.ts 中 activate() 方法就是插件的入口函數(shù),每次插件啟動都會執(zhí)行此函數(shù)，當(dāng)前代碼是注冊了一個hello world命令，當(dāng)你在vscode中通過?ctrl+shift+p?調(diào)出輸入框并輸入hello world，就會執(zhí)行此注冊命令的回調(diào)，彈出一個message框，下面我們來試一下
在當(dāng)前項目中，直接按F5，會啟動一個擴展開發(fā)宿主，你的插件就運行在這個vscode窗口上啦?下面我們調(diào)出命令輸入框ctrl+shift+p?，輸入?hello world, 會提示命令，選中執(zhí)行，右下角會發(fā)現(xiàn)彈了一個message?。。?br> 什么？你的沒彈出？那你豈不是和我當(dāng)時一樣倒霉，但你不需要花時間去挖這個奇怪的~bug ！
首先看一下你的vscode版本
image.png
當(dāng)前vscode版本不能低于 package.json 中的最低版本要求！
這樣寫表示最低支持到1.83.0版本！改一下重新reload一下宿主插件，再試試命令就可以彈出啦！到此我們的插件側(cè)項目就搭建好了，下面我們簡單建一個vue項目，嵌入到側(cè)邊欄中
三：新建一個Vue3 項目，在側(cè)邊欄中展示，實現(xiàn)vscode插件 <=> vue項目 雙向消息傳遞
文章開頭我們提到，插件內(nèi)展示豐富的UI，既可以用iframe展示線上web網(wǎng)頁，也可以在插件內(nèi)部用vsode ui實現(xiàn)。下面我主要演示用iframe的方式，另一種嵌入方式推薦大家去看一下?CodeGeeX 插件[4]源碼如何做的，引入了一套vscode風(fēng)格的UI組件@vscode/webview-ui-toolkit，源碼里面的webviewUI文件夾與translationWebviewProvider.ts文件都是相關(guān)代碼。
1. 新建vue3+vite+ts項目
找一個舒服的文件夾，打開cmd
npm init vite
執(zhí)行后按需選擇自己的框架與開發(fā)環(huán)境，然后run dev一下子，拿到地址, 比如?http://localhost:5173/
2. 將web頁面展示在vscode側(cè)邊欄
（1） 插件項目修改，把視圖注冊到側(cè)邊欄，完成消息傳遞
第一步當(dāng)然是先建一個iframe把我們的web項目的地址填進去唄，開始。
vscode 提供了兩種創(chuàng)建iframe的方法，WebviewViewProvider 和 createWebviewPanel，選其一即可，這里我們介紹一下WebviewViewProvider如何使用
首先在extension.ts 同級目錄下新建 chatWebview.ts
-
WebviewViewProvider?是一個接口，因此建一個自己的類實現(xiàn)它的方法即可
下面我們創(chuàng)建一個實現(xiàn)WebviewViewProvider接口的類：ChatWebview
chatWebview.ts 文件: (可直接運行)
具體代碼作用看注釋
import?{?window,?Position,?WebviewView,?WebviewViewProvider?}?from?"vscode";
export?class?ChatWebview?implements?WebviewViewProvider?{
??//?寫一個public變量，方便對象引用創(chuàng)建后的webview實例，但是可能存在還未完全解析完成時，訪問值為null
??//?看了vscode?api發(fā)現(xiàn)，resolveWebView?返回一個?Thenable，可以在解析完成后拿到webview實例
??//?但是這個函數(shù)是在webview容器第一次顯示時自動執(zhí)行，不需要手動調(diào)用，不知道怎么拿到Thenable
??public?webview:?WebviewView?|?null?=?null;
??resolveWebviewView(webviewView:?WebviewView):?void?|?Thenable<void>?{
????this.webview?=?webviewView;
????webviewView.webview.options?=?{
??????enableScripts:?true,
????};
????//?監(jiān)聽web端傳來的消息
????webviewView.webview.onDidReceiveMessage((message)?=>?{
??????switch?(message.command)?{
????????case?"WebSendMesToVscode":
??????????//?實現(xiàn)一個簡單的功能，將web端傳遞過來的消息插入到當(dāng)前活動編輯器中
??????????let?editor?=?window.activeTextEditor;
??????????editor?.edit((edit)?=>?{
????????????let?position?=?editor?.selection
????????????????editor?.selection.start
??????????????:?new?Position(0,?0);
????????????edit.insert(position,?message.data);
??????????});
??????????return;
??????}
????},?undefined);
????//?webview?展示的內(nèi)容本身就是嵌套在一個iframe中，因此在此html中再嵌套一個iframe時，需要傳遞兩次postMessage
????webviewView.webview.html?=?`
????<!DOCTYPE?html>
??????<html?lang="en">
??????<head>
????????<meta?charset="UTF-8">
????????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????????<style>
????????html,
????????body?{
????????????margin:?0;
????????????padding:?0;
????????????width:?100%;
????????????height:?100%;
????????????background-color:#000000;
????????????overflow:hidden;
????????}
????????.webView_iframe?{
????????????width:?100%;
????????????height:?100%;
????????????border:?none;
????????}
????????.outer{
??????????width:?100%;
??????????height:?100%;
??????????overflow:?hidden;
????????}
??????</style>
????</head>
????<body>
??????<script>
??????
??????console.log('Hello?from?the?webview!');
??????//?向vscode?傳遞消息的固定寫法,?vscode?為我們封裝好了postMessage
??????const?vscode?=?acquireVsCodeApi();
??????//?接收來自web頁面的消息
??????window.addEventListener('message',?event?=>?{
??????????const?message?=?event.data;
??????????switch?(message.command)?{
???????????????//?插件傳遞消息給web端
??????????????case?'vscodeSendMesToWeb':
??????????????????let?iframe?=?document.getElementById('WebviewIframe')
??????????????????WebviewIframe.contentWindow.postMessage(message,?"*")
??????????????????console.log("fromWebViewIframe:?"+message.data)
??????????????????break;
??????????????//?web端發(fā)送消息給插件
??????????????case?'WebSendMesToVscode':
????????????????????vscode.postMessage(message);
????????????????????break;
??????????}
??????});
?????</script>
????????<div?class="outer">
???????????<iframe?id='WebviewIframe'?class="webView_iframe"?sandbox="allow-scripts?allow-same-origin?allow-forms?allow-pointer-lock?allow-downloads"?allow="cross-origin-isolated;?clipboard-read;?clipboard-write;"?src="http://localhost:5173/"></iframe>
????????</div>
????</body>
????</html>
????`;
??}
}
提供webview視圖的類創(chuàng)建好了，然后我們需要在入口函數(shù)中實例化一個webview，然后把這個視圖注冊到vscode側(cè)邊欄中
打開extension.ts文件，修改如下 （代碼可直接運行）
//?The?module?'vscode'?contains?the?VS?Code?extensibility?API
//?Import?the?module?and?reference?it?with?the?alias?vscode?in?your?code?below
import?*?as?vscode?from?"vscode";
import?{?ChatWebview?}?from?"./chatWebview";
//?This?method?is?called?when?your?extension?is?activated
//?vscode?插件入口函數(shù)，當(dāng)插件第一次加載時會執(zhí)行activate
export?function?activate(context:?vscode.ExtensionContext)?{
??console.log('Congratulations,?your?extension?"Chat"?is?now?active!');
??//?實現(xiàn)側(cè)邊欄的初始化
??//?實例化一個chatWebview
??const?chatWebview?=?new?ChatWebview();
??//?注冊webview?到id為?Chat-sidebar?的views中，這個id為?Chat-sidebar?的視圖我們稍后會在
??//?package.json?中聲明，先理解為我們要把iframe渲染在那個地方（側(cè)邊欄還是標(biāo)簽頁）需要在
??//?packagea.json?中控制
??context.subscriptions.push(
????vscode.window.registerWebviewViewProvider("Chat-sidebar",?chatWebview,?{
??????webviewOptions:?{
????????//?這是一個比較有用的配置項，可以確保你的插件在不可見時不會被銷毀，建議開啟，否側(cè)每次打開都會重新加載一次插件
????????retainContextWhenHidden:?true,
??????},
????})
??);
??//?這里實現(xiàn)了一個簡單的功能，在vscode打開的文件中，選中代碼時會實時展示在web頁面上
??//?監(jiān)聽用戶選中文本事件
??vscode.window.onDidChangeTextEditorSelection((event)?=>?{
????const?editor?=?event.textEditor;
????let?document?=?editor.document;
????let?selection?=?editor.selection;
???//?獲取當(dāng)前窗口的文本
????let?text?=?document.getText(selection);
????//?上文提到chatWebview可能為null?因此需要可選鏈寫法，所以這里存在不穩(wěn)定性，不過測試沒問題~
????chatWebview?.webview?.webview.postMessage({
??????//?第一次postMessage，下一次在chatWebview文件的iframe中?
??????command:?"vscodeSendMesToWeb",
??????data:?text,
????});
??});
}
//?This?method?is?called?when?your?extension?is?deactivated
export?function?deactivate()?{}
至此，我們實例化了ChatWebview，并將其與視圖Chat-siderbar綁定
下面我們需要在package.json中將視圖注冊到側(cè)邊欄中，并指定名字，圖標(biāo)等?打開package.json?文件，修改如下 將原本的?contributes?字段替換一下
確保activitybar 中的id，在views中有對應(yīng)的視圖，我們這里id是Chat-sidebar-view，在views就要有對應(yīng)名字的視圖， 并且該視圖?Chat-sidebar-view?的id為我們 ChatWebview 綁定的視圖id
"contributes":?{
????"commands":?[],
????"viewsContainers":?{
??????"activitybar":?[
????????{
??????????"id":?"Chat-sidebar-view",
??????????"title":?"Chat",
??????????"icon":?"images/vite.svg"
????????}
??????]
????},
????"views":?{
??????"Chat-sidebar-view":?[
????????{
??????????"type":?"webview",
??????????"id":?"Chat-sidebar",
??????????"name":?"?Chat",
??????????"icon":?"images/vite.svg",
??????????"contextualTitle":?"Chat"
????????}
??????]
????}
??},
至此！我們的視圖和雙向通訊在插件側(cè)已經(jīng)完成了，我們試一下！直接F5運行，打開拓展開發(fā)宿主
image.png
點擊左側(cè)欄圖標(biāo)，會看見我們deweb頁面加載出來啦！
再試一下選中文本的事件和postMessage通訊,點擊上方help，選擇倒數(shù)第三個Toggle developer tools或者按ctrl+shift+i?可以打開谷歌開發(fā)者工具，調(diào)試vscode
隨便打開一個項目文件，在窗口中選中文本，會發(fā)現(xiàn)控制臺一直在輸出?fromWebViewIframe: ......?,我們第一步通訊通了，下面在vue項目中加一下消息接收和發(fā)送。
（2） web項目修改，增加事件監(jiān)聽
打開index.html，增加message的監(jiān)聽，收到消息時插入到container中
<!DOCTYPE?html>
<html?lang="en">
??<head>
????<meta?charset="UTF-8"?/>
????<link?rel="icon"?type="image/svg+xml"?href="/vite.svg"?/>
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0"?/>
????<title>Vite?+?Vue?+?TS</title>
??</head>
??<body>
????<div?id="app"></div>
????<script?type="module"?src="/src/main.ts"></script>
????<script?type="module">
??????window.addEventListener("message",?(event)?=>?{
????????const?message?=?event.data;
????????switch?(message.command)?{
??????????case?"vscodeSendMesToWeb":
????????????const?div?=?document.getElementById("container");
????????????div.innerHTML?=?message.data;
????????????break;
????????}
??????});
????</script>
??</body>
</html>
我們試一下，在拓展開發(fā)宿主中選中文本，會實時展示在頁面上！
image.png
下面我們發(fā)送消息試一下 簡單修改一下?HellowWord.vue?組件，增加一個sendMessage 方法
<script?setup?lang="ts">
import?{?ref?}?from?"vue";
defineProps<{?msg:?string?}>();
const?count?=?ref(0);
const?sendMessage?=?()?=>?{
??window.parent.postMessage(
????{
??????command:?"WebSendMesToVscode",
??????data:?"this?message?is?from?vue3",
????},
????"*"
??);
};
</script>
<template>
??<h1>{{?msg?}}</h1>
??<div?class="card">
????<button?type="button"?@click="sendMessage">click</button>
????<p>
??????Edit
??????<code>components/HelloWorld.vue</code>?to?test?HMR
????</p>
??</div>
??<p>
????Check?out
????<a?
??????>create-vue</a
????>,?the?official?Vue?+?Vite?starter
??</p>
??<p>
????Install
????<a?>Volar</a>
????in?your?IDE?for?a?better?DX
??</p>
??<p?class="read-the-docs">Click?on?the?Vite?and?Vue?logos?to?learn?more</p>
</template>
<style?scoped>
.read-the-docs?{
??color:?#888;
}
</style>
我們點擊一下按鈕，會發(fā)現(xiàn)在當(dāng)前文件光標(biāo)處插入了一條信息。this message is from vue3!
到此我們的小插件展示出來了，也實現(xiàn)了數(shù)據(jù)互通。下面我們實現(xiàn)一個簡單對話UI，并接入百度文心一言大模型，做一個自己的插件小助手，如果他能記住我們之前問過的代碼，并幫我們舉一反三，并提醒我們查漏補缺就好了。
四：接入大模型對話能力，實現(xiàn)ChatUI
1. 大模型接入準(zhǔn)備
我分別注冊了智譜清言（chatGLM）與文心一言（ERNIE-Bot）,發(fā)現(xiàn)兩者都有基礎(chǔ)的免費額度，前者相對于后者代碼能力貌似更強一些，我們這里做一個簡單類似于代碼錯題本的對話助手，就接入文心一言吧
首先我們要去官網(wǎng)[5],注冊一下開發(fā)者賬號，并且實名認(rèn)證 整個過程很簡單，然后我們看一下api 文檔[6]
下面我把主要步驟說一下 首先我們要創(chuàng)建一個自己的應(yīng)用，獲取到Secret Key和API Key
進入下面頁面，點擊創(chuàng)建應(yīng)用，輸入應(yīng)用名稱和應(yīng)用描述直接確定即可，然后會有一個應(yīng)用生成，里面就有我們的Secret Key和API Key
我們要拿這兩個key，去獲取?access_token?和?refresh_token, 用于JWT鑒權(quán)，有兩種方式，其一我們可以在網(wǎng)頁中訪問一下拿到一次性30天的access_token用于臨時測試，其二最好在項目http請求前自動用refresh_token去獲取access_token
下面我們訪問一下這個地址,當(dāng)然你要把雙key換成你自己的應(yīng)用的~！https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=你的key&client_secret=你的key
直接用瀏覽器訪問一下呢，然后就在請求里拿到了access_token (不能有小可愛找不到吧~） 拿到token了我們來這里測試一下?測試地址[7]
填入標(biāo)出的這兩項，第二項示例如下
[
??{
????"role":?"user",
????"content":?"介紹一下自己"
??},
]
可以看到接口調(diào)用結(jié)果
image.png
2. nodejs調(diào)用api
首先找一個舒服的文件夾，新建一個node項目，我們這里選用express框架，可以參考我這里的命令行
image.png
npm init 后會生成一個package.json，然后我們安裝一下常用包npm install express sequelize mysql2 axios body-parser cors --save?之后就可以在vscode中打開我們的項目了，我們先新建一個server.js,作為我們的入口文件，再建一個chat.js?作為我們的大模型調(diào)用文件
兩個文件代碼如下，具體解析見注釋，可以直接復(fù)制過去，然后在控制臺執(zhí)行node server.js?直接啟動服務(wù)~
//server.js
const?Conversation?=?require("./chat.js");
const?express?=?require("express");
const?bodyParser?=?require("body-parser");
const?cors?=?require("cors");
const?app?=?express();
//?暫時允許所有跨域請求
let?corsOptions?=?{
??origin:?"*",
};
app.use(cors(corsOptions));
// content-type：application/json
app.use(bodyParser.json());
// content-type：application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({?extended:?true?}));
//?對話類
const?conversation?=?new?Conversation();
//?定義/chat路由處理POST請求
app.post("/chat",?async?(req,?res)?=>?{
??const?{?messages?=?""?}?=?req.body?||?{};
??if?(typeof?messages?!==?"string")?{
????return?res.status(400).send({?error:?"Invalid?messages?type"?});
??}
??try?{
????//?調(diào)用ask方法獲取大模型結(jié)果
????const?response?=?await?conversation.ask(messages);
????return?res.status(200).send({?message:?response?});
??}?catch?(error)?{
????return?res.status(500).send({?error:?error.messages?});
??}
});
//?設(shè)置監(jiān)聽端口
const?PORT?=?process.env.PORT?||?8080;
app.listen(PORT,?()?=>?{
??console.log(`服務(wù)器運行端口：?${PORT}.`);
});
chat.js
//?訪問模型服務(wù)
const?axios?=?require("axios");
//?這里就是你的accessToken，我改了兩個數(shù)，所以你得替換成自己的嘍~
const?accessToken?=
??"24.88635a1444105db00bb6684c0598a9a3.2542000.1741590285.281335-42231960";
const?ERNIEB4?=
??"https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro";
const?ERNIEB?=
??"https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions";
class?Conversation?{
??constructor()?{
????//?上下文數(shù)據(jù)存在這里，文心的調(diào)用是需要把所有的歷史對話數(shù)據(jù)全部傳過去，所以上下文窗口大小得注意
????this.messages?=?[];
??}
??async?ask(prompt)?{
????//?問句push進去
????this.messages.push({?role:?"user",?content:?prompt?});
????console.log("message"?+?this.messages[0]);
????try?{
??????const?res?=?await?axios.post(
????????ERNIEB,
????????{?messages:?this.messages?},
????????{?params:?{?access_token:?accessToken?}?}
??????);
??????const?{?data?}?=?res;
??????console.log(data);
??????//?答案也放進去
??????this.messages.push({?role:?"assistant",?content:?data.result?});
??????return?data.result;
????}?catch?(error)?{
??????console.log("調(diào)用模型失敗"?+?error);
????}
??}
}
//?導(dǎo)出函數(shù)
module.exports?=?Conversation;
所以我們的服務(wù)起了嗎？網(wǎng)頁試一下8080唄，通了就可以
image.png
下面我們在前端代碼中加一下接口調(diào)用，就大功告成啦！
想必看到這里你也累了，我們?nèi)フ{(diào)戲一下?Sydney
image.png
看來一時半會我們還是不可替代的 o_O
3. 前端接口調(diào)試
言歸正傳，我們來增加接口調(diào)用吧，順便畫一個看得過去的UI界面
先裝一下?npm install @ant-design/icons-vue
然后把App.vue刪一下
//?app.vue
<script?setup?lang="ts">
import?ChatUI?from?"./components/chatUI.vue";
</script>
<template>
??<div?class="container">
????<ChatUI?/>
??</div>
</template>
<style?scoped>
.container?{
??width:?100%;
??height:?100%;
}
</style>
無需多言，**chatUI.vue代碼**奉上(主要界面gpt畫的，我加了接口調(diào)用)\
//?chatUI.vue
<template>
??<div?class="chat-container">
????<div?class="messages">
??????<div
????????v-for="(item,?index)?in?chatList"
????????:key="index"
????????:class="['message',?item.type]"
??????>
????????<div?class="bubble">{{?item.content?}}</div>
????????<div?class="avatar">
??????????<component
????????????:is="item.type?===?'question'???UserOutlined?:?RobotOutlined"
??????????/>
????????</div>
??????</div>
????</div>
????<div?class="input-area">
??????<a-input
????????v-model:value="inputValue"
????????placeholder="Type?a?message..."
????????@pressEnter="handleSend"
??????/>
??????<a-button?type="primary"?@click="handleSend">send</a-button>
????</div>
??</div>
</template>
<script?setup?lang="ts">
import?axios?from?"axios";
import?{?ref?}?from?"vue";
import?{?UserOutlined,?RobotOutlined?}?from?"@ant-design/icons-vue";
const?inputValue?=?ref("");
let?chatList?=?ref<any[]>([]);
const?handleSend?=?()?=>?{
??const?question?=?inputValue.value.trim();
??if?(question)?{
????getAnswer(question);
????chatList.value.push({?type:?"question",?content:?question?});
????inputValue.value?=?"";?//?清空輸入框
??}
};
function?getAnswer(question:?string)?{
??const?URL?=?"http://localhost:8080/chat";
??const?payload?=?{
????messages:?question,
??};
??sendPost(
????URL,
????payload,
????{},
????(res:?any)?=>?{
??????console.log(res.data.message);
??????chatList.value.push({?type:?"answer",?content:?res.data.message?});
????},
????(err:?any)?=>?{
??????console.log(err);
????}
??);
}
//post方法
function?sendPost(
??url:?string,
??data:?any,
??headers?=?{},
??funcSuccess:?any,
??funcError:?any
)?{
??const?headerTem?=?{
????"content-Type":?"application/json;charset=UTF-8",
??};
??if?(JSON.stringify(headers)?!=?"{}")?{
????Object.assign(headerTem,?headers);
??}
??axios
????.post(url,?data,?{
??????headers:?headerTem,
????})
????.then(function?(res)?{
??????console.log("sendPost?res?info?:",?res);
??????funcSuccess(res);
????})
????.catch((err)?=>?{
??????console.log("sendPost?err?info?:"?+?err);
??????if?(funcError)?{
????????funcError(err);
??????}
????});
}
</script>
<style?scoped>
.chat-container?{
??min-width:?300px;
??height:?100%;
??display:?flex;
??flex-direction:?column;
??/*?background-color:?#1e1e1e;?*/
??border:?1px?solid?#999;
??border-radius:?8px;
}
.messages?{
??height:?650px;
??overflow-y:?auto;
??padding:?10px;
??display:?flex;
??flex-direction:?column;
??gap:?10px;
}
.bubble?{
??color:?#333;
??text-align:?right;
??margin-right:?8px;
}
.input-area?{
??display:?flex;
}
.message?{
??display:?flex;
??align-items:?center;
}
.question?{
??justify-content:?flex-end;
}
.answer?{
??justify-content:?flex-start;
}
</style>
這個就是簡單的調(diào)用接口，我就不注釋了，我們試一下接口
我們在vscode中看一下當(dāng)前效果
image.png
還可以吧，也不能要求AI太高，哈哈，我們問幾個問題試試
image.png
??？文心一言還挺強，緊跟時事哦
所以你的接口通了嗎？通了的話點個贊吧，好人一生平安~
沒通的話原因有點多，代碼是沒問題的，其他的可以評論區(qū)討論下
至此我們的聊天小插件算是開發(fā)完成了，我們學(xué)習(xí)了如何創(chuàng)建一個vscode插件，隨后搭建了一個vue3項目展示在了側(cè)邊欄里，然后我們用nodejs接入了文心一言api，前端調(diào)用接口簡單實現(xiàn)了對話功能，希望你看完這篇文章有所收獲，有所感想！
五：注冊開發(fā)者賬號并發(fā)布插件
1. 推薦教程
插件開發(fā)手冊[8]
根據(jù)教程注冊賬號，拿到自己的Token，通過vsce publish 1.0.x 來更新版本
2. 增加插件商店圖標(biāo)
插件商店的圖標(biāo)是通過讀取package.json中的icon來展示的,該字段與publisher同級
"icon": "images/icon.png",
3. 前端資源的緩存策略會影響插件web頁面的實時更新
因為插件實時訪問的前端服務(wù)，當(dāng)我們更新前端資源時，當(dāng)然希望插件能同步更新，此時要注意前端資源的緩存策略，最好是配置為 cache-control:no-store no-cache
六：實戰(zhàn)能力探討（會持續(xù)更新，歡迎探討）
1. 行內(nèi)提示功能的設(shè)計與實現(xiàn)（InlineCompletionItemProvider[9]）
先說一個思路，就是用InlineCompletionItemProvider實現(xiàn)行內(nèi)提示
2. SSH 遠(yuǎn)程打開文件能力（使用 remote-ssh 插件提供的命令）
先說一個思路，就是通過在控制臺執(zhí)行 remote-ssh 的命令 ：code --reuse-window vscode-remote://ssh-remote+${hostname}${path}?來實現(xiàn)打開遠(yuǎn)程ssh地址的文件，需要安裝remote-ssh插件文章來源：http://www.zghlxwxcb.cn/news/detail-765085.html
3. Json 文件可視化編輯（JsonToHtml）
先說一個思路，就是監(jiān)聽用戶打開文件夾時的事件，然后再窗口中打開一個新的webview，試用了一些jsonToHtml的包不如自己手動格式化，將bool格式化為checkbox等.文章來源地址http://www.zghlxwxcb.cn/news/detail-765085.html
到了這里，關(guān)于Vue3+NodeJS 接入文心一言， 發(fā)布一個 VSCode 大模型問答插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
