WebStorm 2025.3 Help

新 UI

新用户界面(UI)是 WebStorm 和其他 JetBrains IDE 的重新设计外观。 它旨在简化设计,使基本功能更易访问,从而带来更简洁、更现代的外观和体验。

在本文中,您将了解新界面的关键更改以及如何开始使用它。

新 UI
经典 UI

关键更改

主题

我们在此界面中引入了三个新主题——浅色深色带浅色标题的浅色。 所有这些主题都经过设计,以提供更好的对比度和一致的配色方案。

新界面中的浅色主题
新界面的浅色带浅色标题主题
新界面的深色主题

您可以在 设置 | 外观与行为 | 外观 中切换到其他主题。 请注意,并非所有自定义主题都已完全支持。

字体

现在, Inter 字体用于界面元素。 以前,每个平台使用默认的操作系统字体,并且渲染效果不同。

如果您想更改界面字体,请转到 设置 | 外观与行为 | 外观 ,选中 使用自定义字体 复选框,然后选择您偏好的字体。

图标和紧凑模式

我们新的图标集具有独特的形状和颜色,以增强可读性。 如果您在较小的屏幕上工作,可以从主菜单中的 视图 | 外观 | 紧凑模式 启用紧凑模式。 这将减少工具栏和工具窗口标题的高度,缩小间距和填充,并提供更小的图标和按钮。

新界面:紧凑模式开启
新界面:紧凑模式关闭

主窗口标题

我们简化了主窗口标题。 它通过图标和小部件提供对基本操作的访问。 主窗口标题也是可自定义的,允许您向工具栏添加更多操作,例如 Git push。 为此,请右键点击图标或小部件,从其上下文菜单中选择 自定义工具栏 ,然后在打开的 自定义主工具栏 对话框中添加首选操作。

窗口标题

1. 主菜单(仅限 Windows 和 Linux)

主菜单位于汉堡图标下。 要打开它,请按 Alt+\

您可以恢复标准菜单栏。 为此,请转到 设置 | 外观与行为 | 新 UI 并启用 在单独的工具栏中显示主菜单 选项。

2:项目小部件

项目小部件显示当前项目的名称,并允许您在最近的项目之间切换、创建新项目以及打开现有项目。

3:VCS 小部件

VCS 小部件显示当前分支,允许切换分支,并提供对基本 VCS 操作 (如更新、提交和推送更改)的访问。

它取代了以前位于主窗口底部状态栏中的旧分支小部件,以及以前位于右上角导航栏中的 VCS 操作图标。

4:运行小部件

此小部件允许您使用 运行/调试配置 运行调试您的应用程序。 您可以选择要运行的配置,更改其模式(运行或调试),以及编辑、固定或删除配置。

运行小部件操作

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

新界面:标题小部件

快速将操作添加到工具栏

如果您在主工具栏中错过了某个操作,您可以从热门操作列表中添加它。

  • 右键点击工具栏,指向 将操作添加到主工具栏 ,然后从列表中选择您要添加的操作。

    如果您想添加的操作不在常用操作列表中,请使用 Customize Main Toolbar对话框。

    向主工具栏添加操作

所选操作出现在工具栏上。 您可以使用 自定义主工具栏对话框来删除它或更改其图标。

工具窗口

工具窗口具有新的布局和行为:

  • 工具窗口栏使用更大的图标,以便于视觉导航并带来更简洁的外观。 您可以在 紧凑模式中选择较小的图标。

    要查看工具窗口名称,请将鼠标悬停在其图标上以显示工具提示。

    工具窗口图标提示
  • 如果您希望始终显示工具窗口名称,请右键点击某个工具窗口栏并选择 显示工具窗口名称

    工具窗口名称已启用
  • 位于边框左上角和右上角的工具窗口图标将分别打开左侧和右侧的垂直窗口。

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

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

    垂直拆分
    水平拆分
  • 不在任何工具窗口条中的工具窗口可以在 更多工具窗口 按钮下找到。 从 更多工具窗口 打开的工具窗口将在其默认位置添加一个带有图标的条。

    移动和隐藏工具窗口

导航栏

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

导航栏

如果您更喜欢以前的位置,您可以将其移回顶部或完全关闭。 要执行此操作,请转到主菜单并选择 视图 | 外观 | 导航栏

编辑器选项卡

现在处理多个编辑器标签页更加方便。 如果标签页无法适应屏幕,您可以选择使用滚动条或压缩标签页以将所有标签页放置在屏幕上。 打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器 | 通用 | 编辑器选项卡 ,并选择所需的选项。

滚动选项卡
挤压标签页
多行

装订区域

  • 断点现在默认放置在行号上,以节省横向空间。 您可以在行号附近设置断点:按 Ctrl+Shift+A ,输入 Breakpoints Over Line Numbers ,然后禁用该选项。

    断点显示在行号上方开启
    断点显示在行号上方关闭
  • 折叠图标已更新。 鼠标悬停时会显示未展开区域的图标,使界面看起来更简洁。

    您可以配置 IDE 使其始终显示折叠图标:前往 设置 | 编辑器 | 常规 | 代码折叠 ,在 始终 旁边选择 显示代码折叠箭头

    边距中的折叠图标在悬停时出现
  • 注释(Git Blame )的配色方案已更新,以帮助您更快地查看最近的更改。

    边距:Git 注释
最后修改日期: 2025年 12月 8日