VS Code颜色自定义中的Gauge是什么？如何在UI中预览该组件？

• Gauge 组件定义：这是VS Code在2025年第一季度新增的UI组件，用于展示进度、比例类量化信息（比如代码覆盖率、任务完成进度等场景），属于较新的扩展支持型组件，因此在v1.96-1.98的发行说明中没有详细铺陈。

• 预览Gauge组件的方式：

  • 安装适配的第三方扩展：部分代码覆盖率、任务监控类扩展会调用Gauge API渲染该组件，安装后即可在对应场景（比如覆盖率面板）看到效果
  • 用开发者工具手动模拟：打开VS Code开发者工具（快捷键Ctrl+Shift+I/Cmd+Shift+I），在控制台执行以下代码片段，可快速渲染一个测试用Gauge：

    // 创建Gauge元素并挂载到页面
    const gaugeEl = document.createElement('div');
    gaugeEl.className = 'monaco-gauge';
    gaugeEl.style.width = '120px';
    gaugeEl.style.height = '120px';
    document.body.appendChild(gaugeEl);
    // 应用当前主题的配色变量
    const vsCodeApi = acquireVsCodeApi();
    const themeColors = vsCodeApi.getThemeService().getColorTheme().colors;
    gaugeEl.style.setProperty('--gauge-background', themeColors['gauge.background'] || '#e5e5e5');
    gaugeEl.style.setProperty('--gauge-foreground', themeColors['gauge.foreground'] || '#0078d4');
    gaugeEl.style.setProperty('--gauge-text', themeColors['gauge.text'] || '#333');
    

• 核心主题变量说明：

  • gauge.background：Gauge组件的背景底色
  • gauge.foreground：Gauge的进度填充主体颜色
  • gauge.border：Gauge组件的边框颜色（若组件启用边框样式）
  • gauge.text：Gauge内部显示的数值文本颜色

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