vscode插件教程:command

简介: vscode插件教程:command

package.json

对插件的详细描述,我们先关注以下的字段:

{
  "name": "test-plugin",
  "main": "./out/extension.js",
  "activationEvents":["*"],
  "contributes":{
    "commands":[
      {
        "command": "test-plugin.helloWorld",
        "title": "Hello World"
      }
    ]
  }
  // ...
}
复制代码
  • name :插件的名字
  • main:入口地址
  • commands:插件所有可以使用的命令
  • command:当触发命令时,发送的消息名字,格式为{name}.{cmd}
  • title:命令的标题,我们输入命令的时候就是以这个字段为准。
    网络异常,图片无法展示
    |
  • activationEvents:激活可用的事件列表,格式为:{event}:{value}

activationEvents

设置激活插件的事件,当插件激活时会调用入口的activate函数,插件默认是没有激活的。

vscode提供了非常多的事件类型,比如onLanguageonCommandonView等。

command举例,需要按照这样的格式书写

"activationEvents": [
    "onCommand:test-plugin.helloWorld"
],
复制代码

其中commandcontributes.commands中的某一项值。

当使用命令模式,输入Hello World,触发command的时候,插件就会激活。

网络异常,图片无法展示
|

注意事项

如果未声明在activationEvents中的命令被触发,就会出现一下警告:

网络异常,图片无法展示
|

这个警告让初为新手的我困惑了好长时间,算是一个注意点。

如果不想过滤任何事件,可以暴力的设置为*即可

{
  "activationEvents": ["*"]
}
复制代码

command的逻辑实现

package.json中我们仅仅定义了commandcommand触发的逻辑在src/extension.ts中:

export function active (context) {
  context.subscriptions.push(
    vscode.commands.registerCommand(
      'test-plugin.helloWorld', // 注意这个参数,必须和packages.json中的command一致
      () => {
        // command的具体逻辑
        vscode.window.showInformationMessage('Hello World!');
      }
    )
  );
}
复制代码

注释说明的也比较清晰啦,大概这样子,我们就可以看到命令执行后,弹出一个Hello World的提示语。

总结

通过上边的学习,我们会发现以下2处的需要完全一致,而且都是{plugin-name}.{value}的格式。

网络异常,图片无法展示
|

那么我们不遵守这个格式,只要保证一致是否可以正常工作呢?答案是:完全可以。

但为什么官方的例子里面都是使用{plugin-name}.{value}的格式呢?

以我个人经验,为了防止不同插件重名出现未知的问题,插件名字在整个生态是唯一的,以plugin-name开头,能够保证唯一性。

so,那我可不可以A插件调用B插件的命令呢?

如果你有这个想法,说明你已经对插件的理解又高人一步了!

网络异常,图片无法展示
|



目录
相关文章
|
1月前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
11 0
|
2月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
102 0
|
1月前
|
敏捷开发 人工智能 前端开发
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
|
1月前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
3天前
|
开发框架 人工智能 前端开发
【GitHub】github学生认证,在vscode中使用copilot的教程
【GitHub】github学生认证,在vscode中使用copilot的教程
18 4
|
19天前
|
搜索推荐 开发者
VSCode快捷键使用教程:提高编码效率的利器
本文介绍了提升编程效率的VSCode快捷键使用方法。主要包括编辑、导航、查找与替换、格式化等快捷键,如Ctrl+A全选,Ctrl+P前往文件,Ctrl+F查找,Shift+Alt+F格式化代码。此外,还涉及窗口和菜单快捷键,如新建窗口(Ctrl+Shift+N)、切换分屏(Ctrl+左右箭头)。VSCode也支持用户自定义快捷键,通过Ctrl+,打开设置进行个性化配置。
17 0
|
20天前
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
15 0
|
27天前
VSCode插件分享--免费的ER工具
VSCode插件分享--免费的ER工具
17 0
|
1月前
|
JavaScript 开发工具 git
【Vscode】 Vscode常用插件
【Vscode】 Vscode常用插件
52 0
|
1月前
|
编译器 C语言 C++
VSCode上搭建C/C++开发环境(vscode配置c/c++环境)Windows系统---保姆级教程
VSCode上搭建C/C++开发环境(vscode配置c/c++环境)Windows系统---保姆级教程