新界面
新用户界面(UI)是对 WebStorm 及其他 JetBrains IDE 的外观重新设计。 其创建目的是简化设计,让关键功能更易访问,从而带来更加清晰、现代的外观体验。
本文将介绍新界面中的关键更改及其上手方式。


关键更改
主题
我们在该界面中引入了三种新主题——浅色、 深色 和 浅色(带浅色标题栏)。 所有主题都设计为具有更优对比度和一致的配色方案。



您可以在 中切换主题。 请注意,并非所有自定义主题都已完全支持。
字体
现在 UI 元素采用 Inter 字体。 此前,各平台使用默认操作系统字体,且渲染样式各异。
若您希望更改 UI 字体,请转到 ,选中 使用自定义字体 复选框,并选择偏好的字体。
图标与紧凑模式
新的图标集采用了更清晰的形状与颜色,以增强可读性。 若您使用较小屏幕,可在主菜单中的 启用紧凑模式。 该模式将减少工具栏与工具窗口标题栏高度,缩小间距与内边距,并提供更小的图标与按钮。


主窗口标题栏
我们对主窗口标题栏进行了简化。 它通过图标与小部件提供对关键操作的访问。 主窗口标题栏也支持自定义,允许您向工具栏添加例如 Git push 等更多操作。 为此,请右键点击任意图标或小部件,在其上下文菜单中选择 自定义工具栏 ,然后在打开的 自定义主工具栏 对话框中添加所需操作。

1. 主菜单(仅限 Windows 与 Linux) 主菜单(仅限 Windows 与 Linux)
主菜单位于汉堡图标下。 打开方式:按 Alt+\。
您可以恢复标准菜单栏。 为此,请转到 并启用 在独立工具栏中显示主菜单 选项。
2:项目小部件
项目组件显示当前项目名称,并允许您在最近使用的项目之间切换、新建项目以及打开现有项目。
3:VCS 小部件
VCS 组件显示当前分支,允许切换分支,并提供对更新、提交和推送更改等常用 VCS 操作 的访问。
它替代了以前位于主窗口底部状态栏中的旧分支组件,以及以前位于右上角导航栏中的 VCS 操作图标。
4:运行小部件
此组件允许您使用 run 和 debug 操作,通过 run/debug configuration 来运行和调试应用程序。 您可以选择要运行的配置、更改其模式(运行或调试),以及编辑、固定或删除配置。

新的窗口标题组件从主工具栏提供更多功能访问,同时将操作隐藏在下拉菜单中以简化布局。

快速将操作添加到工具栏
如果您在主工具栏中找不到某个操作,可以从常用操作列表中添加。
右键单击工具栏,指向 将操作添加到主工具栏 ,然后从列表中选择要添加的操作。
如果要添加的操作不在常用操作列表中,请使用 Customize Main Toolbar 对话框。

所选操作会显示在工具栏上。 您可以使用 Customize Main Toolbar 对话框移除它或更改其图标。
工具窗口
工具窗口拥有新的布局和行为:
工具窗口栏使用较大的图标,以便更易于视觉导航,并使外观更为简洁。 您可以在 compact mode 中选择使用较小的图标。
要查看工具窗口名称,请将鼠标悬停在其图标上以显示提示。

如果您始终希望看到工具窗口名称,请右键单击工具窗口条并选择 显示工具窗口名称。

位于边框左上角和右上角的工具窗口图标将分别在左侧和右侧打开垂直窗口。
位于边框左下角和右下角的工具窗口图标将在 WebStorm 的底部打开水平工具窗口。

使用垂直和水平拆分来排列工具窗口:将工具窗口图标沿侧边栏拖动并在分隔条下方放置以进行垂直拆分,或拖动到另一侧边栏实现水平拆分。


未显示在任何工具窗口条中的工具窗口可以通过 更多工具窗口 按钮找到。 当从 更多工具窗口 打开工具窗口时,其图标栏会添加到默认位置。

导航栏
导航栏现在位于主窗口底部的状态栏中。

如果您更喜欢之前的位置,可以将其移回顶部或完全关闭。 为此,请转到主菜单并选择 。
编辑器标签页
现在可以更方便地使用多个编辑器标签。 如果标签无法完整显示在屏幕上,您可以选择使用滚动条或压缩标签,以便所有标签都可见。 打开 设置 对话框(Ctrl+Alt+S ),转到 ,然后选择所需选项。



代码边距
为了节省横向空间,断点现在默认显示在行号上方。 您可以将断点放置在靠近行号的位置:按 Ctrl+Shift+A ,输入
Breakpoints Over Line Numbers,然后禁用该选项。

折叠图标已更新。 未折叠区域的图标在悬停时显示,以减少界面杂乱感。
您可以配置 IDE 始终显示折叠图标:转到 并在 显示代码折叠箭头 旁选择 始终。

注解(
Git Blame)的配色方案已更新,可帮助您更快识别最近更改。