WebStorm用户界面-CSDN博客

本文链接：https://blog.csdn.net/li__nan/article/details/147476861

WebStorm用户界面

在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”。