VSCode外掛開發全攻略(四)命令、選單、快捷鍵
命令
我們在前面HelloWord章節中已經提到了命令寫法,這裡再重溫一下。
context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', () => {
vscode.window.showInformationMessage('您執行了extension.sayHello命令!');
}));
然後在清單檔案宣告:
"commands": [ { "command": "extension.sayHello", "title": "Hello World" }, ]
vscode.commands.registerCommand
是註冊命令的API,執行後會返回一個Disposable
物件,所有註冊類的API執行後都需要將返回結果放到context.subscriptions
中去。
回撥函式引數
回撥函式接收一個可選引數uri
:
- 當從資源管理器中右鍵執行命令時會把當前選中資源路徑uri作為引數傳過;
- 當從編輯器中右鍵選單執行時則會將當前開啟檔案路徑URI傳過去;
- 當直接按
Ctrl+Shift+P
執行命令時,這個引數為空;
示例:
context.subscriptions.push(vscode.commands.registerCommand('extension.demo.getCurrentFilePath', (uri) => { vscode.window.showInformationMessage(`當前檔案(夾)路徑是:${uri ? uri.path : '空'}`); }));
package.json
如下:
"menus": { "editor/context": [ { "when": "editorFocus", "command": "extension.demo.getCurrentFilePath", "group": "navigation" } ], "explorer/context": [ { "command": "extension.demo.getCurrentFilePath", "group": "navigation" } ] } }
最終效果:
編輯器命令
除了上面的註冊普通命令之外,還有一個vscode.commands.registerTextEditorCommand
命令,文字編輯器命令與普通命令不同,它們僅在有被編輯器被啟用時呼叫才生效,此外,這個命令可以訪問到當前活動編輯器textEditor
:
// 編輯器命令
context.subscriptions.push(vscode.commands.registerTextEditorCommand('extension.testEditorCommand', (textEditor, edit) => {
console.log('您正在執行編輯器命令!');
console.log(textEditor, edit);
}));
執行命令
這裡先說一下vscode api的一個習慣設計,很多命令都是返回一個類似於Promise的Thenable
物件,如果發現api裡面返回的是這個物件,說明這個方法不是直接返回結果的。
使用程式碼執行某個命令:
vscode.commands.executeCommand('命令', 'params1', 'params2', ...).then(result => {
console.log('命令結果', result);
});
獲取所有命令
前面說到了執行命令,那我怎麼知道某些操作它的命令是什麼呢?
有2種方法,第一種通過程式碼,getCommands
接收一個引數表示是否過濾內部命令,預設否:
// 獲取所有命令
vscode.commands.getCommands().then(allCommands => {
console.log('所有命令:', allCommands);
});
一般有上千個命令:
另外一種方法是直接開啟快捷鍵設定,這裡就能看到所有命令列表,右鍵可以複製命令:
複雜命令
vscode內部有一些複雜命令,所謂複雜命令,就是指一些需要特殊引數並且通常有返回值、執行一些諸如跳轉到定義、執行程式碼高亮等特殊操作、這類命令有幾十個,作為外掛開發者,很多時候你可能正需要這類命令,複雜命令列表參閱:https://code.visualstudio.com/docs/extensionAPI/vscode-api-commands
以下是演示如何在VS程式碼中開啟新資料夾的示例:
let uri = Uri.file('/some/path/to/folder');
commands.executeCommand('vscode.openFolder', uri).then(sucess => {
console.log(success);
});
選單
一個選單項的完整配置如下:
"contributes": {
"menus": {
"editor/title": [{
"when": "resourceLangId == markdown",
"command": "markdown.showPreview",
"alt": "markdown.showPreviewToSide",
"group": "navigation"
}]
}
}
editor/title
是key值,定義這個選單出現在哪裡;when
控制選單合適出現;command
定義選單被點選後要執行什麼操作;alt
定義備用命令,按住alt
鍵開啟選單時將執行對應命令;group
定義選單分組;
出現的位置
目前外掛可以給以下場景配置自定義選單:
- 資源管理器上下文選單 -
explorer/context
- 編輯器上下文選單 -
editor/context
- 編輯標題選單欄 -
editor/title
- 編輯器標題上下文選單 -
editor/title/context
- 除錯callstack檢視上下文選單 -
debug/callstack/context
- SCM標題選單 -
scm/title
- SCM資源組選單 -
scm/resourceGroup/context
- SCM資源選單 -
scm/resource/context
- SCM更改標題選單 -
scm/change/title
- 左側檢視標題選單 -
view/title
- 檢視項選單 -
view/item/context
- 控制命令是否顯示在命令選項板中 -
commandPalette
其中,最常見的應該就explorer/context
和editor/context
了,這2個應該不用多做介紹。
editor/title
:
圖示在commands
裡面配置,light和dark分別對應淺色和深色主題,如果不配置圖示則直接顯示文字:
"commands": [
{
"command": "extension.demo.testMenuShow",
"title": "這個選單僅在JS檔案中出現",
"icon": {
"light": "./images/tool-light.svg",
"dark": "./images/tool-light.svg"
}
}
]
editor/title/context
:
when
通過可選的when語句,VS Code
可以很好地控制什麼時候顯示選單項,當然,when語句語法不僅僅適用於選單項的控制。
when語句語法有很多,這裡列舉幾個常用的:
resourceLangId == javascript
:當編輯的檔案是js檔案時;resourceFilename == test.js
:噹噹前開啟檔名是test.js
時;isLinux
、isMac
、isWindows
:判斷當前作業系統;editorFocus
:編輯器具有焦點時;editorHasSelection
:編輯器中有文字被選中時;view == someViewId
:噹噹前檢視ID等於someViewId
時;- 等等等
多個條件可以通過與或非進行組合,例如:editorFocus && isWindows && resourceLangId == javascript
。
有關when語句的更多完整語法請參考官方文件:https://code.visualstudio.com/docs/getstarted/keybindings#_when-clause-contexts
alt
alt
很好理解,表示沒有按下alt鍵時,點選右鍵選單執行的是command
對應的命令,而按下了alt鍵後執行的是alt對應的命令。這裡不做過多解釋。
group
組間排序
控制選單的分組和排序。不同的選單擁有不同的預設分組。
editor/context
中有這些預設組:
navigation
- 放在這個組的永遠排在最前面;1_modification
- 更改組;9_cutcopypaste
- 編輯組z_commands
- 最後一個預設組,其中包含用於開啟命令選項板的條目。
除了navigation
是強制放在最前面之外,其它分組都是按照0-9、a-z的順序排列的,所以如果你想在1_modification
和9_cutcopypaste
插入一個新的組別的話,你可以定義一個諸如6_test
:
explorer/context
有這些預設組:
- navigation - 放在這個組的永遠排在最前面;
- 2_workspace - 與工作空間操作相關的命令。
- 3_compare - 與差異編輯器中的檔案比較相關的命令。
- 4_search - 與在搜尋檢視中搜索相關的命令。
- 5_cutcopypaste - 與剪下,複製和貼上檔案相關的命令。
- 7_modification - 與修改檔案相關的命令。
在編輯器選項卡上下文選單
有這些預設組:
- 1_close - 與關閉編輯器相關的命令。
- 3_preview - 與固定編輯器相關的命令。
在editor/title
有這些預設組:
- 1_diff - 與使用差異編輯器相關的命令。
- 3_open - 與開啟編輯器相關的命令。
- 5_close - 與關閉編輯器相關的命令。
組內排序
默認同一個組的順序取決於選單名稱,如果想自定義排序的話可以再組後面通過@<number>
的方式來自定義順序,例如:
"editor/context": [
{
"when": "editorFocus",
"command": "extension.sayHello",
// 強制放在navigation組的第2個
"group": "[email protected]"
},
{
"when": "editorFocus",
"command": "extension.demo.getCurrentFilePath",
// 強制放在navigation組的第1個
"group": "[email protected]"
}
]
如上,預設情況下,按照選單名排序,sayHello
在getCurrentFilePath
的前面,但是通過自定義順序,把後者放到了前面。
快捷鍵
快捷鍵設定的寫法比較簡單,如下所示:
"contributes": {
"keybindings": [{
// 指定快捷鍵執行的操作
"command": "extension.sayHello",
// windows下快捷鍵
"key": "ctrl+f10",
// mac下快捷鍵
"mac": "cmd+f10",
// 快捷鍵何時生效
"when": "editorTextFocus"
}]
}
這個快捷鍵最終會出現在整個vscode快捷鍵設定介面:
如果您想了解更多有關快捷鍵繫結的詳細細節可以繼續閱讀官方文件:https://code.visualstudio.com/docs/getstarted/keybindings
相關推薦
VSCode外掛開發全攻略(四)命令、選單、快捷鍵
命令 我們在前面HelloWord章節中已經提到了命令寫法,這裡再重溫一下。 context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', () => { vscode.window.showI
VSCode外掛開發全攻略(七)WebView
更多文章請戳VSCode外掛開發全攻略系列目錄導航。 什麼是Webview 大家都知道,整個VSCode編輯器就是一張大的網頁,其實,我們還可以在Visual Studio Code中建立完全自定義的、可以間接和nodejs通訊的特殊網頁(通過一個acquireVsCodeApi特殊方法),這個網頁就叫W
VSCode外掛開發全攻略(六)開發除錯技巧
更多文章請戳VSCode外掛開發全攻略系列目錄導航。 前言 在介紹完一些比較簡單的內容點之後,我覺得有必要先和大家介紹一些開發中遇到的一些細節問題以及技巧,特別是後面一章節將要介紹WebView的知識,這個坑會比較多,避免大家走彎路。 開發方式 最理想的方式是準備雙顯示器,一個寫程式
VSCode外掛開發全攻略(五)跳轉到定義、自動補全、懸停提示
更多文章請戳VSCode外掛開發全攻略系列目錄導航。 跳轉到定義 跳轉到定義其實很簡單,通過vscode.languages.registerDefinitionProvider註冊一個provider,這個provider如果返回了new vscode.Location()就表示當前游標所在單詞支援跳轉
VSCode外掛開發全攻略(一)概覽
文章索引 寫在前面 一年前我寫了一篇3萬多字的Chrome外掛(擴充套件)開發全攻略,反響還不錯,幫助了很多新手快速上手,甚至包括大名鼎鼎的紅芯瀏覽器(戳這裡瞭解更多)。 最近因工作需要又接觸到了vscode外掛開發,所以趁勢再寫一篇有關vscode外掛開發的文章,記錄一些自己踩過的坑以及接觸vscod
VSCode外掛開發全攻略(八)程式碼片段、設定、自定義歡迎頁
程式碼片段 程式碼片段,也叫snippets,相信大家都不陌生,就是輸入一個很簡單的單詞然後一回車帶出來很多程式碼。平時大家也可以直接在vscode中建立屬於自己的snippets: 建立程式碼片段 那麼如何在擴充套件中建立snippets呢? package.json檔案新增如下: "contribut
VSCode外掛開發全攻略(十)打包、釋出、升級
釋出方式 外掛開發完了,如何釋出出去分享給他人呢?主要有3種方法: 方法一:直接把資料夾發給別人,讓別人找到vscode的外掛存放目錄並放進去,然後重啟vscode,一般不推薦; 方法二:打包成vsix外掛,然後傳送給別人安裝,如果你的外掛涉及機密不方便釋出到應用市場,可以嘗試採用這種方式; 方法三:註冊
VSCode外掛開發全攻略(九)常用API總結
本文提煉一些常見的API使用場景供參考,本文內容有待完善。 編輯器相關 修改當前啟用編輯器內容 替換當前編輯器全部內容: vscode.window.activeTextEditor.edit(editBuilder => { // 從開始到結束,全量替換 const end = ne
VSCode外掛開發全攻略(二)HelloWord
寫著前面 學習一門新的語言或者生態首先肯定是從HelloWord開始。 您可以直接克隆我放在GitHub上vscode-plugin-demo 的程式碼到本地,然後嘗試修改程式碼並執行,也可以使用微軟官方的腳手架vscode-generator-code來生成專案結構,腳手架的使用我們後面再來介紹,先來熟悉
VSCode外掛開發全攻略(三)package.json詳解
package.json 在詳細介紹vscode外掛開發細節之前,這裡我們先詳細介紹一下vscode外掛的package.json寫法,但是建議先只需要隨便看一下,瞭解個大概,等後面講到具體細節的時候再回過頭來看。 如下是package.json檔案的常用配置,當然這裡還不是全部: { // 外掛的
【乾貨】Chrome外掛(擴充套件)開發全攻略(轉載)
轉載來源:https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html 【乾貨】Chrome外掛(擴充套件)開發全攻略 寫在前面 我花了將近一個多月的時間斷斷續續寫下這篇博文,並精心寫下完整demo,寫部落格的辛苦大家懂的,
【微軟大法好】VS Tools for AI全攻略(2)
port shell orf 方式 virt cnblogs 我們 玩耍 虛擬 接著上文,我們來討論如何使用Azure資源來訓練我們的tensorflow項目。Azure雲我個人用得很多,主要是因為微軟爸爸批了150刀每月的額度,我可以愉快地玩耍。 那麽針對Azure,有成
C#微信公眾號全攻略(3)--接管所有訊息驗證部分 C#程式碼
新建網站 新建一般處理程式 怎麼操作SQL資料庫不寫了 只發一些關鍵部分程式碼 一般處理程式關鍵程式碼 public class Interface : IHttpHandler { public stati
C#微信公眾號全攻略(5)--群發訊息時的openid對應的使用者是誰呢
有一個openid不屬於公眾號關注使用者的任何一位 在通過微信控制檯群發訊息後 將有一個Event為MASSSENDJOBFINISH的事件推送 對應的openid 他是誰呢 他的nickname是張三瘋 來自 中國 廣東 廣州 簽名是DayDayUpUp
C#微信公眾號全攻略(4)--實現回覆訊息C#程式碼
接上文 這個函式把使用者發來的內容交接給messageHelp來處理 最後返回messageHelp.ReturnMessage private void Handle(string postStr) { messageHelp help = new
VS Tools for AI全攻略(2)低配置虛擬機器也能玩轉深度學習,無需NC/NV系列
接著上文VS Tools for AI全攻略,我們來討論如何使用Azure資源來訓練我們的tensorflow專案。Azure雲我個人用得很多,主要是因為微軟爸爸批了150刀每月的額度,我可以愉快地玩耍。 那麼針對Azure,有成套的兩個方案解決問題。 方案一(比較有錢的、對速度要求高的):使用De
Linux使用者管理全攻略(二)
摘要:本文詳解使用者(User)和使用者組(Group)的配置檔案,本文是《Linux 使用者(User)和使用者組(Group)管理概述》文件的關健部份的細化;通過本文,您至少能明白/etc/passwd /etc/group ,以及什麼是UID和GID 等;其中對UID的
Android程序保活全攻略(中)
在上一篇部落格Android程序保活全攻略(上)中介紹了程序保活的背景和一些方法的思路和實現方式,本篇部落格我將承接上篇部落格,繼續進行介紹。 9) 1畫素懸浮層 **思路:**1畫素懸浮層是傳說的QQ黑科技,監控手機鎖屏解鎖事件,在螢幕鎖屏時啟動1個
在Struts2中實現自定義分頁標籤全攻略(一)
我們先看看這個分頁標籤的效果: 使用標籤的最大好處就是下次再用到的話直接引用就行,而不必重寫。 本人對Struts2自定義標籤沒有太深究,在網上找了一些資料可以參考參考: 其實,開發自定義標籤並不需要Struts2的支援,一般情況下,只需要繼承javax.servle
企業專案遷移go-zero全攻略(二)
承接上篇:上篇文章講到 `go-zero` 架構設計和專案設計。本篇文章接著這個專案設計,將生成的 `app 模組` 中 `gateway` 和 `RPC` 進行改造。廢話不多說,讓我們開始! ## gateway service gateway 中我做了一些自定義,在端請求我們後臺介面情況下,雖然多數情