VSCode插件開(kāi)發(fā)筆記 3

前言

筆者正在學(xué)習(xí)開(kāi)發(fā)一款VSCode插件，文章為學(xué)習(xí)所做的筆記，供學(xué)習(xí)使用。

1. 命令的寫法

  • 在 extension.js中可以定義想要執(zhí)行的命令。
    以下為直觀閱讀，將代碼合成了一句展示。
function activate(context) {
  context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', () => {
    vscode.window.showInformationMessage('您執(zhí)行了extension.sayHello命令！');
  }));
}

注冊(cè)命令的API：vscode.commands.registerCommand ，
執(zhí)行后返回一個(gè) Disposable 對(duì)象。
所有注冊(cè)類的 API 執(zhí)行后都需要將返回結(jié)果放到 context.subscriptions中。

  • 在清單文件聲明注冊(cè)的命令
"commands": [
    {
        "command": "extension.sayHello",
        "title": "Hello World"
    },
]

1.1 回調(diào)函數(shù)的可選參數(shù)

回調(diào)函數(shù)接收一個(gè)可選參數(shù) uri：

  • 當(dāng)從資源管理器中右鍵執(zhí)行命令時(shí)會(huì)把當(dāng)前選中資源路徑 uri 作為參數(shù)傳過(guò)；
  • 當(dāng)從編輯器中右鍵菜單執(zhí)行時(shí)則會(huì)將當(dāng)前打開(kāi)文件路徑 URI 傳過(guò)去；
  • 當(dāng)直接按 Ctrl+Shift+P 執(zhí)行命令時(shí)，這個(gè)參數(shù)為空；

示例：

context.subscriptions.push(vscode.commands.registerCommand('extension.demo.getCurrentFilePath', (uri) => {
    vscode.window.showInformationMessage(`當(dāng)前文件(夾)路徑是：${uri ? uri.path : '空'}`);
}));

package.json 如下：

    "menus": {
            "editor/context": [
                {
                    "when": "editorFocus",
                    "command": "extension.demo.getCurrentFilePath",
                    "group": "navigation"
                }
            ],
            "explorer/context": [
                {
                    "command": "extension.demo.getCurrentFilePath",
                    "group": "navigation"
                }
            ]
        }
    }

1.2 編輯器命令

注冊(cè)普通命令的API：vscode.commands.registerCommand ，
注冊(cè)文本編輯器命令：vscode.commands.registerTextEditorCommand，僅在編輯器被激活時(shí)調(diào)用才生效，此外，這個(gè)命令可以訪問(wèn)到當(dāng)前活動(dòng)編輯器 textEditor

// 編輯器命令
context.subscriptions.push(vscode.commands.registerTextEditorCommand('extension.testEditorCommand', (textEditor, edit) => {
    console.log('您正在執(zhí)行編輯器命令！');
    console.log(textEditor, edit);
}));

1.3 獲取所有的命令

// 獲取所有命令
vscode.commands.getCommands().then(allCommands => {
    console.log('所有命令：', allCommands);
});

getCommands 接收一個(gè)參數(shù)表示是否過(guò)濾內(nèi)部命令，默認(rèn)否。
另外一種方法是直接打開(kāi)快捷鍵設(shè)置，就能看到所有命令列表。

1.4 執(zhí)行命令和復(fù)雜的命令

VSCode api的一個(gè)習(xí)慣設(shè)計(jì)：很多命令都是返回一個(gè)類似于 Promise 的Thenable 對(duì)象。

使用代碼執(zhí)行某個(gè)命令：

vscode.commands.executeCommand('命令', 'params1', 'params2', ...).then(result => {
    console.log('命令結(jié)果', result);
});

復(fù)雜命令，就是指一些需要特殊參數(shù)并且通常有返回值、執(zhí)行一些諸如跳轉(zhuǎn)到定義、執(zhí)行代碼高亮等特殊操作、這類命令有幾十個(gè)。復(fù)雜命令列表參閱

示例：在VS代碼中打開(kāi)新文件夾

let uri = Uri.file('/some/path/to/folder');
commands.executeCommand('vscode.openFolder', uri).then(sucess => {
    console.log(success);
});

2. 菜單

一個(gè)菜單項(xiàng)的完整配置如下：

"contributes": {
    "menus": {
        "editor/title": [{
            "when": "resourceLangId == markdown",
            "command": "markdown.showPreview",
            "alt": "markdown.showPreviewToSide",
            "group": "navigation"
        }]
    }
}
  • editor/title 是 key 值，定義這個(gè)菜單出現(xiàn)在哪里；
  • when 控制菜單什么時(shí)候出現(xiàn)；
  • command 定義菜單被點(diǎn)擊后要執(zhí)行什么操作；
  • alt 定義備用命令，按住alt鍵打開(kāi)菜單時(shí)將執(zhí)行對(duì)應(yīng)命令；
  • group定義菜單分組；

