VSCode插件開發--添加側邊欄入口和面闆

先看一張圖

在VSCode的文檔中，側邊欄按鈕入口稱之為

Tree View Container

，側邊欄面闆稱之為

Tree View

，本文涉及的就是這兩個區域。

建立工程

使用

yo code

腳手架建立一個插件工程，語言選擇

TypeScript

。具體過程略

配置側邊欄按鈕(Tree View Container)和面闆視圖(Tree View)

側邊欄按鈕(Tree View Container)和面闆視圖(Tree View)要同時配置，否則不生效。

打開

package.json

，添加以下内容

"contributes": {
        "viewsContainers": {
            "activitybar": [
                {
                    "id":"sidebar_test",
                    "title": "側邊欄測試",
                    "icon": "入口.svg"
                }
            ]
        },
        "views": {
            "sidebar_test":[
                {
                    "id":"sidebar_test_id1",
                    "name":"面闆區塊名稱1"
                },
                {
                    "id":"sidebar_test_id2",
                    "name":"面闆區塊名稱2"
                }
            ]
        }
	}
           

按鈕圖檔格式，需要使用svg格式。views中key要和activitybar中的屬性id保持一緻，如sidebar_test在兩者中是一緻的。

以上配置了一個

sidebar_test

的側邊欄按鈕，點選按鈕，會出現

面闆區塊名稱1

和

面闆區塊名稱2

兩個區塊。

定義面闆内容

以上僅僅是将面闆入口添加上了，若添加内容與指令，則需要

registerTreeDataProvider

、

TreeDataProvider

、

TreeItem

用于内容管理，以及

registerCommand

注冊指令

建立腳本

test.ts

,内容如下

import * as vscode from 'vscode';

// 樹節點
export class EntryItem extends vscode.TreeItem
{
}

//樹的内容組織管理
export class EntryList implements vscode.TreeDataProvider<EntryItem>
{
    onDidChangeTreeData?: vscode.Event<void | EntryItem | null | undefined> | undefined;
    getTreeItem(element: EntryItem): vscode.TreeItem | Thenable<vscode.TreeItem> {
        return element;
    }
    getChildren(element?: EntryItem): vscode.ProviderResult<EntryItem[]> {
        if (element) {//子節點
            var childs = [];
            for (let index = 0; index < 3; index++) {
                let str = index.toString();
                var item = new EntryItem(str,vscode.TreeItemCollapsibleState.None);
                item.command = {command:"sidebar_test_id1.openChild", //指令id
                                title:"标題",
                                arguments:[str] //指令接收的參數
								};
                childs[index] = item;
            }
            return childs;
        } else { //根節點
            return [new EntryItem("root",vscode.TreeItemCollapsibleState.Collapsed)];
        }
    }
}
           

然後在

extension.ts

中添加内容

import * as vscode from 'vscode';
import * as sidebar from './test';

/// 插件激活時
export function activate(context: vscode.ExtensionContext) {

    //注冊側邊欄面闆的實作
    const sidebar_test = new sidebar.EntryList();
	vscode.window.registerTreeDataProvider("sidebar_test_id1",sidebar_test);
    //注冊指令 
	vscode.commands.registerCommand("sidebar_test_id1.openChild",args => {
        vscode.window.showInformationMessage(args);
    });

 其他内容保持不變
}
           

最後，在

package.json

，添加面闆區塊的展示事件，以驅動内容變化

"activationEvents": [
        "onView:sidebar_test_id1"
	],
	"contributes": {
	}
           

運作結果如下

參考位址

https://code.visualstudio.com/docs/extensionAPI/vscode-api