Contribution Points
もろもろの設定は、packange.jsonに書いていく感じ
// 拡張機能の設定 "contributes": { // 設定画面関連 "configuration": {}, // Command関連: このコマンドが色んなところから呼ばれる "commands": [], // ActivityBarやPanel関連の設定 "viewsContainers": {}, // ActivityBarやPanel内のView関連 "views": {}, // キーバインド/ショートカット関連 "keybindings": [], // View Actions / Toolbar / Context Menu関連 "menus": { // View Actions "view/title": [], // ViewのContext Menu "view/item/context": [], // Command Palette関連 "commandPalette": [] } }
configuration: 設定画面関連
設定画面に表示される項目
// 拡張機能の設定 "contributes": { // 設定画面関連 "configuration": { // 設定画面のタイトル "title": "Sotable Explorer", // 設定画面の項目 "properties": { "sortable-explorer.viewMode": { // 項目の説明 "description": "ファイルの表示モード（flat: フラット表示, tree: ツリー表示）", // 項目の型 "type": "string", // enumの場合、ここで値を指定 "enum": [ "flat", "tree" ], // デフォルト値 "default": "tree", // 並び順 "order": 0 }, "sortable-explorer.includePatterns": { "description": "表示するファイル/フォルダのパターン（空の場合はすべてのファイルが対象）", "type": "array", "items": { "type": "string" }, "default": [ "**/*.md", "**/*.txt" ], "order": 1 }, } }, }
- "type"には、
number/string/boolean/array/objectも利用できる - "description"のほかに、Markdownが使える
markdownDescriptionもある - "enum"では、
enumDescriptions/markdownEnumDescriptionsの説明やenumItemLabelsで値のラベルも指定できる
default以外に、JSON Schemaのvalidationも利用でき
minimum/maxLength/pattern/formatなども利用できる
API: workspace.config
APIからの利用方法はこんな感じ
import * as vscode form "vscode"; // 設定の取得 const setting1 = await vscode.workspace.getConfiguration('myExtension').get('mySetting1'); // 設定の保存(ワークスペース) await vscode.workspace.getConfiguration('myExtension').update('mySetting1', "foo");
commands: コマンド
Command PaletteやToolbar、Context Menuなどから呼び出されるコマンドの実態
- contributes.commands | Contribution Points | Visual Studio Code Extension API
- Commands | Extension Guide | Visual Studio Code Extension API
"contributes": { // Command関連: このコマンドが色んなところから呼ばれる "commands": { // コマンドのID "command": "sortable-explorer.refreshFileExplorer", // コマンドのタイトル: ツールバーのTooltipなどで利用 "title": "更新", // Toolbarなどでのアイコン "icon": "$(refresh)", // コマンドパレットでのカテゴリ "category": "Sortable Explorer" } }
- "category"を指定すると、コマンドパレットで
<category>: <title>で表示される- "category"が未指定だと、
<title>で表示
- "category"が未指定だと、
- "icon"は、自作のアイコン画像も利用できる
API: commands
import * as vscode form "vscode"; // コマンドの登録 vscode.commands.registerCommand( "sortable-explorer.refreshFileExplorer", () => {}, // 実際に実行されるコマンドの中身 ); // コマンドの実行 await vscode.commands.executeCommand("sortable-explorer.refreshFileExplorer");
- コマンドの実行は、VSCodeの組み込みコマンドも実行できる
viewsContainers: ActivityBarやPanel関連の設定
ActivityBarやPanelにViewを追加したい場合は、ここに設定する
"contributes": { // ActivityBarやPanel関連の設定 "viewsContainers": { // ActivityBarに追加する設定 "activitybar": [ { "id": "sortable-explorer", "title": "%displayName%", "icon": "$(notebook)" } ], // Panelに追加する設定 "panel": [ { "id": "sortable-explorer", "title": "%displayName%", "icon": "$(notebook)" } ], } }
- ActivityBarかPanelのどちらかしか追加できない
views: TreeViewなどのCustom View
"contributes": { // ActivityBarやPanel内のView関連 "views": { // 差し込むviewContainerのIDと、追加するView "sortable-explorer": [ { // ViewのID "id": "sortable-explorer.fileExplorer", // Viewの名前 "name": "Explorer", // Viewのアイコン "icon": "$(list-tree)" }, ] }, }
- 1つのViewCotainerには、複数のViewを配置できる
- VSCode標準のViewContainerにも追加できる
explorer... 標準のエクスプローラーscm... GitなどのSource Control Management(SCM)debug... Run and Debug view containertest... Test view container
whenで表示条件を指定できるcontextualTitleでデフォルトのviewContainer外に移動されたときのタイトルを変更できる
ここで指定できるViewは、TreeViewやWebviewなど
- Views | Visual Studio Code Extension API
- Tree View API | Visual Studio Code Extension API
- Webview API | Visual Studio Code Extension API
keybindings: キーバインド/ショートカット関連
キーバインド系はこのあたり
- keybindings | Contribution Points | Visual Studio Code Extension API
- Keyboard shortcuts for Visual Studio Code
コマンドと対応するkeyや実行できる条件(when)を指定する感じ
{ "contributes": { "keybindings": [ { "command": "extension.sayHello", "key": "ctrl+f1", "mac": "cmd+f1", "when": "editorTextFocus" } ] } }
menus: View Actions / Toolbar / Context Menu関連
contributes.menus配下に、Toolbarなどのボタンを追加できる
いろんな場所に差し込めるので、表示したい場所や条件で、
表示箇所を指定する感じ
"contributes": { // View Actions / Toolbar / Context Menu関連 "menus": { // View Actions "view/title": [ { "command": "sortable-explorer.createNewNote", "when": "view == sortable-explorer.fileExplorer", "group": "navigation@000" }, ], // ViewのContext Menu "view/item/context": [ { "command": "sortable-explorer.createNewNote", "when": "view == sortable-explorer.fileExplorer", "group": "1_creation" }, ], // Command Palette "commandPalette": [ { "command": "sortable-explorer.createNewNote", "when": "view == sortable-explorer.fileExplorer" }, ] } }
他にも
editor/title... エディタのタイトルのメニューバーscm/title... SCMのタイトルのメニューterminal/context... Terminalのコンテキストメニュー
などなど。詳細は以下の場所に書かれている
アイコンやコンテキストメニューの順序を制御する
menu配下には、orderのようなpropertiesがなく、
基本、順序の指定ができず、commandのIDの昇順になる
ただ、groupがあり、指定しているとgroupのIDの昇順になるので、
"group": "navigation@1"とかで制御することができる
また、デフォルトのgroupがあるようで、
コンテキストメニューだと、
navigation... 最初のグループ1_modification... formatなどの変更関連9_cutcopypaste... 編集関連
などなど。これも以下の場所に書かれている
editor tab context menuなどのほかの箇所のもある
設定値によってアイコンを変更する
ソートの昇順/降順などでアイコンを変更したい時がある
その場合は、
- アイコンが異なるコマンドをそれぞれ用意し、
- 設定値によって、表示するコマンドを切り替える
とすればOK
"contributes": { "commands": [ { "command": "sortable-explorer.toggleSortDirection.asc", "title": "%command.toggleSortDirection.title%", "icon": "$(arrow-up)" }, { "command": "sortable-explorer.toggleSortDirection.desc", "title": "%command.toggleSortDirection.title%", "icon": "$(arrow-down)" }, ], // View Actions / Toolbar / Context Menu関連 "menus": { // View Actions "view/title": [ { "command": "sortable-explorer.toggleSortDirection.desc", "when": "view == sortable-explorer.fileExplorer && config.sortable-explorer.sortBy == 'desc'", "group": "navigation@200" }, { "command": "sortable-explorer.toggleSortDirection.asc", "when": "view == sortable-explorer.fileExplorer && config.sortable-explorer.sortBy == 'asc'", "group": "navigation@200" }, ], } }
when条件での表示制御
Toolbarやコンテキストメニューなどで表示する条件で使うwhen
演算子
基本的な演算子が使える
&&、||、!、==、!=、>=、>、<=、<in、not in=~... 正規表現マッチ
組み込みの変数(context key)
キーボードショートカットで利用するような
editorFocusやresourceLangIdなども使える
利用できるkeyは以下に書かれている
- Available context keys | when clause contexts | Visual Studio Code Extension API
- Visible/focused view when clause context | when clause contexts | Visual Studio Code Extension API
- Visible view container when clause context | when clause contexts | Visual Studio Code Extension API
設定画面の値を利用する
config.<config-key>を使うと、設定値を参照できる
カスタムのcontextの追加
setContextコマンドを使うことで、独自コンテキストを設定できる
vscode.commands.executeCommand('setContext', 'myExtension.showMyCommand', true); vscode.commands.executeCommand('setContext', 'myExtension.numberOfCoolOpenThings', 4);
context keyの確認
「ヘルプ > 開発者ツールの切り替え」を選択すると、
ChromeのDevToolのような画面が表示される
その後、コマンドパレットから「Developer: Inspect Context Keys」
を実行すると、DevToolのconsoleにcontextの内容が出力されるので、
それを見て、条件やsetContextコマンドの内容を見直すとよい
以上!! マニフェスト周りもだいぶ理解した気がする(*´ω｀*)
