VSCode插件如何新建右键子菜单

840 阅读1分钟

写这篇文档是因为,在开发vscode插件的时候,发现官网创建右键子菜单的文档写的不是很清楚,为了写子菜单还得专门去看了别人开发的插件,很麻烦,因此补充了这篇文档。

首先创建一个vscode插件项目

npm install -g yo generator-code 
yo code

然后给编辑器右键添加上我们的命令,在package.json的contributes中添加菜单

{
  "contributes": {
     // 定义命令
    "commands": [
      {
        "command": "myProject.add",
        "title": "添加"
      },
      {
        "command": "myProject.delete",
        "title": "删除"
      },
    ],
    // 定义submenus
    "submenus": [
      {
        "id": "myProject/content",
        "label": "MenuName" // 显示的标题
      }
    ],
    "menus": {
       // 定义菜单显示位置 
      "editor/context": [
        {
          "submenu": "myProject/content",
          "group": "navigation",
        }
      ],
      // 定义二级菜单点击时的命令
      "myProject/content": [
        {
          "command": "myProject.add",
          "group": "1"
        },
        {
          "command": "myProject.delete",
          "group": "2"
        },
      ]
    },
  }
}

效果图

此时点击鼠标右键菜单就可以看到以下效果了。

image.png

参考

vscode官网:code.visualstudio.com/api