在基于 VS Code 的编辑器（如 VS Code、Cursor 等）中，任何插件命令都可以通过简单配置加入到 编辑器右键菜单或顶部工具栏（Editor Title），从而显著提升使用效率。

本文提供一套通用方法，适用于所有 VS Code Fork。

最终效果

iShot_2026-04-15_22.33.53.png

一、前提条件

你需要具备以下信息：

  • 目标命令的 Command ID（例如：jsonPathExtract.queryToJson）
  • 插件源码（或可修改其 package.json）

获取 Command ID：

  1. 打开命令面板（Cmd + Shift + P
  2. 搜索命令
  3. 右键 → Copy Command ID

二、添加顶部按钮（Editor Title）

修改插件的 package.json：

{
  "contributes": {
    "commands": [
      {
        "command": "jsonPathExtract.queryToJson",
        "title": "Run JSONPath → JSON",
        "icon": "$(json)"
      }
    ],
    "menus": {
      "editor/title": [
        {
          "command": "jsonPathExtract.queryToJson",
          "when": "editorTextFocus",
          "group": "navigation@-1"
        }
      ]
    }
  }
}

关键点

  • icon：使用内置 Codicon（如 $(json)、$(play)）

你可以在这篇文章中找到完整的图标和对应的代码

  • editor/title：右上角工具栏
  • group：控制排序（@-1 优先级最高）

三、添加右键菜单

{
  "menus": {
    "editor/context": [
      {
        "command": "jsonPathExtract.queryToJson",
        "when": "editorTextFocus",
        "group": "navigation"
      }
    ]
  }
}

四、如何找到插件文件夹（Mac）

以 Cursor 为例：

插件目录位于：

~/.cursor/extensions

此方法需要在 Finder 中按：Cmd + Shift + .显示隐藏文件

打开目录步骤

  1. 打开 Finder
  2. 前往：用户目录（~）
  3. 找到 .cursor
  4. 进入 extensions

👉 每个插件就是一个文件夹

五、更改不生效的解决方法

如果你已经修改了 package.json 但没有生效：

删除缓存文件

~/.cursor/extensions/extensions.json

删除该文件后：

👉 重启 Cursor / VS Code 👉 系统会自动重新生成

六、常见问题与踩坑

1. 图标出现在「…」中

原因：

  • 工具栏空间有限
  • 优先级不足

解决：

"group": "navigation@-1"

2. “Configure Icon Visibility” 中找不到按钮

原因：

  • VS Code 只允许部分命令进入该列表
  • 自定义或非标准命令通常不会出现

结论：

无法通过 UI 固定显示，只能通过 group 控制

3. 修改后未生效

检查：

  • 是否重启编辑器
  • 是否修改了正确插件目录
  • JSON 是否合法

4. 按钮未显示

可尝试：

"when": "editorTextFocus"

或限制语言：

"when": "editorLangId == json"

5. 插件更新覆盖修改

  • Marketplace 插件会被自动覆盖

  • 建议使用本地副本或 fork

标签：无

你的评论