iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
Software Development

自己用的工具自己做! 30天玩轉VS Code Extension之旅系列 第 20

Day20 | 初始專案與元件配置

大家好,今天是第二十天,讓我們開始配置專案與基本元件吧!

今天我們會先配置樹狀元件,配合明天的功能實作做準備。

CodeManager專案實戰


環境準備

  • 使用yoman產生extension專案:
yo code
  • 依序輸入專案名稱、id等資訊

專案範例配置

  • 專案Contribution Points命令配置:

讓我們照以下指示設定extension專案,首先於packagage.json,我們要在Contribution Points裡的View註冊TreeView跟相關Command,如下所示:

{
    ...
    "contributes": {
        "viewsContainers": {
				"activitybar": [
						{
								"id": "code-manager",
								"title": "Code Manager",
								"icon": "assets/view.svg"
						}
				]
		},
		"views": {
            "code-manager-explorer": [
						{
								"id": "cmtreeview",
								"name": "Code Manager Exploerer",
								"icon": "assets/view.svg"
						}
			]
		},
		"viewsWelcome": [
                {
                        "view": "cmtreeview",
                        "contents": "Welcome to CodeManager\n Please Select your CodeManagerWorkspace \n[choose a workspace](command:ithome30-code-manager.chooseWorkspace)\n[create a workspace](command:ithome30-code-manager.createWorkspace)"
                }
        ],
		"commands": [
                {
                    "command": "ithome30-code-manager.createWorkspace",
                    "title": "Code Manager: create a workspace"
                },
                {
                    "command": "ithome30-code-manager.chooseWorkspace",
                    "title": "Code Manager: choose an exist workspace"
                }
        ]
    },
    ...
}

  • 專案activationEvents配置:

設置完TreeView與Command後,為了開發方便,我們先在package.json配置activationEvents,等到extension完成再做
修改。

{
    ...
    "activationEvents": [
		"*"
	],
    ...
}

上面的設定都完成後,啟動Extension,應可看到Treeview已經順利呈現,這裡的Treeview就是顯示我們CodeManager的工作區的地方。

在完成Treeview的設定後,我們可以開始撰寫tree的data provider。底下我們在src資料夾下面創建一個treeview.ts檔案。先寫好Treeview的骨架,之後我們介紹CodeManager的Workspace配置後會繼續實作讀取專案snippet資料的邏輯。

treeview.ts內容如下:

import * as vscode from 'vscode';

export class TreeViewItem extends vscode.TreeItem {
	constructor(label: string, collapsibleState?: vscode.TreeItemCollapsibleState) {
		super(label, collapsibleState);
		this.contextValue = 'snippetItem';
		this.iconPath = new vscode.ThemeIcon('chevron-right');
	}
}

export class DataProvider implements vscode.TreeDataProvider<TreeViewItem> {

	private dataStorage = [
		new TreeViewItem('snippet-01'),
		new TreeViewItem('snippet-02'),
		new TreeViewItem('snippet-03'),
		new TreeViewItem('snippet-04'),
	];

	private eventEmitter = new vscode.EventEmitter<TreeViewItem | undefined | void>();

	public get onDidChangeTreeData(): vscode.Event<TreeViewItem | undefined | void> {
		return this.eventEmitter.event;
	}

	constructor(private context: vscode.ExtensionContext) {}

	public getTreeItem(element: TreeViewItem): vscode.TreeItem | Thenable<vscode.TreeItem> {
		return element;
	}

	public getChildren(element?: TreeViewItem): vscode.ProviderResult<TreeViewItem[]> {
		return Promise.resolve(this.dataStorage);
	}

	public addItem(newItem: TreeViewItem) {
		this.dataStorage.push(newItem);
		this.updateView();
	}

	public editItem(item: TreeViewItem, name: string) {
		const editItem = this.dataStorage.find(i => i.label === item.label);
		if (editItem) {
			editItem.label = name;
			this.updateView();
		}
	}

	public deleteItem(item: TreeViewItem) {
		this.dataStorage = this.dataStorage.filter(i => i.label !== item.label);
		this.updateView();
	}

	private updateView() {
		this.eventEmitter.fire();
	}
}

在TreeItem的class下面,我們指定了contextValue,這變數值可以讓我們用於contrubution point裡面使用,用於判斷是否顯示對應物件。

接著我們配置了VSCode的內置icon。

export class TreeViewItem extends vscode.TreeItem {
	constructor(label: string, collapsibleState?: vscode.TreeItemCollapsibleState) {
		...
		this.iconPath = new vscode.ThemeIcon('chevron-right');
	}
}

這是一個官方網站教學尚未介紹的設定,可以讓我們透過指定icon名字,於TreeItem中使用VSCode內建的icon。

有興趣的讀者可以於codicon網站查閱各vscode內建的icon,並獲取icon的名字用於TreeItem上。

現在有了DataProvider,讓我們在最後提供一個registerTreeview的方法給extension.ts使用

export const registerTreeview = (context: vscode.ExtensionContext) => vscode.window.registerTreeDataProvider('cmtreeview',
	new DataProvider(context)
);
  • 專案extension.ts範例程式配置:

好的,現在有了registerView方法,先讓我們註冊command,並在command被執行後顯示treeview的資料。


import * as vscode from 'vscode';
import { registerTreeview } from './treeview';

export function activate(context: vscode.ExtensionContext) {

	let createWorkspace = vscode.commands.registerCommand('ithome30-code-manager.createWorkspace', () => {
			registerTreeview(context);
	});	

	let chooseWorkspace = vscode.commands.registerCommand('ithome30-code-manager.chooseWorkspace', () => {
		registerTreeview(context);
	});

	context.subscriptions.push(createWorkspace, chooseWorkspace);
}

export function deactivate() {}

以上都完成後,可執行extension,並點擊create a workspace的按鈕確認treeview正常顯示。

若操作正確,可以看到顯示了我們給定的snippet-01等標題。

結語


好啦,今天,我們配置了基本的TreeView作為Workspace的各個snippet顯示元件。

明天會開始實作選取工作區與加入snippet的功能,我們明天見,謝謝大家。


上一篇
Day19 | 專案實戰:CodeManager介紹
下一篇
Day21 | 把選取的程式碼轉換為snippet物件吧!
系列文
自己用的工具自己做! 30天玩轉VS Code Extension之旅36

尚未有邦友留言

立即登入留言