用户界面

导航栏

焦点： Alt+Home

显示/隐藏： 查看 | 外观 | 导航栏

导航栏是 项目视图 的一个快速替代方式，您可以通过它浏览 项目 的结构、打开特定文件，并跳转到当前文件中的特定代码元素。

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

编辑器

焦点： Escape

使用 编辑器来读取、编写和探索您的源代码。

状态栏

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

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

状态栏还会显示进程的进度。 您可以点击 以显示 进程 管理器。

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

状态栏的右侧部分包含指示整个项目和 IDE 状态的 widgets，并提供访问各种设置的途径。 根据 插件 和配置设置的不同，小部件的组合可能会发生变化。 右键点击状态栏以选择您要显示或隐藏的小部件。

小部件	描述
52:11	显示编辑器中当前文本光标位置的行号和列号。 点击数字将文本光标移动到特定行和列。 如果您在编辑器中选择代码片段，WebStorm 还会显示所选片段中的字符数和换行数。
LF	显示用于中断当前文件中行的 行尾。 点击此小部件更改行分隔符。
UTF-8	显示用于查看当前文件的 编码。 点击小组件以使用另一种编码。
列	表明当前编辑器选项卡已启用 列选择模式。 您可以按 Alt+Shift+Insert 切换它。
	单击以将文件锁定为不可编辑（设置为只读），或在需要编辑该文件时将其解锁。
JSON 架构	当在活动的编辑器标签页中打开 JSON 文件（例如， package.json 或 tsconfig.json ）时，该小部件会出现在状态栏上。 小部件显示此 JSON 文件中使用的模式。 详细了解请参阅 JSON。
语言服务	小部件显示当前项目中运行的语言服务列表，例如编译器、代码检查工具等。 如果当前活动编辑器选项卡中的文件仅运行一个语言服务，则该服务的名称会显示在状态栏中，而不是 语言服务。 在您在编辑器中打开 TypeScript 文件后， TypeScript 小部件始终显示在状态栏上。 使用该小部件可编译 TypeScript，并配置或重启 TypeScript 语言服务。 了解更多信息，请参阅 TypeScript 和 将 TypeScript 编译为 JavaScript。
main	如果启用了 版本控制集成 ，此微件会显示当前的 VCS 分支。 单击它以 管理 VCS 分支。
2 个空格	显示当前文件中使用的缩进样式。 点击以配置当前文件类型的标签和缩进设置或禁用当前项目中的缩进检测。
	显示 WebStorm 使用的内存量以及堆内存的总量。 有关更多信息，请参阅 增加内存堆。
	单击以设置任何已配置的部署服务器或服务器组 为默认 ，以执行 部署操作。

工具窗口

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

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

默认情况下，工具窗口会停靠在主窗口的两侧和底部。 您可以 根据需要进行排列 ，暂停停靠、调整大小、隐藏等。 右键点击工具窗口的标题或点击标题中的 以查看其排列选项。

您可以 指定快捷键 以快速访问您常用的工具窗口。 默认情况下，它们中的一些有快捷键。 例如，要打开 项目工具窗口，请按 Alt+1 ；要打开 终端工具窗口，请按 Alt+F12。 要从编辑器跳转到最后一个活动的工具窗口，请按 F12。

上下文菜单

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

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

弹出菜单

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

• Alt+Insert 打开 生成 弹出窗口以根据上下文 生成样板代码。

• Ctrl+Alt+Shift+T 打开 重构 弹出窗口，并显示上下文可用的 重构 列表。

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

• Alt+` 打开 VCS 操作 弹出窗口，其中包含适用于您的 版本控制系统 的上下文可用操作。

您可以使用常用操作的 quick lists 创建自定义弹出菜单。

工具窗口栏

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

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

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

有关更多信息，请参阅 工具窗口栏和按钮。

工具栏

窗口标题栏的工具栏中有几个小部件。 从左到右：

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

   主菜单现在隐藏在 菜单图标下。 要访问菜单类别，请单击该图标，或按 Alt+\。 这些元素将水平显示在其他标题栏小部件之上。

   您可以将主菜单显示为单独的工具栏：前往 设置 | 外观与行为 | 外观 并启用 在单独的工具栏中显示主菜单 选项。 或者，转到 视图 | 外观 并启用 在单独的工具栏中显示主菜单。

2. 项目小部件

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

3. VCS 小部件

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

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

4. 运行小部件

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

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

装订区域

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

边距还允许您 折叠代码 ，标记 版本控制下项目的修改行 ，并显示 代码覆盖率结果。

主窗口

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

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