WebStorm 2025.2 Help

用户界面

当您在 WebStorm 中打开 项目 时，默认用户界面如下所示：

主窗口

根据 插件 和配置设置的不同，您的 IDE 外观和行为也可能不同。

焦点： Alt+Home

显示/隐藏： 视图 | 外观 | 导航栏

导航栏是 项目视图 的一种快速替代方案，您可以在此浏览 项目 的结构、打开特定文件以及跳转到当前文件中的特定代码元素。

它位于主窗口底部的状态栏中。 您可以更改其位置：在主菜单中，转到 视图 | 外观 | 导航栏 并选择 顶部 以在 IDE 窗口顶部显示导航栏，或选择 不显示 以将其禁用。

导航栏

编辑器

焦点： Escape

使用 editor 来阅读、编写和探索源代码。

状态栏

显示/隐藏： 视图(V) | 外观(A) | 状态栏(S)

如果未将状态栏左侧用于 导航栏 ，该区域会显示最近的事件消息。 单击状态栏中的消息可在 通知 工具窗口中打开该消息。 右键点击状态栏中的消息，并选择 复制 ，可在查找问题解决方案或将消息添加到支持工单或 WebStorm 问题跟踪器时粘贴消息文本。

状态栏也会显示后台任务的进度。 您可以点击 后台任务 来显示 后台任务 管理器。

状态栏右侧包含指示项目和 IDE 整体状态的小部件，并提供对各种设置的访问。 根据 插件 和配置设置的不同，小部件的集合会有所变化。 右键点击状态栏以选择您想要显示或隐藏的小部件。

状态栏中闪烁的 错误通知状态图标 图标表示发生了 IDE 内部错误。 点击查看错误描述并提交报告。

自定义状态栏上的图标

小部件

说明

52:11

显示编辑器中当前插入符位置的行号和列号。 单击这些数字可将插入符定位到指定的行和列。 如果您在编辑器中选择了一段代码，WebStorm 还会显示该段代码中的字符数和换行数。

LF

显示用于在当前文件中断行的 line endings。 单击此小部件可更改换行符。

UTF-8

显示用于查看当前文件的 encoding。 单击此小部件以使用其他编码。

列

指示当前编辑器标签页启用了 column selection mode。 您可以按 Alt+Shift+Insert 来切换该模式。

只读 可读写

点击锁定文件以禁止编辑（设置为只读），或取消锁定以允许编辑。

JSON 架构

当在活动的编辑器标签页中打开 JSON 文件（例如， package.json 或 tsconfig.json ）时，该小部件会出现在状态栏上。 该小部件显示此 JSON 文件中使用的架构。 详细了解请参见 JSON。

语言服务

该小部件显示当前项目中正在运行的语言服务列表，例如编译器、代码检查器等。

状态栏：语言服务小部件

如果当前活动编辑器选项卡中的文件仅运行一个语言服务，则该服务的名称将显示在状态栏中，替代 语言服务。

状态栏：以某个具体服务名称作为标题的语言服务小部件

在编辑器中打开 TypeScript 文件后， TypeScript 小部件将始终显示在状态栏中。

使用该小部件编译 TypeScript，并配置或重启 TypeScript 语言服务。 详细了解请参见 TypeScript 和 将 TypeScript 编译为 JavaScript。

编译 TypeScript 代码

main

如果启用了 版本控制集成 ，此小部件将显示当前的 VCS 分支。 单击以 管理 VCS 分支。

2 个空格

显示当前文件使用的缩进样式。 单击以配置当前文件类型的制表符和缩进设置，或在当前项目中禁用缩进检测。

内存指示器

显示 WebStorm 使用的堆内存量与总堆内存量之比。 更多信息请参见 增加内存堆。

WebStorm 状态栏中的默认部署服务器

单击以将任一配置好的部署服务器或服务器组设置 为默认 ，以执行 部署操作。

在 WebStorm 状态栏中选择默认部署服务器

工具窗口

显示/隐藏： 视图(V) | 工具窗口(T)

工具窗口 提供了辅助代码编辑的功能。 例如， 项目工具窗口 显示 项目 的结构， 运行 工具窗口显示您运行应用程序时的输出。

