VSCode扩展开发：如何通过设置控制上下文菜单项的显隐？

1. 实现方式 #

有两种主流方案，可根据需求选择：

方案一：配置项直接绑定when条件（最简） #

直接在package.json中通过配置项控制菜单显示逻辑，VSCode会自动监听配置变化并更新菜单状态，无需额外代码。

1. 在package.json中添加配置项与菜单声明：

"contributes": {
  "configuration": {
    "title": "你的扩展名称",
    "properties": {
      "yourExtension.showContextMenu": {
        "type": "boolean",
        "default": true,
        "description": "控制是否显示上下文菜单项"
      }
    }
  },
  "menus": {
    "explorer/context": [ // 替换为你需要绑定的菜单位置，比如editor/context
      {
        "command": "yourExtension.yourCommand",
        "when": "config.yourExtension.showContextMenu" // 直接绑定配置项
      }
    ]
  }
}

用户修改设置后，菜单会自动同步显示或隐藏状态。

方案二：动态注册/注销菜单项（适合复杂逻辑） #

如果需要结合其他上下文条件（比如当前文件类型、项目状态等），可通过代码动态管理菜单项的生命周期：

import * as vscode from 'vscode';

let menuDisposable: vscode.Disposable | undefined;

// 更新菜单状态的核心函数
function updateContextMenu() {
  // 先清理之前的注册实例
  menuDisposable?.dispose();

  const config = vscode.workspace.getConfiguration('yourExtension');
  const shouldShow = config.get<boolean>('showContextMenu', true);

  if (shouldShow) {
    // 注册命令逻辑
    const commandDisposable = vscode.commands.registerCommand('yourExtension.yourCommand', () => {
      // 你的命令执行逻辑
      vscode.window.showInformationMessage('上下文菜单命令触发');
    });

    // 将命令注册到目标菜单
    const menuCommandDisposable = vscode.menus.registerMenuCommand('explorer/context', {
      command: 'yourExtension.yourCommand',
      when: "resourceType == 'file'" // 可叠加额外上下文条件
    });

    // 合并Disposable，方便统一销毁
    menuDisposable = vscode.Disposable.from(commandDisposable, menuCommandDisposable);
  }
}

export function activate(context: vscode.ExtensionContext) {
  // 初始化菜单状态
  updateContextMenu();

  // 监听配置变化，实时更新菜单
  context.subscriptions.push(
    vscode.workspace.onDidChangeConfiguration(e => {
      if (e.affectsConfiguration('yourExtension.showContextMenu')) {
        updateContextMenu();
      }
    })
  );
}

export function deactivate() {
  menuDisposable?.dispose();
}

2. 参考扩展 #

可参考以下流行扩展的实现逻辑：

• GitLens：通过大量配置项控制各类菜单、按钮的显示，源码中大量使用when条件绑定配置，以及动态上下文键控制界面元素。
• Prettier：配置项可控制是否在上下文菜单中显示格式化选项，其package.json的菜单声明直接绑定了配置项。
• ESLint：通过配置项控制修复菜单的显示，源码包含配置监听和菜单状态更新的逻辑。

内容的提问来源于stack exchange，提问作者Akira Takeshi