【IDE系列】VSCode IDE界面架构介绍

VSCode IDE编辑器的UI界面可以分为两项：Container（容器）和items（项目）。

Container一般指的是外部一层，包括：

1. Activity Bar：如下图所示界面最左侧，里面会有好几种不同的view container（视图容器）；每个容器都有一个独特的图标，并且会与其余图标(轮廓)的样式相匹配
2. Sidebar：如下图所示左边第二竖栏，侧边栏，包含的是explorer（各个视图容器的资源管理器）
3. Editor：如下图所示右上方这一大块，是代码编辑区
4. Panel：如下图所示右下方这一块，面板，里面包含terminal, console, output，插件的展示窗等等
5. Status Bar：如下图所示最下面这一栏，显示与工作空间相关的信息和操作。状态栏里的项目会被分为两组-主要的（放在左边）和次要的（放在右边）；一般来说，与整个工作空间相关的(状态、问题/警告、同步等)主要的项目放在左边，只是和环境相关的(语言、间距信息、反馈)次要的项目放在右边。

item（项目）则一般是放在容器里的，包括：

1. View Container：如下图所示6和11-就像前面在container提到的，activity bar和pannel面板 里一个个图标/标题就是view container视图容器
2. View：如下图所示7和13-View视图 是会出现在sidebar侧边栏 或 pannel面板 中的内容容器。视图的形状包含树状或自定义，还可以显示视图的操作；视图也可以由用户重新排列。
3. View Toolbar：如下图所示8，是视图的工具栏
4. Sidebar Toolbar：如下图所示9，是侧边栏的工具栏
5. Editor Toolbar：如下图所示10，是Editor代码编辑区 的工具栏
6. Panel Toolbar：如下图所示12，是面板的工具栏
7. Status Bar Item：如下图所示14，里面是状态栏里一个个项目

参考资料

1. https://code.visualstudio.com/api/ux-guidelines/overview