如何在VS Code扩展的上下文菜单中添加带勾选标记的布尔选项？

要实现像内置菜单那样带勾选标记的布尔选项，核心是利用VS Code命令系统的toggle状态机制，具体步骤如下：

1. 在package.json中注册命令与菜单 #

首先在扩展的package.json里，先注册你的命令，再把它添加到目标上下文菜单（比如活动栏的右键菜单）：

{
  "contributes": {
    "commands": [
      {
        "command": "myExtension.toggleFeature",
        "title": "启用我的功能"
      }
    ],
    "menus": {
      "activitybar/context": [
        {
          "command": "myExtension.toggleFeature",
          "group": "navigation"
        }
      ]
    }
  }
}

这里activitybar/context就是活动栏的右键菜单上下文，你可以根据需求换成其他上下文（比如编辑器右键、侧边栏右键等）。

2. 在扩展代码中实现toggle逻辑 #

接下来在你的扩展主文件（比如extension.js或extension.ts）里，注册命令时通过isChecked回调控制勾选状态，同时处理状态切换：

JavaScript示例 #

const vscode = require('vscode');

function activate(context) {
  // 用工作区配置存储状态，实现持久化
  const config = vscode.workspace.getConfiguration('myExtension');
  let isFeatureEnabled = config.get('featureEnabled', false);

  const toggleCommand = vscode.commands.registerCommand('myExtension.toggleFeature', () => {
    // 切换状态
    isFeatureEnabled = !isFeatureEnabled;
    // 保存到配置
    config.update('featureEnabled', isFeatureEnabled, vscode.ConfigurationTarget.Global);
  });

  // 给命令添加isChecked回调，控制勾选显示
  toggleCommand.isChecked = () => {
    // 实时获取最新状态
    return vscode.workspace.getConfiguration('myExtension').get('featureEnabled', false);
  };

  context.subscriptions.push(toggleCommand);
}

function deactivate() {}

module.exports = { activate, deactivate };

TypeScript示例 #

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const config = vscode.workspace.getConfiguration('myExtension');
  let isFeatureEnabled = config.get<boolean>('featureEnabled', false);

  const toggleCommand = vscode.commands.registerCommand('myExtension.toggleFeature', async () => {
    isFeatureEnabled = !isFeatureEnabled;
    await config.update('featureEnabled', isFeatureEnabled, vscode.ConfigurationTarget.Global);
  });

  toggleCommand.isChecked = () => {
    return vscode.workspace.getConfiguration('myExtension').get<boolean>('featureEnabled', false);
  };

  context.subscriptions.push(toggleCommand);
}

export function deactivate() {}

3. 配置默认值（可选） #

如果需要给状态设置默认值，可以在package.json的configuration字段里添加：

{
  "contributes": {
    "configuration": {
      "title": "我的扩展配置",
      "properties": {
        "myExtension.featureEnabled": {
          "type": "boolean",
          "default": false,
          "description": "是否启用我的功能"
        }
      }
    }
  }
}

完成以上步骤后，重新加载扩展，右键点击活动栏就能看到带勾选标记的菜单项，点击会切换勾选状态，且状态会持久保存。

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