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/contexteditor/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 isMacisWindows:判断当前操作系统;
  • editorFocus :编辑器具有焦点时;
  • editorHasSelection :编辑器中有文本被选中时;
  • view == someViewId:当当前视图ID等于someViewId时;
  • 等等等

多个条件可以通过与或非进行组合,例如:editorFocus && isWindows && resourceLangId == javascript

有关when语句的更多完整语法请参考官方文档:https://code.visualstudio.com/docs/getstarted/keybindings

alt

alt很好理解,表示没有按下alt键时,点击右键菜单执行的是command对应的命令,而按下了alt键后执行的是alt对应的命令。这里不做过多解释。

group

组间排序

控制菜单的分组和排序。不同的菜单拥有不同的默认分组。

  • editor/context中有这些默认组:
  • navigation- 放在这个组的永远排在最前面;
  • 1_modification - 更改组;
  • 9_cutcopypaste - 编辑组z_commands - 最后一个默认组,其中包含用于打开命令选项板的条目。

除了navigation是强制放在最前面之外,其它分组都是按照0-9、a-z的顺序排列的,所以如果你想在1_modification9_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": "navigation@2"
 },
 {
 "when": "editorFocus",
 "command": "extension.demo.getCurrentFilePath",
		// 强制放在navigation组的第1个
 "group": "navigation@1"
 }
]

如上,默认情况下,按照菜单名排序,sayHellogetCurrentFilePath的前面,但是通过自定义顺序,把后者放到了前面。

快捷键

快捷键设置的写法比较简单,如下所示:

"contributes": {
 "keybindings": [{
		// 指定快捷键执行的操作
 "command": "extension.sayHello",
		// windows下快捷键
 "key": "ctrl+f10",
		// mac下快捷键
 "mac": "cmd+f10",
		// 快捷键何时生效
 "when": "editorTextFocus"
 }]
}

这个快捷键最终会出现在整个vscode快捷键设置界面:

如果您想了解更多有关快捷键绑定的详细细节可以继续阅读官方文档:https://code.visualstudio.com/docs/getstarted/keybindings

总结

