如何生成一个菜单栏

最新推荐文章于 2025-12-31 15:18:13 发布

原创最新推荐文章于 2025-12-31 15:18:13 发布 · 373 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #ide #编辑器

VSCode中顶部菜单栏没有提供可扩展的方式

暂时是没有找到相关可扩展的办法

官方支持的菜单栏开发

通过插件开发官方提供的功能点实现 Contribution Points | Visual Studio Code Extension API

以一个编辑器上下文添加子菜单的示例

在编辑器上下文新定义一个子菜单选项，定义id：pydebugger.editor.context.pydebug

  "contributes": {
    "menus": {
      "editor/context": [
        {
          "submenu": "pydebugger.editor.context.pydebug",
          "label": "PyDebugger",
          "group": "navigation"
        }
      ],
    },
  }

定义子菜单

"submenus": [
  {
    "id": "pydebugger.editor.context.pydebug",
    "label": "PyDebugger",
    "group": "navigation"
  }
],

定义子菜单内容

  "contributes": {
    "menus": {
      "pydebugger.editor.context.pydebug": [
        {
          "command": "pythondebug.start-debug",
          "group": "debugger@1"
        },
        {
          "command": "pythondebug.open-common-log-folder",
          "group": "debugger@3"
        }
      ]
    },
  }

完整的配置如下

{
  "main": "./dist/extension.js",
  "contributes": {
    "menus": {
      "editor/context": [
        {
          "submenu": "pydebugger.editor.context.pydebug",
          "label": "PyDebugger",
          "group": "navigation"
        }
      ],
      "pydebugger.editor.context.pydebug": [
        {
          "command": "pythondebug.start-debug",
          "group": "debugger@1"
        },
        {
          "command": "pythondebug.open-settings-panel",
          "group": "debugger@2"
        }
      ]
    },
    "submenus": [
      {
        "id": "pydebugger.editor.context.pydebug",
        "label": "PyDebugger",
        "group": "navigation"
      }
    ],
    "commands": [
      {
        "command": "pythondebug.update-extension",
        "title": "PyDebugger: 更新插件"
      },
      {
        "command": "pythondebug.open-settings-panel",
        "title": "PyDebugger: 打开设置面板"
      }
    ],
  },
}

运行效果

在这里插入图片描述