VSCode扩展:如何调整自定义格式化器对应的上下文菜单选项位置?
调整VSCode扩展中格式化命令的上下文菜单位置
默认情况下,通过Formatting Provider API注册的内置Format Document命令,其上下文菜单位置由VSCode统一管控,无法直接调整。但你可以通过自定义菜单命令的方式实现类似需求,具体步骤如下:
1. 注册自定义格式化命令
在扩展的package.json中,添加自定义命令的声明,关联到你的格式化逻辑:
{ "contributes": { "commands": [ { "command": "your-extension-id.customFormatDocument", "title": "Format Document" // 可与原命令同名,也可自定义后缀区分 } ] } }
2. 配置上下文菜单位置
同样在package.json的menus节点中,将自定义命令添加到编辑器上下文菜单,并通过group属性控制位置:
{ "contributes": { // ... 其他配置 "menus": { "editor/context": [ { "command": "your-extension-id.customFormatDocument", "when": "editorHasDocumentFormattingProvider && !editorReadonly", // 与原命令显示条件保持一致 "group": "formatting@0" // 控制位置:group指定分组,@后数字越小越靠前 }, // 可选:隐藏原内置的Format Document命令(避免菜单重复) { "command": "editor.action.formatDocument", "when": "false" } ] } } }
group参数说明:VSCode预设了菜单分组,比如formatting是格式化命令专属分组;@后的数字代表组内顺序,0为最前,数字越大位置越靠后。
3. 绑定命令到格式化逻辑
在扩展的主代码文件(如extension.ts)中,注册命令的执行逻辑,可直接复用你的格式化Provider逻辑,或触发内置格式化命令:
import * as vscode from 'vscode'; export function activate(context: vscode.ExtensionContext) { // 注册自定义格式化命令 const formatCmdDisposable = vscode.commands.registerCommand( 'your-extension-id.customFormatDocument', async () => { const activeEditor = vscode.window.activeTextEditor; if (!activeEditor) return; // 方式1:直接调用你的格式化Provider逻辑 // const document = activeEditor.document; // const edits = await yourFormattingProvider.provideDocumentFormattingEdits(document); // await activeEditor.edit(editBuilder => edits.forEach(e => editBuilder.replace(e.range, e.newText))); // 方式2:触发内置格式化命令(已注册Provider时可用) await vscode.commands.executeCommand('editor.action.formatDocument'); } ); context.subscriptions.push(formatCmdDisposable); // 你的Formatting Provider注册逻辑... }
注意事项
- 若选择隐藏内置命令,需确保自定义命令能完全覆盖原功能,避免影响用户体验;
- 不同分组的
group命名规则不同,比如navigation是导航类命令分组,可根据需求选择合适分组调整位置。
内容的提问来源于stack exchange,提问作者Darshana Suresh
相关产品推荐
相关产品推荐

