VSCode IDE插件界面里各個組件的展示方式和相應代碼

本文導航

本文會涉及到如下幾個IDE組件：左邊側邊欄，樹形視圖，右鍵菜單，終端面板，彈窗，狀態欄，Webview視圖。會展示每個組件的視圖和相應的代碼位置。

VSCode-Huawei IDE插件開發

官方指導文檔：https://marketplace.rnd.huawei.com/vscode_huawei/api/簡介

VSCode-Huawei樣式規范：http://vscodehuaweiui.tools.huawei.com/

1. 左邊側邊欄

側邊欄通常用來顯示一系列擁有左側樹形視圖的服務。

可通過在package.json的contributes -> viewsContainers -> activitybar中定義自己的側邊欄視圖。

2. 樹形視圖

樹形視圖主要用來展示服務數據，單個視圖內的數據成樹形結構，默認每條數據占據一行，可顯示圖標、文本、焦點信息等，還可以包含可展開的子數據列表。

可通過在package.json的contributes -> views –> ${viewID}中定義自己的樹形視圖（里面的viewID為視圖ID，可以是VSCode已有的explorer, debug等，也可以是自己在activitybar中定義的視圖ID）。

或則

樹形視圖里面的數據可以通過自己創建一個resultTreeProvider.ts文件

3. 右鍵菜單

右鍵菜單是menus擴展點中的一種，可以是代碼編輯區的右鍵菜單，資源列表里的右鍵菜單，IDE終端的按鈕 或則 IDE終端里的篩選分類選項。

可以通過在package.json的contributes -> menus -> xxx/context中定義(如explorer/context、editor/context、view/item/context等，通過關聯一個command來提供相關功能)。

代碼編輯區的右鍵菜單：

資源列表里的右鍵菜單：

IDE終端里的篩選分類選項：

4. 終端面板

如果需要執行命令行并顯示執行結果，可以在代碼中通過vscode.window.createTerminal創建一個終端面板，并通過vscode.Terminal的show和sendText方法顯示終端面板并發送要執行的命令行。

5. 彈窗

當需要給用戶反饋操作結果、接口請求錯誤等信息時，通常采用彈窗提示的方式。VSCode的彈窗分為三種樣式，分別是信息彈窗、警告彈窗和錯誤彈窗。

三種彈窗分別使用vscode.window.showInformationMessage、vscode.window.showWarningMessage和vscode.window.showErrorMessage方法生成，彈窗同時支持簡單的按鈕（items參數）和按鈕點擊事件（then方法）。

6. 狀態欄

當需要給用戶顯示持續一段時間的信息時，如接口請求、操作請求過程中的提示信息等，VSCode通常會選擇將其顯示在狀態欄上。

可以在代碼中通過vscode.window.createStatusBarItem創建一個狀態欄項，設置其text、tooltip等屬性，并通過show()方法顯示。狀態欄項還支持關聯到一個command。

7. Webview視圖

由于VSCode對其插件的樣式和顯示有比較嚴格的限制，因此如果想按照自己的方式顯示界面，通常需要借助Webview視圖。

我們可以通過在代碼中使用vscode.window.createWebviewPanel創建一個包含Webview視圖的編輯器頁簽，并通過其webview.html屬性設置Webview視圖的html文本。

Webview視圖的html頁面可以關聯本地的js、css和圖片等文件。但需要注意的是，由于VSCode的限制，在Webview視圖的html頁面不能通過http請求api接口，因此如果需要在頁面上展示接口數據，需要在Webview視圖外請求數據，而Webview視圖內的頁面可以通過webview.postMessage和webview.onDidReceiveMessage方法與外部進行數據通信。

HTML WebView

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。