插件开发编辑器命令,分为两个部分介绍:第一部分我会介绍如何编写编辑器快捷键;第二部分则是介绍如何分享快捷键配置、代码片段和颜色主题。
文章目录
编写编辑器命令
我们可以通过插件 API 来编写编辑器内的命令。下面我们来看看,要实现一个编辑器操作相关的插件,需要使用哪些 API?都有什么步骤?
关于如何创建一个命令,以及给这个命令命名并且注册,在上一讲中我们已经有一个简单的代码示例了。今天我们继续使用这个代码示例。这个代码示例中 .js 的内容现在如下:
const vscode = require('vscode');
function activate(context) {
console.log('Congratulations, your extension "myextension" is now active!');
let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
vscode.window.showInformationMessage('Hello World!');
});
context.subscriptions.push(disposable);
}
exports.activate = activate;
function deactivate() {
}
exports.deactivate = deactivate;
访问编辑器
既然是编辑器相关的命令,那么我们肯定需要能够访问到编辑器,以及其中的内容。首先我们要获取的就是:当前工作区内,用户正在使用的编辑器。
let editor = vscode.window.activeTextEditor;
如果你是手动敲入上面的代码,你可以看到 VS Code 提示的插件 API 建议。
有了这个编辑器,我们就能获取非常多的信息了。不过先别急, 这个变量并非一定总是有效的值,比如用户现在并没有打开任何文件,编辑器是空的,那么此时 的值就是 。所以, 在正式使用 之前,我们要判断一下, 是否为 ,是的话就结束命令的运行。
if (!editor) {
return;
}
接下来,我们可以输入 .,自动补全立刻给我们提示了不少的属性。
这其中几个值得一提的有如下:
我们在编辑器快捷键里介绍过 “转置字母”( )这个命令,这个命令可以将光标左、右两侧的字母位置调换。
不过如果你将多个字符选中,然后运行这个命令,该命令并不能将它们反转。下面,我们就来看看如何实现字符串反转。
首先,我们要读取的信息就是当前的文档信息和主光标的信息。
let document = editor.document;
let selection = editor.selection;
有了这两个信息,读取光标选中的内容就简单了。
let text = document.getText(selection);
一共哪些 API 这里我就不介绍了,相信你可以自己探索,这里我们使用就是 ,以获取某段代码。
接下来就是将这段文本进行反转了,我们可以写一个非常简单的版本,将字符串分割成字母数组,然后反转,最后重新组合成字符串。
let result = text.split('').reverse().join('');
最后一步操作就是将原来编辑器内的文本进行替换了。此时我们就要用到 edit 这个 API 了。值得注意的是,这个 API 的第一参数,是一个 , 的参数是 ,也就是真正用于修改代码的对象。 有以下几个 API:
这里我们要使用的当然就是 了。
editBuilder.replace(selection, result);
我们只需将原先的 里的内容,替换成新的 即可。
好了,这就是这个命令的全部内容。虽然还很简陋,但是我们可以运行看看。
当我们把代码调试运行起来,选中代码 “path”,运行 “Hello World” 命令,“path” 就被替换为了 “htap”。
注意事项
绝大多数的编辑器命令的工作方式,基本上跟上面的示例如出一辙。下面我来总结一下,一共分为三部分:
不过,如果要书写一个没有bug且性能出色的编辑器命令,可就没那么简单了。比如上面的示例里面,我们没有对多光标进行支持,反转字符串也是很暴力的,而这一部分,才是插件真正体现差距的地方。
快捷键
上面我们介绍了如何去书写一个命令,但是这只是完成了工作的一半,剩下的一半则是为这个命令绑定一个快捷键了。要完成快捷键的绑定,我们需要在 .json 中的 片段添加一段新的配置:
"contributes": {
"commands": [
{
"command": "extension.sayHello",
"title": "Hello World"
}
],
"keybindings": [
{
"key": "ctrl+t",
"command": "extension.sayHello",
"when": "editorTextFocus"
}
]
},
我们在 添加了新的字段 “” ,它的值是一个数组,里面就是所有的快捷键设置了。如果你是跟着专栏一步步走来的话,那你对这个设置应该就非常熟悉了,因为 VS Code 的快捷键设置里写法跟这个一模一样。我们给 “.” 这个命令,绑定了 ctrl+t ,同时只有当 “” 为真时才会激活这个快捷键。
此时如果我们运行这个插件,就可以直接使用 ctrl + t 来反转字符串了。
不过看到这里,你可能会有疑问了。 这个配置,能不能用来给 VS Code 已经存在的命令重新指定快捷键呢?没问题!