如何在Visual Studio Code(VSCode)中实时查看侧边Panel(Frame)的尺寸与缩放

你设想的通过配置Live Frame面板名称为workbench.editor.*类内置配置项来实时显示尺寸的方案无法实现，原因如下：

• VSCode没有公开可以直接返回单个自定义面板/标签实时宽高像素值的内置配置项，这类动态实时数值不属于静态偏好配置的存储范围
• VSCode的配置项本身是静态存储的，不支持自动实时计算并刷新面板标题这类动态内容

• 如果你可以对Live Frame扩展做少量修改，直接调用VSCode官方扩展API即可实现需求：
  Live Frame本质是基于webview实现的预览面板，在它创建webviewPanel实例的代码中添加onDidChangeViewState事件监听，每次面板尺寸变化、显隐变化时事件都会触发，你可以直接从回调参数中获取当前面板的width、height像素值，结合全局配置window.zoomLevel计算出缩放百分比后，直接赋值给panel.title属性，即可实现拖拽调整时实时显示尺寸的效果。
• 如果你不想自行修改扩展，可以直接使用Responsive Design Viewer扩展，它原生支持对网页预览面板添加实时尺寸标注，效果和浏览器开发者工具的响应式设计模式一致，拖拽调整面板大小时数值会自动同步刷新。

• 全局窗口缩放比例对应的配置项为window.zoomLevel，支持读写，调整后整个VSCode界面包括所有面板会同步缩放
• 编辑器分栏的尺寸分配逻辑可以通过workbench.editor.splitSizing配置调整，支持设置为相等比例分配或保留上次拖拽的自定义比例
• 如需通过代码调整侧边面板尺寸，可以调用内置命令workbench.action.positionPanel，传入指定的宽度、位置参数即可生效

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