现代化 VS Code 用户界面
内容提要
VS Code 自2015年发布以来界面日益复杂。微软正推进界面现代化，统一颜色、间距、字体等设计系统，并推出 Agents 窗口。根据反馈新增紧凑布局密度和连接式标签页，优化性能，同时保留经典界面供过渡。
延伸解读
现代化不只是换皮：统一设计系统的意义
文章强调，此次现代化并非重做编辑器，而是为工作台建立共享的设计基础，包括颜色、间距、字体和控件规则。这能提升界面层级清晰度，减少干扰，并让编辑器和 Agents 窗口等不同工作流拥有一致的视觉语言。对开发者而言，这意味着未来跨窗口切换时体验更连贯，但同时也需适应新的视觉规范。
紧凑布局密度：为小屏幕和密集工作流而设
反馈指出，现代化 UI 在 1920x1080 分辨率下会多占约 20 像素水平空间和 12-18 像素垂直空间，可能挤压代码区域。为此微软新增了紧凑布局密度，通过减少间距来保留更多内容空间，同时不牺牲新界面的结构和自定义能力。用户可在自定义布局中选择紧凑模式，或设置 window.density.layout 为 compact。
连接式标签页：恢复标签与内容的视觉关联
早期现代化 UI 采用药丸形标签，使选中标签与下方编辑器内容在视觉上分离，尤其在活动状态颜色不明显的主题中更难辨认。根据反馈，微软改为连接式标签，让选中标签与编辑器表面连成一体，恢复熟悉的活跃文件提示。如果仍喜欢药丸样式，可通过 workbench.experimental.modernUIEditorTabStyle 设置切换。
性能优化与经典界面过渡：现状与注意事项
针对渲染性能反馈，团队通过替换宽泛 CSS 选择器，在基准测试中将样式重算时间减少 8.2%，整体挂钟时间减少 3.3%，但布局时间增加了 6.6%，因此并非全面提速。目前用户仍可回退到经典 UI，但该选项是临时的，未来会逐步淘汰。主题作者需注意新颜色 ID 为实验性，应在明暗及高对比度主题下测试兼容性。
Q&A
VS Code 为什么要进行界面现代化？
因为自2015年首次预览以来，VS Code 增加了许多功能，导致界面视觉复杂且不一致。现代化旨在让界面层次更清晰、减少干扰，并建立共享设计基础，以支持编辑和新的工作流（如代理会话），同时不牺牲开发者依赖的密度、自定义和肌肉记忆。
VS Code 的现代化 UI 目前处于什么阶段？如何试用？
现代化 UI 目前处于预览阶段，已默认启用，但用户可以选择返回经典 UI。要试用，无需额外设置；若要返回经典 UI，可在设置中搜索 workbench.experimental.modernUI 并取消勾选。
VS Code 新增的紧凑布局密度是什么？如何启用？
紧凑布局密度是一种减少间距的布局选项，同时保留现代化 UI 的结构和自定义功能，适合小屏幕或信息密集的工作流。启用方法：从标题栏打开“自定义布局”，选择“布局密度”>“紧凑”，或设置 window.density.layout 为 compact。
VS Code 的标签页设计有什么变化？如何切换回旧样式？
现代化 UI 最初使用药丸形标签页，但反馈表明其与编辑器内容的视觉连接较弱。因此改为连接式标签页，使选中的标签页与下方编辑器表面连为一体。若偏好药丸形，可通过设置 workbench.experimental.modernUIEditorTabStyle 切换。
现代化 UI 对主题和扩展作者有什么影响？
现有主题仍兼容现代化 UI 和经典 UI。新的颜色 ID 会回退到现有工作台颜色，因此未定义新 ID 的主题保持原有调色板。主题作者可以选择使用新 ID 来更精细地控制表面、边框、标签页等。这些 ID 是实验性的，建议在两种界面和不同主题下测试。
现代化 UI 在性能方面做了哪些优化？
通过替换检查大量 DOM 的 CSS 选择器为状态类，减少了样式重计算时间。在基准测试中，样式重计算时间减少了 8.2%，整体挂钟时间减少了 3.3%，但布局时间增加了 6.6%。此外，添加了 lint 规则和 npm run perf:css 基准测试来防止性能回归。
