vscode插件怎么配置多级菜单？

JYeontu
176 阅读3分钟

说在前面

💡现在应该有很多前端同学都是使用的vscode来编写代码的吧？那么有没有试过自己编写一个vscode插件呢？今天我们一起来看看怎么编写一个vscode插件并配置一个右键多级菜单目录

环境准备

确保你已经安装了 Node.js 和 npm（Node.js 包管理器），因为 VSCode 插件是使用 JavaScript 或 TypeScript 编写的，并且依赖于这些工具进行开发和构建。

生成插件项目脚手架

  • 可以使用 Yeoman 和 VSCode Extension Generator 来快速生成插件项目的基础结构。首先，全局安装 Yeoman 和 VSCode Extension Generator：
npm install -g yo generator-code
  • 然后，在你想要创建插件项目的目录下，运行以下命令来生成项目脚手架：
yo code

这会启动一个交互式的向导，按提示填写信息即可：

  • 创建完成后我们就会得到这么一个项目

多级菜单配置

  • 1、在package.json文件中的contributes节中添加submenu项，如下：
"submenus": [
  {
    "id": "helloWorldmenuList",
    "label": "一级菜单"
  },
  {
    "id": "menu2",
    "label": "二级菜单"
  }
]
  • 2、在package.json文件中的contributes节中添加menu项，如下：
"menus": {
  "editor/context": [
    {
      "submenu": "helloWorldmenuList",
      "group": "navigation",
      "when": "editorFocus"
    }
  ],
  "helloWorldmenuList":[
    {
        "submenu": "menu2",
        "group": "group1"
    },
    {
        "command": "hello.helloWorld1",
        "group": "group2"
    }
  ],
  "menu2" : [
    {
      "command": "hello.helloWorld",
      "group": "group1"
    }
  ]
}

1. editor/context 配置

{
  "menus": {
    "editor/context": [
      {
        "submenu": "helloWorldmenuList",
        "group": "navigation",
        "when": "editorFocus"
      }
    ]
  }
}
  • 含义：在编辑器上下文菜单（当用户在编辑器区域右键点击时弹出的菜单）的配置中，定义了一个菜单项，它关联着一个名为 helloWorldmenuList 的子菜单。这个菜单项所属的分组是 navigation，并且只有当编辑器获得焦点（editorFocus 条件满足）时才会显示。

2. helloWorldmenuList 相关配置

{
  "menus": {
    "helloWorldmenuList": [
      {
        "submenu": "menu2",
        "group": "group1"
      },
      {
        "command": "hello.helloWorld1",
        "group": "group2"
      }
    ]
  }
}
  • 含义：这里进一步定义了 helloWorldmenuList 这个子菜单的内部结构。它包含了两个菜单项：
    • 第一个菜单项又关联了一个更深层级的子菜单 menu2，该菜单项所属分组为 group1。
    • 第二个菜单项直接对应一个插件命令 hello.helloWorld1，其所属分组为 group2。

3. menu2 相关配置

{
  "menus": {
    "menu2": [
      {
        "command": "hello.helloWorld",
        "group": "group1"
      }
      ]
  }
}
  • 含义：这是对 menu2 这个子菜单的具体定义，它包含了一个菜单项，该菜单项对应插件命令 hello.helloWorld，所属分组为 group1。

4. submenus 配置

{
  "submenus": [
    {
      "id": "helloWorldmenuList",
      "label": "一级菜单"
    },
    {
      "id": "menu2",
      "label": "二级菜单"
    }
  ]
}
  • 这部分配置主要是为了给前面定义的子菜单提供更直观的标识信息。通过 id 属性将这里定义的菜单信息与前面 menus 部分中对应的子菜单关联起来。例如，id 为 helloWorldmenuList 的子菜单在用户界面上显示的标签是 一级菜单，id 为 menu2 的子菜单显示的标签是 二级菜单。

完整配置代码

{
  "name": "hello",
  "displayName": "hello",
  "description": "",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.95.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [],
  "main": "./extension.js",
  "contributes": {
    "commands": [{
      "command": "hello.helloWorld",
      "title": "Hello World"
    },{
      "command": "hello.helloWorld1",
      "title": "Hello World1"
    }],
    "keybindings": [
      {
        "command": "hello.helloWorld",
        "key": "ctrl+f10",
        "mac": "cmd+f10",
        "when": "editorFocus"
      },
      {
        "command": "hello.helloWorld1",
        "key": "ctrl+f11",
        "mac": "cmd+f11",
        "when": "editorFocus"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "submenu": "helloWorldmenuList",
          "group": "navigation",
          "when": "editorFocus"
        }
      ],
      "helloWorldmenuList":[
        {
            "submenu": "menu2",
            "group": "group1"
        },
        {
            "command": "hello.helloWorld1",
            "group": "group2"
        }
      ],
      "menu2" : [
        {
          "command": "hello.helloWorld",
          "group": "group1"
        }
      ]
    },
    "submenus": [
      {
        "id": "helloWorldmenuList",
        "label": "一级菜单"
      },
      {
        "id": "menu2",
        "label": "二级菜单"
      }
    ]
  }
}

公众号

关注公众号『前端也能这么有趣』，获取更多有趣内容。

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。

avatar
文章
阅读
粉丝