iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 7
0
Software Development

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

Day07 | 那些你可以自訂選項的Context Menu

大家好,我是韋恩,今天是第七天,讓我們來學習如何提供客製化選單的選項,讓使用者可以點擊執行我們的命令服務。

這幾天大家會有範例開始不斷的練習這些api,觀念已經夠多了,唯有動手練習才是熟悉它們的關鍵啊!

Context Menu簡介


在VSCode裡面,我們可以透過在不同的ui上點擊滑鼠右鍵,開啟選單,這些選單們稱之為Context Menu。

我們可以透過在extension專案的Contribution Point註冊Context Menu,並指定點擊時觸發的Command,客製化我們的選單選項。選單選項也可以透過When條件語句來決定顯示的時機。

Context Menu語法介紹


讓我們先來看一下註冊context的json格式。首先,我們需要menu作為key值,下面並在menu物件裡設定對應的選單位置(如: explorer/context),並在選單位置屬性的array陣列裡面註冊點擊後觸發的command物件設定。

{
...
"contributes": {
        ...
        "menu": {
          "${選單元件位置}": [
               {
                  command: "${commandId}",
                  when: "${boolean}",
                  alt: "${commandId}",
                  group: "${Sorting Group}"
               }
          ]
        }
        ...
	},
...
}
Command物件屬性

屬性 描述
command command的id,如前幾天所介紹
alt 備用的第二個commandId,按住alt鍵再點擊選單觸發
when 讀取context變數進行條件判斷後回傳的boolean決定是否顯示選單選項
group 選單選項的排序群組,不同UI排序群組各不相同,並可以照${自訂群組名稱}@${順序數字}的規則自訂順序群組(詳見

好的,以上就是Context Menu的設定語法,已經知道語法了,讓我們開始今天的練習吧!

Day07專案:練習使用Context Menu吧!


環境準備

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

如果環境建立有問題,請再次參照昨天或前天的教學建立專案與環境喔!
請先照下方程式於package.json設定Context Menu:

專案範例配置

  • 專案Contribution Points命令配置:

讓我們照以下指示設定extension專案,首先於packagage.json,我們要在Contribution Points裡設定三個Command,如下所示:

{
    ...
    "contributes": {
		"commands": [
            {
				"command": "day07-context-menu.panelVisible",
				"title": "Showing when panel is visible"
			},
			{
				"command": "day07-context-menu.panelVisibleAlt",
				"title": "Showing alterative command when using alternative menu item"
			},
			{
				"command": "day07-context-menu.panelInvisible",
				"title": "Showing when panel is invisible"
			}
		]
	},
    ...
}

  • 專案activationEvents配置:

設置完Command後,我們一樣要在package.json配置activationEvents

{
    ...
    "activationEvents": [
		"*"
	],
    ...
}
  • 專案extension.ts範例程式配置:
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

	let cmd1 = vscode.commands.registerCommand('day07-context-menu.panelVisible', async () => {
			await vscode.commands.executeCommand('workbench.action.togglePanel');
			vscode.window.showInformationMessage('Execute command when panel is visible');
	});

	let cmd1Alt = vscode.commands.registerCommand('day07-context-menu.panelVisibleAlt', async () => {
		await vscode.commands.executeCommand('workbench.action.toggleDevTools');
		vscode.window.showInformationMessage('Execute command when using alternative menu command');
 });

	let cmd2 = vscode.commands.registerCommand('day07-context-menu.panelInvisible', async () => {
		 await vscode.commands.executeCommand('workbench.action.togglePanel');
	 	vscode.window.showInformationMessage('Execute command when panel is invisible');
	});

	context.subscriptions.push(cmd1, cmd1Alt, cmd2);
}

export function deactivate() {}

請讀者照順序配置今天的vscode專案,接下來,我們要開始設定今天的Context Menu。

  • Context Menu設定練習:

首先,讓我們到contributes的commands屬性下面,輸入menu: { ... },然後,在物件括弧裡輸入""

可以看到vscode自動補全各類選單位置的選項,太好了,不用特別記api,我們就知道有哪些位置選項可以使用。

讓我們選取explorer/context,再將explorer/context的屬性裡的命令物件括弧起來,再次按下""

可以再次看到vscode現在幫我們補全了command物件的選項,讓我們選擇command,並照昨天的教學找到一個操作vscode的commandId來小試身手吧(詳見今天的extension.ts範例)。

好的,接下來,讓我們依序填上各command物件屬性,如下所示:

{
...
    "menus": {
        "explorer/context": [
            {
                "command": "day07-context-menu.panelVisible",
                "alt": "day07-context-menu.panelVisibleAlt",
                "when": "activePanel",
                "group": "navigation"
            },
            {
                "command": "day07-context-menu.panelInvisible",
                "when": "!activePanel",
                "group": "navigation"
            }
        ]
    }
...
}

這兩個Command都設定完後,按下F5,讓我們執行完成後的extension範例,並檢視結果。

啟動Extension開發用的VSCode視窗後,我們先右鍵點擊explorer打開選單。

  • 右鍵點擊File Explorer:

打開選單後,我們可以看到選單上第一個選項出現了我們設置的選單選項,選項的內容即是我們綁定在explorer的第一個command的title。當我們點擊下去,我們會關閉panel。

  • Panel關閉後,右鍵點擊Explorer:

panel關閉後,當我們再次打開menu,我們可以看到原來的選項已經消失,同時出現了另一個選項,內容「Showing when panel is invisible」即是我們綁定的第三個command的title。

讓我們按下該選項,並檢視該選項是否順利的再次打開panel吧!

  • 按住alt右鍵點擊Explorer:

好的,現在我們又回到了panel打開的狀況,我們這次按住alt鍵,並右擊打開menu,此時可以看到我們在explorer/context下面第一個command物件的alt屬性指定的command的title。

點擊選項下去,此時我們可以如預期的開啟vscode自己的chrome devtool。

總結


好的,以上就是今天context menu的所有練習內容,相信聰明的你,透過範例與這幾天學的觀念能夠快速的掌握contex menu的應用。就像我們之前提的,api文件跟設定不需要繁瑣的一條條列出學完,重點是知道大方向跟觀念,並了解怎麼照著自己想做的應用的方向查詢文件,並動手實際驗證。

在今天的範例裡,我們的command物件裡的when條件運用到了activePanel這個context的狀態值判斷要切換哪一個menuItem,讀者們知道要在哪裡查到這個選項嗎?其實,就在我們之前提過的keybindings單元裡。讀者在開發時可多加利用該節when-clause-contexts)下面的設定用法。

跟各位老實報告,在準備這個範例以前,我不知道這個context變數的具體名稱,但就我在準備範例的時候(鐵人賽第七天),透過關鍵字很快地就讓我發現了這個context變數,並準備好了範例文章。希望讀者們也能夠快速查詢到任何跟何自己應用有關的資訊,幫助自己快速完成project。

本日參考文件



上一篇
Day06 | 用Command API來操控使用者的VSCode吧
下一篇
Day08 | 提供使用者Extension的設定選項吧
系列文
自己用的工具自己做! 30天玩轉VS Code Extension之旅36

尚未有邦友留言

立即登入留言