WebStorm主界面分为项目工具窗口、编辑器、预览区和底部工具窗口四块区域，各司其职：项目窗口（Alt+1）用于文件导航，编辑器为核心编码区，预览区需插件支持，底部运行/调试/终端（Alt+F12）提供执行与反馈。
主界面四块区域各司其职，别从“全屏编辑”开始
WebStorm 不是纯编辑器，它默认就带结构化工作区。刚打开时看到的不是空白页，而是左侧 项目工具窗口（Alt+1）、中间大块 编辑器、右侧可能空着的预览区（需装插件）、底部常驻的 运行 / 调试 / 终端（Alt+F12）等工具窗口。新手容易下意识关掉所有边栏，结果失去文件导航和运行反馈——这反而让编码效率暴跌。
建议：首次启动后先不做任何隐藏操作，把 项目工具窗口 和底部 运行工具窗口 保持展开。它们不是干扰项，而是你定位文件、看控制台输出、查错误堆栈的刚需入口。
顶部工具栏和标题栏的区别，直接影响操作路径
新版本 WebStorm（2025.2 起）把很多功能收进标题栏小部件，比如 VCS 小部件 显示当前 Git 分支、运行小部件 直接选配置并点击运行。而传统意义上的“顶部工具栏”（含保存、撤销、绿色三角按钮）现在默认被折叠进汉堡菜单（Alt+0），除非你在 设置 | 外观与行为 | 新 UI 中启用 在单独的工具栏中显示主菜单。
常见卡点：
- 找不到“运行”按钮？检查是否启用了新 UI，然后看标题栏右端有没有带 ▶ 的小图标
- 点了绿色三角没反应？大概率是没配置
run/debug configuration，不是按钮失效 - 想快速切 Git 分支却只看到分支名？鼠标悬停在
VCS 小部件上，出现下拉箭头再点
工具窗口布局不是“设一次就完事”，得按场景存档
写代码、调接口、看日志、查 Git 差异，每个任务需要的工具窗口组合完全不同。WebStorm 允许你把当前窗口排列“存为布局”，比如：
-
编码布局：只留项目+结构（Alt+7）+终端 -
调试布局：展开调试+变量+断点+服务 -
Git 布局：提交+Git 工具窗口+差异预览
存布局操作路径：Window | Layouts | Save Current Layout as New。切换用 Ctrl + ` → 选名称。别依赖“恢复默认布局”（Shift+F12），它只回退到上次保存状态，不是重置全部。
编辑器标签页和侧边栏装订线，藏着高频操作入口
很多人盯着编辑区写代码，却忽略两个关键视觉线索：
一是编辑器右侧行号旁的 装订线（gutter）：黄色灯泡图标（Alt+Enter）代表可执行的快速修复，红色波浪线下方的红色小条是断点位置，灰色小圆点是 Git 修改标记——这些都不是装饰，是实时上下文提示。
二是编辑器上方的 文件标签页：右键单击任意标签，能看到 Close All But Pinned（关闭非固定页）、Split Vertically（左右分屏）等选项。多文件并行开发时，固定关键文件（Pin Tab）比反复在项目树里翻找更省时间。
容易忽略的一点：装订线里的 Git 标记只在项目已纳入版本控制且 .git 目录存在时才生效。如果新建空文件夹直接开 WebStorm，这些标记不会出现——不是 IDE 故障，是缺少 VCS 上下文。
