WebStorm用户界面
目录
- WebStorm用户界面
- 导航栏Navigation bar
- 编辑器Editor
- 状态栏Status bar
- 工具窗口Tool windows
- 右键菜单Context menus
- 弹出菜单Popup menus
- 工具窗口栏Tool window bars
- 工具栏Toolbar
- 编辑器侧边栏Gutter
- 主窗口Main window
WebStorm用户界面
在WebStorm中打开项目时，默认用户界面如下：
根据WebStorm版本、插件、设置的不同，IDE的外观可能会有所不同。
- 导航栏 Navigation bar
- 项目工具窗口 Project tool window
- 编辑器 Editor
- 弹出菜单 Popup menu
- 右键菜单 Context menu
- 状态栏 Status bar
- 工具窗口栏 Tool window bar
- 工具栏 Toolbar
- 编辑器侧边栏 Gutter
导航栏Navigation bar
按 Alt+Home，让导航栏获得焦点。
选择菜单“View | Appearance | Navigation Bar”，设置导航栏的显示位置或隐藏。
导航栏位于主窗口底部的状态栏中，是Project视图的快速替代方案，可以在其中浏览项目结构、打开特定文件、跳转到当前文件中的特定代码元素。
如果启用了VCS，则导航栏中的项目将根据VCS文件状态颜色高亮显示。
编辑器Editor
按Esc键，可以让编辑器获得焦点。
状态栏Status bar
主窗口底部状态栏的左侧部分显示最新消息。单击状态栏中的消息，在通知（Notifications）工具窗口中打开。右键单击状态栏中的消息，选择“复制”，可以在搜索问题的解决方案或需要将其添加到支持工单或WebStorm问题跟踪器时粘贴消息文本。
状态栏还显示后台任务的进度。可以点击图标（加载中）显示后台任务管理器。
状态栏右侧部分包含小部件，指示整个项目和IDE状态，并提供对各种设置的访问。根据插件集和配置设置，小部件集可能会发生变化。右键单击状态栏，选择要显示或隐藏的小部件。
默认情况下，从左到右显示的是：行号、语言种类、换行符、文件编码、缩进、文件锁定。
| 小部件 | 描述 |
|---|---|
| 52:11 | 显示编辑器中当前光标位置的行号和列号。单击数字，在对话框中输入行和列，定位到具体位置。如果在编辑器中选择一个代码片段，WebStorm还会显示所选片段中的字符数和行数。 |
| CRLF | 显示当前文件中的换行符，单击可以更改换行符。 -\n（Line Feed，换行）是 Unix、Linux 系统以及现代 macOS（10 及更高版本 ）使用的换行符 ，ASCII 码为 10 ，仅表示换行操作。 - \r（Carriage Return，回车）是老式 Mac OS 系统（Mac OS 9 及更早版本 ）使用的换行符 ，ASCII 码为 13 ，表示将打印头移到当前行的开头。 - Windows 系统（DOS 和 Windows 系列）使用\r\n作为换行符 ，表示先将光标移到行首（回车，\r），再移到下一行（换行，\n ） 。 |
| UTF-8 | 显示当前文件的编码，单击可更改为其他编码。 |
| Column | 表示当前编辑器已启用列选择模式，可以按 Alt+Shift+Insert 进行切换。 |
| 锁图标 | 单击可锁定文件，禁止编辑。 |
| JSON | 打开JSON文件时会显示，同时显示JSON文件使用的Schema，如：TSConfig代表TypeScript 项目中用于配置编译器选项的配置文件。 |
语言服务
- 显示当前项目中运行的语言服务列表，如：编译器、linter等。
- 如果当前编辑器选项卡中只有一个语言服务正在运行，则此服务的名称将直接显示在状态栏上。
- 在编辑器中打开TypeScript文件后，TypeScript始终显示在状态栏上，点击TypeScript可进行编译或配置或重新启动TypeScript语言服务。
| 小部件 | 描述 |
|---|---|
| main | 如果启用了版本控制，将显示当前的分支，单击可以管理VCS分支。 |
| 4 spaces | 显示当前文件中使用的缩进样式。单击配置当前文件类型的缩进设置，或在当前项目中禁用缩进检测。 |
| 554 of 2933M | 显示WebStorm消耗的内存。 |
| no default server | 选择部署服务器，可将已配置的服务器设置为执行部署操作的默认值。 |
工具窗口Tool windows
使用菜单“View | Tool Windows”隐藏或显示工具窗口。
- 工具窗口提供各种功能。例如，项目工具窗口显示项目的结构，运行工具窗口显示程序运行时的输出。
- 默认情况下，工具窗口停靠在主窗口的侧面和底部。可以根据需要移动位置、取消停靠、调整大小、显示隐藏等。右键单击工具窗口的标题选择对应的菜单项。
- 你可以指定快捷键快速访问经常使用的工具窗口。一些工具窗口有默认的快捷键。例如，要打开“项目”工具窗口，请按 Alt+1，要打开终端工具窗口，请按 Alt+F12 。要从编辑器转到最后一个活动的工具窗口，请按F12。
右键菜单Context menus
你可以右键单击界面的任意元素，查看此元素当前可用的操作。例如，在项目工具窗口中右键单击一个文件查看与该文件相关的操作，或在编辑器中右键单击查看适用于当前代码片段的操作。
这些操作中的大多数也可以从屏幕顶部的主菜单或主窗口执行。有快捷键的操作会在名称旁边显示快捷键。
弹出菜单Popup menus
弹出菜单提供了与当前窗口和项目相关的操作的快速访问。以下是一些常用的弹出菜单及其快捷键：
- Alt+Insert，在编辑器中打开生成（Generate）弹出窗口，根据上下文生成示例代码。
- Ctrl+Alt+Shift+T，打开重构（Refactor This）弹出窗口，其中包含可用的重构列表。
- 项目工具窗口中按 Alt+Insert，打开“新建”弹出窗口，用于向项目中添加新文件和目录。
- Alt+`，打开版本控制弹出窗口，其中包含版本控制系统的当前可用操作。
你可以把经常使用的快速操作列表创建成自定义弹出菜单。
工具窗口栏Tool window bars
- 主窗口两个侧边栏中会显示工具窗口图标。单击图标显示或隐藏工具窗口。右键单击图标打开菜单，可以隐藏或移动工具窗口。还可以拖动工具窗口图标排列工具窗口。
- 侧边栏上部的工具窗口图标打开的工具窗口会垂直显示。
- 侧边栏底部的工具窗口图标打开的工具窗口会水平显示。
工具栏Toolbar
窗口标题的工具栏中有几个小部件。从左到右：
- 主菜单（仅Windows和Linux系统）
主菜单隐藏在汉堡包图标（多条横线）下。要访问菜单，请单击图标或按 Alt+\，菜单展开并水平显示在标题栏。
可以将主菜单显示为单独的工具栏：选择“Settings | Appearance & Behavior | New UI”，然后启用“Show main menu in a separate toolbar”选项。或者，选择菜单“View | Appearance”并启用“Show Main Menu in Separate Toolbar”。 - 项目
该小部件显示当前项目名称，可以切换最近项目、创建新项目、打开现有项目。 - VCS
启用VCS后，该小部件显示当前分支，允许切换分支，并显示最常用的VCS操作，如更新、提交、推送更改。 - 运行
该小部件可以运行和调试程序，切换不同的调试配置。
当一个进程在运行时，可以使用小部件重新启动或停止运行。
编辑器侧边栏Gutter
编辑器侧边栏中显示各种图标（如：设置一个断点，会在侧边栏显示红色按钮），支持修复代码问题、运行或调试代码以及使用其他特定于框架的功能，行号、断点和书签也显示在编辑器侧边栏中。鼠标单击此类操作指示器或按Alt+Enter打开一个操作列表，其中包含当前光标位置可用的所有操作。
主窗口Main window
- 主窗口中可以打开单个WebStorm项目，可以在多个窗口中打开多个项目。默认情况下，窗口标题显示项目的名称和当前打开文件的名称。如果有多个模块，它还显示相关模块的名称。
- 要显示项目和当前文件的完整路径，请选择菜单“Appearance & Behavior | Appearance | Always show full paths in window header”。
