iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
0
Software Development

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

Day22 | 創建使用者的Snippet工作區

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

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


上一篇
Day21 | 把選取的程式碼轉換為snippet物件吧!
下一篇
Day23 | 開發Snippet用的元件(一)
系列文
自己用的工具自己做! 30天玩轉VS Code Extension之旅36

尚未有邦友留言

立即登入留言