圖標(biāo)在 commands 里面配置，light 和 dark 分別對(duì)應(yīng)淺色和深色主題，如果不配置圖標(biāo)則直接顯示文字：

"commands": [
    {
        "command": "extension.demo.testMenuShow",
        "title": "這個(gè)菜單僅在JS文件中出現(xiàn)",
        "icon": {
            "light": "./images/tool-light.svg",
            "dark": "./images/tool-light.svg"
        }
    }
]

2.1 關(guān)于when

通過(guò)可選的when語(yǔ)句，VS Code可以很好地控制什么時(shí)候顯示菜單項(xiàng)。

  • resourceLangId == javascript：當(dāng)編輯的文件是js文件時(shí)；
  • resourceFilename == test.js：當(dāng)當(dāng)前打開(kāi)文件名是test.js時(shí)；
  • isLinux、isMac、isWindows：判斷當(dāng)前操作系統(tǒng)；
  • editorFocus：編輯器具有焦點(diǎn)時(shí)；
  • editorHasSelection：編輯器中有文本被選中時(shí)；
  • view == someViewId：當(dāng)當(dāng)前視圖ID等于 someViewId 時(shí)；
    等等等
    多個(gè)條件可以通過(guò)與或非進(jìn)行組合。有關(guān)when語(yǔ)句的更多完整語(yǔ)法請(qǐng)參考官方文檔

2.2 關(guān)于alt

沒(méi)有按下 alt 鍵時(shí)，點(diǎn)擊右鍵菜單執(zhí)行的是 command 對(duì)應(yīng)的命令，而按下了 alt 鍵后執(zhí)行的是 alt 對(duì)應(yīng)的命令。

2.3 關(guān)于group

組間排序

控制菜單的分組和排序。不同的菜單擁有不同的默認(rèn)分組。

  1. editor/context 的默認(rèn)組：
  • navigation 放在這個(gè)組的永遠(yuǎn)排在最前面；
  • 1_modification 更改組；
  • 9_cutcopypaste 編輯組
  • z_commands 最后一個(gè)默認(rèn)組，其中包含用于打開(kāi)命令選項(xiàng)板的條目。
    navigation是強(qiáng)制放在最前面，其它分組都是按照0-9、a-z的順序排列的。
  1. explorer/context 的默認(rèn)組：
  • navigation- 放在這個(gè)組的永遠(yuǎn)排在最前面；
  • 2_workspace- 與工作空間操作相關(guān)的命令。
  • 3_compare- 與差異編輯器中的文件比較相關(guān)的命令。
  • 4_search- 與在搜索視圖中搜索相關(guān)的命令。
  • 5_cutcopypaste- 與剪切，復(fù)制和粘貼文件相關(guān)的命令。
  • 7_modification- 與修改文件相關(guān)的命令。
  1. 編輯器選項(xiàng)卡上下文菜單的默認(rèn)組：
  • 1_close- 與關(guān)閉編輯器相關(guān)的命令。
  • 3_preview- 與固定編輯器相關(guān)的命令。
  1. 在editor/title有這些默認(rèn)組：
  • 1_diff- 與使用差異編輯器相關(guān)的命令。
  • 3_open - 與打開(kāi)編輯器相關(guān)的命令。
  • 5_close- 與關(guān)閉編輯器相關(guān)的命令。
組內(nèi)排序

默認(rèn)同一個(gè)組的順序取決于菜單名稱，如想自定義排序，可以在組后面通過(guò) @<number> 的方式來(lái)自定義順序。

"editor/context": [
    {
        "when": "editorFocus",
        "command": "extension.sayHello",
        // 強(qiáng)制放在navigation組的第2個(gè)
        "group": "navigation@2"
    },
    {
        "when": "editorFocus",
        "command": "extension.demo.getCurrentFilePath",
        // 強(qiáng)制放在navigation組的第1個(gè)
        "group": "navigation@1"
    }
]

3. 快捷鍵

設(shè)置快捷鍵：

"contributes": {
    "keybindings": [{
        // 指定快捷鍵執(zhí)行的操作
        "command": "extension.sayHello",
        // windows下快捷鍵
        "key": "ctrl+f10",
        // mac下快捷鍵
        "mac": "cmd+f10",
        // 快捷鍵何時(shí)生效
        "when": "editorTextFocus"
    }]
}

參考

  1. VSCode插件開(kāi)發(fā)全攻略（四）命令、菜單、快捷鍵
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容