Visual Studio Code界面分为活动栏、标题栏与菜单栏、侧边栏、编辑器区域和状态栏五部分:活动栏含资源管理器等5个核心视图入口;标题栏显示文件名,菜单栏集成标准操作;侧边栏动态呈现所选视图内容;编辑器区域支持多标签、分栏及断点设置;状态栏提供语言模式、编码格式、行列位置与Git分支等实时信息。

如果您刚安装并打开 Visual Studio Code,面对密集的界面元素可能感到无所适从。以下是对其用户界面各组成部分的逐项说明:
本文运行环境:MacBook Air,macOS Sequoia。
一、活动栏(左侧垂直栏)
活动栏位于窗口最左侧,提供对核心功能视图的快速访问,每个图标代表一个可切换的工作区视角。
1、点击顶部第一个图标(四个小方块组成的正方形),切换到资源管理器视图,用于浏览和操作文件与文件夹。
2、点击第二个图标(两个相互重叠的矩形),进入搜索视图,支持跨文件内容检索与替换。
3、点击第三个图标(圆柱体加箭头),打开源代码管理视图,显示 Git 状态、暂存更改及提交历史。
4、点击第四个图标(气泡对话框),进入调试视图,可设置断点、启动调试会话并查看变量状态。
5、点击第五个图标(齿轮与扩展拼合图形),进入扩展视图,用于安装、禁用或配置已安装的插件。
二、标题栏与菜单栏(顶部横栏)
标题栏显示当前打开文件或文件夹名称,菜单栏则集成标准桌面应用操作入口,其可见性受系统设置影响。
1、在 macOS 上,菜单栏默认与系统顶部菜单合并,按 Command + Shift + P 可呼出命令面板,替代部分菜单功能。
2、若需始终显示独立菜单栏,进入 Code → Settings → Window → Menu Bar Visibility,将值设为“visible”。
3、点击“文件”菜单,可执行新建文件、打开文件夹、保存工作区等操作;“编辑”菜单提供格式化、行操作及多光标控制选项。
三、侧边栏(中央主区域左侧)
侧边栏是活动栏所选视图的具体承载区域,其内容随活动栏图标切换而动态变化,不具有固定结构。
1、当资源管理器处于激活状态时,侧边栏顶部显示当前工作区路径,下方以树状结构列出所有文件与文件夹。
2、右键点击任意文件夹可调出上下文菜单,包含 “在终端中打开”、“在新窗口中打开” 等快捷操作。
3、文件名右侧出现的小圆点表示该文件已被修改但尚未保存,关闭前会提示是否保存。
四、编辑器区域(中央主区域)
编辑器区域是代码编写的核心空间,支持多标签页、分栏编辑及预览模式,所有文本输入与语法高亮均在此发生。
1、点击编辑器区域右上角的 “+”号 按钮,可新建空白标签页;拖拽已有标签页至右侧可创建垂直分栏。
2、双击标签页名称可重命名当前文件;右键标签页可选择 “关闭其他编辑器” 或 “将编辑器移动到另一组”。
3、将鼠标悬停在行号左侧边缘,出现小圆点即表示可在此行设置断点;点击即可启用或禁用调试断点。
五、状态栏(底部横栏)
状态栏提供当前编辑器的实时上下文信息,包括语言模式、编码格式、行/列位置、Git 分支及扩展状态指示器。
1、左端显示当前文件的语言标识(如 Plain Text),点击可手动更改为 JavaScript、Python 等对应语言模式。
2、中间位置显示 UTF-8 字符编码,点击可切换为 UTF-16、ISO 8859-1 等其他编码格式。
3、右端显示 Git 分支名称(如 main),点击可拉取、推送、切换分支或初始化仓库。










