做一個可以聊天的 Visual Studio Code 外掛

你每天有在用 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 (瞭解更多可以訪問 https://code.visualstudio.com...)和應用場景擴充套件 API (瞭解更多可以訪問 https://code.visualstudio.com...)。

如何開發一個 Visual Studio 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 ，可以看到右下角的顯示

Visual Studio Code 外掛專案主要檔案

1.package.json

這是基本配置檔案，包含了開發該外掛支援的 Visual Studio Code 版本，以及相關命令繫結等。
2.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 外掛中就可以了。

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

去 Azure Portal 建立一個文字分析服務，記得選擇自定義問題解答
建立成功後，開啟 Language Studio , 登陸繫結剛才建立的服務，就可以使用
關於問答語料，Language Studio 可以在自定義問題解答服務裡面把非結構檔案，變成問答的預料，在這裡我用一個 MSDN 公眾號上關於 Daper 1.7 更新的文件儲存為 docx 檔案作為語料
在 Language Studio 中，建立一個自定義問題解答服務

建立一個新專案，並上傳上面生成的 docx 檔案，生成關於 Dapr 問答的中文語料

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

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

如果你確認無誤後，就可以選擇部署知識庫，釋出你的自定義問題解答
部署成功後，你就可以點選“建立機器人”生成基於 Dapr 知識點的問答機器人了

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

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

把問答機器人加到 Visual Studio Code 外掛中

通過Azure 建立的問答機器人有多種部署方式，最簡單的方式是通過 Web 的方式部署，所以外掛是通過 WebView 的方式繫結剛才建立的問答機器人。

從 Azure Portal 選擇剛才建立的問答機器人資源，並選擇“渠道”選擇“ Web Chat ” 再選擇 Default Web 獲取 Key 和相關程式碼
在之前建立好的 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);

我們在執行一下我們的外掛專案，就可以啟動我們的聊天外掛了

後記

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