到此这篇关于VSCode插件开发全攻略之命令、菜单、快捷键的文章就介绍到这了,更多相关VSCode插件开发命令、菜单、快捷键内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • VSCode插件开发全攻略之打包、发布、升级的详细教程

    一.发布方式 插件开发完了,如何发布出去分享给他人呢?主要有3种方法: 方法一:直接把文件夹发给别人,让别人找到vscode的插件存放目录并放进去,然后重启vscode,一般不推荐: 方法二:打包成vsix插件,然后发送给别人安装,如果你的插件涉及机密不方便发布到应用市场,可以尝试采用这种方式: 方法三:注册开发者账号,发布到官网应用市场,这个发布和npm一样是不需要审核的. 二.本地打包 无论是本地打包还是发布到应用市场都需要借助vsce这个工具. 安装: npm i vsce -g 打包成v

  • vscode extension插件开发详解

    最近公司要使用vscode作为开发工具,需要对vscode做一些定制功能,比如snippet提示,内容提示,以及其他插件集成等,为此做了一些调查,并做了一定的开发与支持. 官方文档 https://code.visualstudio.com/docs 上面是vscode官方提供的extension开发帮助,按照上面的步骤基本上可以做简单的demo事例 如下主要介绍下自己在开发中做的几个简单功能: 1. Snippet 感觉vscode的snippet功能真的很强大,只要编辑相应的json配置文件

  • VsCode插件开发之插件初步通信的方法步骤

    参考了Egret Wing,想像Egret Wing那样在上方titlebar最右边上面增加一个menu(这个menu相对于一个按钮,当点击这个按钮时会出现一个window弹框,这个window弹框里就包含相关的表单信息以供登录或者注册使用.我是以这个作为参考模板的.但是目前进展并不是很顺.于是我通过插件的方式暂时性解决了这个问题.但是觉得还不是想要的那样. Egret Wing是这样的,如图所示: 不得不承认一点Egret Wing改造的挺不错的,不愧是对VsCode进行魔改. 今天先说一下通

  • VSCode插件开发全攻略之package.json详解

    package.json 在详细介绍vscode插件开发细节之前,这里我们先详细介绍一下vscode插件的package.json写法,但是建议先只需要随便看一下,了解个大概,等后面讲到具体细节的时候再回过头来看. 如下是package.json文件的常用配置,当然这里还不是全部: { // 插件的名字,应全部小写,不能有空格 "name": "vscode-plugin-demo", // 插件的友好显示名称,用于显示在应用市场,支持中文 "displa

  • VSCode插件开发全攻略之命令、菜单、快捷键

    命令 我们在前面HelloWord章节中已经提到了命令写法,这里再重温一下. context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', () => { vscode.window.showInformationMessage('您执行了extension.sayHello命令!'); })); 然后在清单文件声明: "commands": [ { "command&q

  • VSCode插件开发全攻略之跳转到定义、自动补全、悬停提示功能

    跳转到定义 跳转到定义其实很简单,通过vscode.languages.registerDefinitionProvider注册一个provider,这个provider如果返回了new vscode.Location()就表示当前光标所在单词支持跳转,并且跳转到对应location. 为了示例更加有意义,我在这里写了一个支持package.json中dependencies.devDependencies跳转到对应依赖包的例子jump-to-definition.js(当然我们这里只是很简单的

  • 打造个性化右键菜单—注册表使用全攻略之十三

    打造个性化右键菜单-注册表使用全攻略之十三 鼠标的右键选单中有很多快捷命令,给用户日常操作带来了极大的方便.但是,系统不可能做到将您所希望使用的命令都集成到右键选单中,有时您需要的命令根本就不存在,这就只能靠我们自己动手添加进去了.那么就让我们来看几个添加快捷命令的实例吧,只要把握了基本方法,我们就可以触类旁通,添加其他命令. 添加"关闭计算机" 一般我们都是通过点"开始"→"关闭系统"→"关闭计算机"→"确定&qu

  • 巧改注册表来增强网络功能—注册表使用全攻略之五

    巧改注册表来增强网络功能-注册表使用全攻略之五 1.指定首选的网络服务器 在注册表中依次展开[HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\NWNP32\NetworkProvider],并在其主键下创建或更改串值AuthenticatingAgent,附值为指定的服务器 2.禁止自动登陆网络 在注册表中依次展开[HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\NWNP32\Ne

  • 注册表REG文件全攻略—注册表使用全攻略之十五

    注册表REG文件全攻略-注册表使用全攻略之十五 1.何谓REG文件 REG文件实际上是一种注册表脚本文件,双击REG文件即可将其中的数据导入到注册表中.利用REG文件我们可以直接对注册表进行任何修改操作,它对注册表的操作可以不受注册表编辑器被禁用的限制,因此功能更为强大.灵活,另外,由于REG文件可以用任何文本文件编辑工具(例如记事本)进行修改,因此通过它对注册表数据进行修改后,如果发生错误,还可以通过改回REG文件中的数据后再导入,从而实现恢复操作,因此它又较之直接用注册表编辑器修改更安全,所

  • 注册表应用100例—注册表使用全攻略之十一

    注册表应用100例-注册表使用全攻略之十一 1 修改窗口滚动条的大小(Windows 9x/2000/XP)(1)打开注册表编辑器.(2)打开HKEY_CURRENT_USER\Control Panel\Desktop\Windows Metrics子键.(3)右边窗口中的ScrollHeight和ScrollWidth是窗口滚动条的高和宽,默认值为-270(均以Windows 9x为例,Windows 2000/XP的默认值与其相差不大),分别双击ScrollHeight和ScrollWid

  • 被恶意网站击中的解决办法——注册表使用全攻略之六

    被恶意网站击中的解决办法--注册表使用全攻略之六 一.注册表被修改的原因及解决办法 恶意网页是含有有害代码的ActiveX网页文件,这些广告信息的出现是因为浏览者的注册表被恶意更改的结果. 1.IE默认连接首页被修改 IE浏览器上方的标题栏被改成"欢迎访问--网站"的样式,受到更改的注册表项目为:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\Start PageHKEY_CURRENT_USER\Softwar

  • 剖析各类恶意网页对策分析—注册表使用全攻略之七

    剖析各类恶意网页对策分析-注册表使用全攻略之七 互联网利用IE等的漏洞完全可以让你通过浏览网页让你的电脑面目全非,或者格盘,甚至中下木马,传播病毒,而且这种形式的传播愈演愈烈,闲话少说了,现在来分析一下各类恶意网页. 分析前先介绍一下注册表的修改方法,因为注册表在网页病毒中是中枢,就是通过它让你的电脑面目全非. 第一种方法:直接修改法 就是在运行里敲入regedit,然后进行编辑,这是大家通常修改注册表的方法. 第二种方法:reg包导入法 现在以解锁注册表为例(其实解锁用兔子等工具更好更方便,这

随机推荐