在 VS Code中将任意命令添加到右键菜单或顶部工具栏
在基于 VS Code 的编辑器（如 VS Code、Cursor 等）中，任何插件命令都可以通过简单配置加入到 编辑器右键菜单或顶部工具栏（Editor Title），从而显著提升使用效率。
本文提供一套通用方法，适用于所有 VS Code Fork。
最终效果
一、前提条件
你需要具备以下信息：
- 目标命令的 Command ID（例如：
jsonPathExtract.queryToJson） - 插件源码（或可修改其
package.json）
获取 Command ID：
- 打开命令面板（
Cmd + Shift + P - 搜索命令
- 右键 → Copy Command ID
二、添加顶部按钮（Editor Title）
修改插件的 package.json：
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优先级最高）
三、添加右键菜单
json
{
"menus": {
"editor/context": [
{
"command": "jsonPathExtract.queryToJson",
"when": "editorTextFocus",
"group": "navigation"
}
]
}
}
四、如何找到插件文件夹（Mac）
以 Cursor 为例：
插件目录位于：
bash
~/.cursor/extensions
此方法需要在 Finder 中按：
Cmd + Shift + .显示隐藏文件
打开目录步骤
- 打开 Finder
- 前往：用户目录（
~） - 找到
.cursor - 进入
extensions
👉 每个插件就是一个文件夹
五、更改不生效的解决方法
如果你已经修改了 package.json 但没有生效：
删除缓存文件
bash
~/.cursor/extensions/extensions.json
删除该文件后：
👉 重启 Cursor / VS Code 👉 系统会自动重新生成
六、常见问题与踩坑
1. 图标出现在「…」中
原因：
- 工具栏空间有限
- 优先级不足
解决：
json
"group": "navigation@-1"
2. “Configure Icon Visibility” 中找不到按钮
原因：
- VS Code 只允许部分命令进入该列表
- 自定义或非标准命令通常不会出现
结论：
无法通过 UI 固定显示，只能通过
group控制
3. 修改后未生效
检查：
- 是否重启编辑器
- 是否修改了正确插件目录
- JSON 是否合法
4. 按钮未显示
可尝试：
json
"when": "editorTextFocus"
或限制语言：
json
"when": "editorLangId == json"
5. 插件更新覆盖修改
- Marketplace 插件会被自动覆盖
- 建议使用本地副本或 fork