默认情况下，工具窗口停靠在主窗口的两侧和底部。 您可以 根据需要进行排列 、取消停靠、调整大小、隐藏等。 右键单击工具窗口标题，或单击标题中的 “选项”按钮 ，以访问排列选项。

您可以为常用工具窗口 分配快捷键 以便快速访问。 其中一些默认已有快捷键。 例如，打开 项目 工具窗口，请按 Alt+1 ；打开 终端 工具窗口，请按 Alt+F12。 要从编辑器跳转到最后使用的工具窗口，请按 F12。

上下文菜单

您可以右键单击界面中的不同元素，以查看该元素当前上下文中的可用操作。 例如，右键单击 项目 工具窗口中的文件，可查看与该文件相关的操作，或在编辑器中右键单击查看适用于当前代码片段的操作。

这些操作中的大多数也可以通过屏幕顶部或主窗口顶部的主菜单执行。 带有快捷键的操作会在操作名称旁边显示其快捷键。

弹出菜单可快速访问与当前 IDE 与 项目 上下文相关的操作。 以下是一些有用的弹出菜单及其快捷键：

  • Alt+Insert 会打开 生成 弹出菜单，用于根据上下文 生成样板代码。

  • Ctrl+Alt+Shift+T 会打开 重构 弹出菜单，列出当前上下文可用的 重构。

  • 在 项目 工具窗口中， Alt+Insert 会打开 新建 弹出菜单，用于向 项目 添加新文件和目录。

  • Alt+` 会打开 VCS 操作 弹出菜单，内含适用于当前 版本控制系统 的操作。

您可以使用经常使用的操作的 快速列表 创建自定义弹出菜单。

工具窗口栏

主窗口两侧的工具栏中包含工具窗口图标。 单击图标可显示或隐藏工具窗口。 右键单击图标可打开上下文菜单，您可以在其中隐藏或移动工具窗口。 您也可以拖动工具窗口图标以重新排列工具窗口。

左侧和右侧工具栏上部的工具窗口图标会打开 IDE 窗口两侧的垂直工具窗口。

工具栏底部的图标会打开 IDE 窗口底部的水平工具窗口。

详细了解请参见 工具窗口栏与按钮。

工具窗口栏

工具栏

窗口标题栏的工具栏中包含若干小部件。 从左到右：

窗口标题

  1. 主菜单（仅限 Windows 和 Linux）

    主菜单现已隐藏在 菜单图标下。 点击图标或按 Alt+\ 键访问菜单分类。 这些元素将以横向方式显示在其他标题小部件上方。

    您可以将主菜单显示为单独的工具栏：转到 设置 | 外观与行为 | 外观 并启用 Show main menu in a separate toolbar 选项。 或者，转到 视图 | 外观 并启用 Show Main Menu in Separate Toolbar。

  2. Project 小部件

    该小部件显示当前 项目 的名称，允许在最近的 项目 之间切换、新建 项目，以及打开已有的项目。

  3. VCS 小部件

    该小部件显示当前分支，允许切换分支，并提供最常用的 VCS 操作 ，如更新项目、提交和推送更改。

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

  4. 运行小部件

    该小部件允许启动 run/debug configurations ，选择其他配置进行运行，并更改当前配置的模式（运行或调试）。 您可以使用此小部件编辑、固定或删除配置。

    当进程正在运行时，您可以使用此小部件重新启动或停止该进程。

边距栏

Gutter 是位于编辑器左侧的面板。 它包含 操作图标 ，允许您修复代码问题、运行或调试代码，并使用其他特定框架的功能。 行号、 断点和 书签也显示在 Gutter 中。

Gutter 还允许 折叠代码 ，为受版本控制的项目标记 已修改的行 ，并显示 代码覆盖率结果。

主窗口

主窗口允许您使用单个 WebStorm 项目 进行工作。 您可以在多个窗口中打开多个 项目。 默认情况下，窗口标题显示项目名称和当前打开的文件名称。 如果有多个模块，还会显示相关模块的名称。

若要显示项目及当前文件的完整路径，请在 外观与行为 | 外观 设置页面 Ctrl+Alt+S 中选择 始终在窗口标题中显示完整路径。

最后修改日期： 2025年 9月 26日
辅助功能用户界面主题