做⼀個可以聊天的 VS Code 插件

語言: CN / TW / HK

時間 2022-04-30 10:12:10 微軟中國MSDN

（本文閲讀時間：6分鐘)

你每天有在用 Visual Studio Code 嗎？根據面向程序開發人員的時間跟蹤工具 WakeTime 統計，在 2020 年全球開發者使用 Visual Studio Code 的時間合共 1800 萬小時。這是一個非常驚人的數字。你有想過開發一個 Visual Studio Code 插件嗎？

Visual Studio Code 插件介紹

Visual Studio Code 是一個免費，開源的編輯器，通過結合不同的插件，你可以完成不同應用場景的開發。在 Visual Studio Code 中有超過 3萬個插件,涉及編程語言,調試/測試,數據科學,雲計算等。通過 Visual Studio Code 提供的 API 你可以構建不同類型的插件。Visual Studio Code 插件 AP包括了編程語言擴展 API和應用場景擴展 API 。

瞭解更多編程語言擴展 API :

http://code.visualstudio.com/api/language-extensions/overview?ocid=AID3042760
瞭解更多應用場景擴展 API:

http://code.visualstudio.com/api/extension-guides/overview?ocid=AID3042760

如何開發一個 VS Code 插件

1. 環境安裝

Visual Studio Code 開發需要 Node.js , 並通過 npm 安裝好 Yeoman 和 Visual Studio Code 創建模版。以下是相關語句

npm install -g yo generator-code

一個小建議： Visual Studio Code 插件支持用 TypeScript 和 JavaScript 開發，我推薦使用 TypeScript 去進行開發。所以小夥伴也把 TypeScript 的環境安裝好。

2. 通過 Yoeman 創建一個簡單的 Code 插件，執行以下命令創建一個 Visual Studio Code 項目

yo code

通過命令行的反饋你可以快速創建一個項目

通過 Visual Studio Code 打開項目文件夾

點擊 Run and Debug 運行這個項目，可以看到 Visual Studio Code 會新開一個窗口，通過按 Ctrl+Shift+P ( Windows / Linux) 或 CMD+ Shift + P ( macOS ) 輸入 Hello World ，可以看到右下角的顯示

VS Code 插件項目主要文件

package.json

這是基本配置文件，包含了開發該插件支持的 Visual Studio Code 版本，以及相關命令綁定等。
src/extension.ts

這是插件最主要的邏輯文件，你可以通過它對輸入命令進行響應, 包括了 Language Server 的調用以及配置設定等 API 的調用。

以下是我畫的基於這兩個文件的一些要點和關聯，希望可以幫助大家更好理解

聊天Visual Studio 插件的思考和架構

技術不斷髮展，開發人員會接觸很多新的技術，新的應用場景。這個時候可能很多的開發者會選擇在互聯網上查找相關的信息，但我在想如果有一個插件放在 Visual Studio Code 是否更方便開發人員去查找和了解信息。我們之前瞭解了 Visual Studio Code 插件的構建方式，接下來我們想想如何做聊天部分？在 Microsoft Azure 就有非常的 Bot Service ，通過 Bot Service 結合 Language Studio 中的文本分析，問答設定，實體關聯等就可以構建我們的聊天工具，然後利用 Web 的方式嵌入到 Visual Studio Code 插件中就可以了。

搭建一個簡單的問答機器人

1. 去 Azure Portal 創建一個文本分析服務，記得選擇自定義問題解答

2. 創建成功後，打開 Language Studio( http://language.azure.com/ ), 登陸綁定剛才創建的服務，就可以使用

3. 關於問答語料，Language Studio 可以在自定義問題解答服務裏面把非結構文件，變成問答的預料，在這裏我用一個 MSDN 公眾號上關於 Daper 1.7:link: 更新的文檔保存為 docx 文件作為語料

4. 在 Language Studio 中，創建一個自定義問題解答服務

創建一個新項目，並上傳上面生成的 docx 文件，生成關於 Dapr 問答的中文語料

5. 選擇“編輯知識庫” 在選擇“測試”，可以看看效果

注意：你可以對相關問題的答案進行鑑別和調整

6. 如果你確認無誤後，就可以選擇部署知識庫，發佈你的自定義問題解答

7. 部署成功後，你就可以點擊“創建機器人”生成基於 Dapr 知識點的問答機器人了

創建會跳轉到 Azure Portal 你只需要按照提示把問答機器人的名字，關聯的區域以及 App Service 就創建成功了

8. 選擇剛創建好的問答機器人應用，選擇在“Web 中測試聊天” 檢查一下語料和機器人是否綁定成功

打開 Language Studio：

http://language.azure.com/

把問答機器人加到 VS Code 插件中

通過Azure 創建的問答機器人有多種部署方式，最簡單的方式是通過 Web 的方式部署，所以插件是通過 WebView 的方式綁定剛才創建的問答機器人。

1. 從 Azure Portal 選擇剛才創建的問答機器人資源，並選擇“渠道”選擇“ Web Chat ” 再選擇 Default Web 獲取 Key 和相關代碼

2. 在之前創建好的 VSCode 項目中修改 src/extension.ts 文件中的代碼，替換一下如下代碼

let disposable = vscode.commands.registerCommand('chatbotdemo.helloWorld', () => {




     const panel = vscode.window.createWebviewPanel("chatRoom", "VSCode Chat Room", vscode.ViewColumn.Two, {
         enableScripts: true,
         retainContextWhenHidden: true,
     });
     
     panel.webview.html = `<body style="margin:0px;padding:0px;overflow:hidden">
         <iframe src="替換通過azure上獲取的鏈接和相關key" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
     </body>`;
 });


 context.subscriptions.push(disposable);

3. 我們在運行一下我們的插件項目，就可以啟動我們的聊天插件了

構建一個 Visual Studio Code 的插件並不難，關鍵要有多方面的技術知識，希望小夥伴能發揮更多的創意創建更多好玩的插件。和大家透露一下，我會完善這個基於技術知識問答機器人插件的開發，讓更多的開發者遇到問題和學習技能的時候能通過該插件進行溝通。

相關資料

申請免費的 Azure 資源，請訪問該鏈接

http://azure.microsoft.com/zh-cn/free/?ocid=AID3042760
申請學生版本的免費 Azure 資源，請訪問該鏈接

http://aka.ms/studentgetazure?ocid=AID3042760?ocid=AID3042760
Visual Studio Code API 相關文檔，請訪問該鏈接

http://code.visualstudio.com/api?ocid=AID3042760?ocid=AID3042760
關於 Language Studio 的相關知識，請訪問該鏈接

http://docs.microsoft.com/zh-cn/azure/cognitiveservices/language-service/language-studio?ocid=AID3042760
瞭解 Azure Bot Service 的相關知識，請訪問該鏈接

http://docs.microsoft.com/en-us/azure/botservice/?view=azure-bot-service-4.0?ocid=AID3042760

謝謝你讀完了本文～相信你一定有一些感想、觀點、問題想要表達。 歡迎在評論區暢所欲言 ，期待聽到你的“聲音”哦！

同時， 喜歡的內容也不要忘記轉發給你的小夥伴們 ，謝謝你的支持！

長按識別二維碼

關注微軟中國MSDN

申請免費的 Azure 資源

「其他文章」