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

這幾天大家會有範例開始不斷的練習這些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物件屬性

好的，以上就是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。

本日參考文件

• Contribution Points