VSCode扩展可通过package.json的contributes.menus配置在资源管理器、编辑器等区域添加自定义右键菜单,结合extension.ts中registerCommand实现命令逻辑,并利用when条件控制显示时机,实现上下文菜单定制。

VSCode 的上下文菜单(即右键菜单)可以通过扩展开发进行定制,满足特定工作流的需求。你可以在资源管理器、编辑器、终端等多个区域添加自定义命令。实现方式主要依赖于 package.json 中的贡献点(contribution points)和激活事件,配合注册命令与菜单项。
1. 配置 package.json 菜单项
在你的 VSCode 扩展中,package.json 文件中的 contributes.menus 字段用于定义上下文菜单的显示位置和触发命令。
常见菜单位置包括:
- explorer/context:文件资源管理器中的右键菜单
- editor/context:代码编辑器内的右键菜单
- editor/title/context:编辑器标签页上的右键菜单
- scm/resourceGroup/context:源码管理面板中的菜单
示例配置:
"contributes": {
"menus": {
"explorer/context": [
{
"command": "myExtension.renameFile",
"group": "modification"
}
],
"editor/context": [
{
"command": "myExtension.formatSelection",
"when": "editorTextFocus && !editorReadonly"
}
]
},
"commands": [
{
"command": "myExtension.renameFile",
"title": "重命名文件(带确认)"
},
{
"command": "myExtension.formatSelection",
"title": "格式化选中内容"
}
]
}
group 可控制菜单分组排序,如 navigation、clipboard、modification 等;when 表达式可控制菜单项的显示条件。
2. 在 extension.ts 中注册命令
菜单命令需要在主扩展文件(通常是 extension.ts)中通过 registerCommand 实际实现。
示例代码:
import * as vscode from 'vscode';export function activate(context: vscode.ExtensionContext) { const renameFile = vscode.commands.registerCommand('myExtension.renameFile', async (resourceUri) => { if (resourceUri instanceof vscode.Uri) { const newPath = await vscode.window.showInputBox({ prompt: '输入新文件名' }); if (newPath) { const newUri = vscode.Uri.joinPath(resourceUri.parent, newPath); await vscode.workspace.fs.rename(resourceUri, newUri); } } });
const formatSelection = vscode.commands.registerCommand('myExtension.formatSelection', async (e) => { const editor = vscode.window.activeTextEditor; if (editor && !editor.document.isReadOnly) { const selection = editor.selection; const text = editor.document.getText(selection); // 简单处理:转为大写(实际可用 formatter) await editor.edit(editBuilder => { editBuilder.replace(selection, text.toUpperCase()); }); } });
context.subscriptions.push(renameFile, formatSelection); }
注意:传递给命令的参数(如 resourceUri)由上下文自动注入,具体类型取决于菜单所在位置。
小邮包-包月订购包年服务网,该程序由好买卖商城开发,程序采用PHP+MYSQL架设,程序商业模式为目前最为火爆的包月订制包年服务模式,这种包年订购在国外网站已经热火很多年了,并且已经发展到一定规模,像英国的男士用品网站BlackSocks,一年的袜子购买量更是达到了1000万双。功能:1、实现多产品上线,2、不用注册也可以直接下单购买,3、集成目前主流支付接口,4、下单发货均有邮件提醒。
3. 使用 when 条件精确控制显示
VSCode 支持丰富的上下文条件表达式,让菜单项只在合适场景出现。
常用条件包括:
- resourceScheme == 'file':仅本地文件
- resourceExtname == '.js':特定后缀文件
- editorHasSelection:有文本选中时
- config.editor.readOnly:编辑器是否只读
例如,只为 JavaScript 文件显示菜单:
"when": "resourceExtname == '.js'"4. 图标与高级配置(可选)
你可以为命令添加图标,提升可视化体验。支持使用内置图标或自定义 SVG。
示例:
{ "command": "myExtension.backupFile", "title": "备份文件", "icon": "$(backup)" }更多图标参考 官方图标列表。
基本上就这些。通过合理配置菜单位置、命令逻辑和显示条件,你可以深度集成自定义功能到 VSCode 的右键菜单中,提升操作效率。不复杂但容易忽略的是上下文参数的获取和 when 表达式的准确编写。









