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

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

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的功能，我們明天見，謝謝大家。