大家好，我是韋恩，今天是鐵人賽的二十二天，讓我們來幫專案實現創建工作區的功能吧！

Day22專案實作: 創建使用者的snippet工作區

在前天的練習，我們create了一個Welcome Page，並讓用戶可以選取存在Snippet WorkSpace或另外新建一個

現在我們來實作點擊create a workspace後的流程。

首先，我們要讓用戶可以開啟檔案Finder並選取其中一個資料夾。

在VSCode的window命名空間裡面，提供了一個開啟檔案資料夾的showOpenDialog方法，可以讓我們開檔案對話框讓我們選取檔案或資料夾，讓我們先在createWorkspace的命令下練習。

let createWorkspace = vscode.commands.registerCommand('ithome30-code-manager.createWorkspace',async () => {
        const workspacePath = await vscode.window.showOpenDialog({
            title: 'Select a folder as code-manager workspace',
            canSelectFiles: false,
            canSelectFolders: true,
		    canSelectMany: false
        });
        console.log(workspacePath);
});	

預設狀況下，開啟的對話框只能選取檔案，因此我們在設定的物件裡做些配置讓使用者可以選取做為workspace的資料夾。我們將canSelectFiles設為false，同時將canSelectFolder設定為true，並給定一個對話框的標題。

現在我們執行extension並點擊create a worksapce觸發命令，可以看到會跳出選取檔案的對話框。

接著我們在選定的資料夾底下創建一個code-manager-snippets資料夾

創建code-manager-snippets資料夾後，我們選取它並使用右下方的打開按鈕。

我們會看到command裡的方法在debug的console裡打印出的workspacePath會是一個包含了vscode.uri的陣列，因此我們可以取出陣列裡的第一個uri，並拿到底下的path值，並儲存為code-manager的工作區路徑。

了解這點後，我們即可將其儲存至擴充套件全域的storage裡，並初始化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',async () => {
			const workspacePath = await vscode.window.showOpenDialog({
				title: 'Select a folder as code-manager workspace',
				canSelectFiles: false,
				canSelectFolders: true,
				canSelectMany: false
			});
			if(workspacePath) {
				context.globalState.update('workspace', workspacePath[0].path);
				registerTreeview(context);
			}
	});	
    ...
}

export function deactivate() {}

結語

好啦，今天，我們了解了如何讓使用者選取工作區的資料夾跟相關API的應用，

明天會開始實作加入snippet的功能，我們明天見，謝謝大家。