“改造” VS Code 编辑器,一起写个插件吧! (3)

这样看起来是不是很直观了?在 package.json 里面设置的 command 的值,就是 extension.js 里面 registerCommand 的值。那这几行命令是什么意思呢?让我们一起来运行看看:

 “改造” VS Code 编辑器,一起写个插件吧!

他会帮你打开一个新的 VS Code 编辑器,插件只会加载到这个编辑器中。现在我们使用调用快捷键(MacOS) command+p ,输入 >Hello World (不区分大小写):

 “改造” VS Code 编辑器,一起写个插件吧!

回车一下,你会发现在右下角一个不起眼的角落里输出了这么一个提示:

 “改造” VS Code 编辑器,一起写个插件吧!

我相信聪明的你们结合代码一定已经恍然大悟了对不对!不知道你们有没有这个疑问,上面那个 console.log 去哪里看?别急,我们回到插件代码的那个编辑器中,仔细看下面这边,他会在我们输入上面的命令之后才出现,因为在 package.json 里面我们配置插件的激活时机就是 onCommand:test-extension.helloWorld :

 “改造” VS Code 编辑器,一起写个插件吧!

那我们现在抱着「刻意学习」的思路,改一下上面的代码,比如把 test-extension 改成 test :

..., // package.json "activationEvents": [ "onCommand:test.helloWorld" ], ..., "contributes": { "commands": [ { "command": "test.helloWorld", "title": "Hello World" } ] }, ... // extension.js ... function activate(context) { console.log('我在这里!!'); let disposable = vscode.commands.registerCommand('test.helloWorld', function () { vscode.window.showInformationMessage('我改变了 command 的名字!'); }); context.subscriptions.push(disposable); } ...

再按照上面说的触发方法再来一遍,发现依旧是可以的!所以这里的名字只是一个命名空间,你可以改成你想要的任何名字,来适用于比较复杂的插件体系。既然是个命名空间,那其实不要这个前缀也可以。

五、实现一个属于自己的插件

前面介绍了那么多,大家有没有发现其实这个体系也不难,有大佬在前面铺路,其实我们只要按照规则“填空”就好了,那现在我们就来实现一个小小的功能——加一个按钮和他的点击事件。

修改我们的 package.json 如下,因为当前我希望插件加载的时候就已经订阅了按钮的点击事件,所以这里我们可以把 activationEvents 改成 *,这样的话我们的插件在一开始就可以激活并注册事件了:

..., "activationEvents": [ "*", ], "contributes": { "commands": [ { "command": "test.helloWorld", "title": "Hello World" }, // 注册一下按钮点击的事件,再配一个小图标 { "command": "test.button", "title": "按钮", "icon": { "light": "./media/light/preview.svg", "dark": "./media/dark/preview.svg" } } ], // 在这里加一下下面这个配置 "menus": { "editor/title": [ { "command": "test.button", "group": "navigation" } ] } }, ...

然后回到我们的 extension.js 里面增加一个简单的消息提醒:

function activate(context) { console.log('我在这里!!'); let disposable = vscode.commands.registerCommand('test.helloWorld', function () { vscode.window.showInformationMessage('我改变了 command 的名字!'); }); // 新增一个按钮的点击命令操作内容 let button = vscode.commands.registerCommand('test.button', function () { vscode.window.showInformationMessage('按钮点击'); }); // 记得这个新的命令也要放进去订阅一下 context.subscriptions.push(disposable, button); }

看一下效果:

 “改造” VS Code 编辑器,一起写个插件吧!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywssj.html