VSCode插件开发(二) —— 模版插件改造

系列文章目录

VSCode插件开发(一) —— 第一个插件
VSCode插件开发(二) —— 常用贡献点和API

---

---

命令

首先package.json重要注册一个激活事件：

	// package.json
	// 定义插件何时被激活，变为可用状态。当前为执行createVue时激活。
	"activationEvents": [
		"onCommand:fast-admin.createVue"
	],
	// 注册Ctrl+Shift+P中的命令，使得Create Vue在命令面板中可用（createVue可被执行）。
	"contributes": {
		"commands": [
			{
				"command": "fast-admin.createVue",
				"title": "Create Vue"
			}
		]
	},

然后在extension.js中写这个激活事件命令的具体执行：

	// extension.js
	// The command has been defined in the package.json file
	// Now provide the implementation of the command with  registerCommand
	// The commandId parameter must match the command field in package.json
	let disposable = vscode.commands.registerCommand('fast-admin.createVue', function () {
		// The code you place here will be executed every time your command is executed
		// Display a message box to the user
		vscode.window.showInformationMessage('Hello World from fast-admin!');
	});
	context.subscriptions.push(disposable);

菜单

"contributes": {
		"menus": {
			"editor/context": [
				{
					"when":"editorFocus",
					"command": "fast-admin.getCurrentFilePath",
					"alt": "fast-admin.getCurrentFilePathAlt",
					"group": "navigation"
				}
			],
			"explorer/context": [
				{
					"command": "fast-admin.getCurrentFilePath",
					"group": "navigation"
				}
			]
		}
	},

• editor/title 是key值，定义这个菜单出现在哪里；
• when 控制菜单合适出现；
• command 定义菜单被点击后要执行什么操作；
• alt 定义备用命令，按住alt键打开菜单时将执行对应命令；
• group 定义菜单分组；

出现位置（editor/title）

• 资源管理器上下文菜单 - 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

出现时间（when）

• resourceLangId == javascript：当编辑的文件是js文件时；
• resourceFilename == test.js：当当前打开文件名是test.js时；
• isLinux、isMac、isWindows：判断当前操作系统；
• editorFocus：编辑器具有焦点时；
• editorHasSelection：编辑器中有文本被选中时；
• view == someViewId：当当前视图ID等于someViewId时；
• 更多……

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

附加命令（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_my：

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 - 与关闭编辑器相关的命令。

组内排序

默认同一个组的顺序取决于菜单名称，如果想自定义排序的话可以在group后面通过@的方式来自定义顺序，例如："group": "navigation@2"

快捷键

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

更多细节可阅读官方文档

VS Code API

VS Code API 是在VSCode插件中可以使用的一种JavaScript APIs，下面将介绍几个例子。

• 跳转到定义：跳转到定义其实很简单，通过vscode.languages.registerDefinitionProvider注册一个provider，这个provider如果返回了new vscode.Location()就表示当前光标所在单词支持跳转，并且跳转到对应location。new vscode.Location接收2个参数，第一个是要跳转到文件的路径，第二个是跳转之后光标所在位置，接收Range或者Position对象，Position对象的初始化接收2个参数，行row和列col。
• 自动补全：通过vscode.languages.registerCompletionItemProvider方法注册自动完成实现，接收3个参数：第一个是要关联的文件类型；第二个是一个对象，里面必须包含provideCompletionItems和resolveCompletionItem这2个方法；第三个是一个可选的触发提示的字符列表；
• 悬停提示：通过vscode.languages.registerHoverProvider实现。有些时候某个字段可能本身已经有提示内容了，如果我们仍然给它注册了hover的实现的话，那么vscode会自动将多个hover内容合并一起显示。

刚开始只能先大概对整个vscode的api有一个大概了解，了解了之后就大概清楚一般什么功能会怎么实现，该去什么地方找，所有的vscode的api都可以在 vscode.d.ts 文件里面找到（C:\Program Files\Microsoft VS Code\resources\app\out\vs）。

更多细节可阅读官方文档