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：

示例：

  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：

• 1
• 2
• 下一页