Overview of the user interface用户界面概览

Editor编辑

Focus: 聚焦：Escape

Use the editor to read, write, and explore your source code.使用编辑器阅读、编写和浏览源代码。

Action indicators and action list操作指标和操作清单

Open action list: 打开操作列表：Alt+Enter

Various icons that appear in the gutter, for example, , help you notice quick fixes and other actions. 例如，显示在左侧列中的各种图标，，可帮助您注意快速修复和其他操作。Clicking such action indicator or pressing Alt+Enter opens an action list with all the quick fixes and other actions that are available at the current caret position.单击此类操作指示器或按Alt+Enter键将打开一个操作列表，其中包含当前插入符号位置可用的所有快速修复和其他操作。

Navigation bar导航栏

Focus: 聚焦：Alt+Home

Show/hide: View | Appearance | Navigation Bar显示/隐藏：视图|外观|导航栏

The navigation bar at the top is a quick alternative to the Project tool window where you can go through the structure of your project, open specific files, and jump to specific code elements in the current file.顶部的导航栏是“项目工具窗口”的快速替代窗口，在该窗口中，您可以浏览项目的结构，打开特定文件，并跳转到当前文件中的特定代码元素。

Use the buttons to the right of the navigation bar to run and debug your application, and perform basic version control operations (if the version control integration is configured). 使用导航栏右侧的按钮运行和调试应用程序，并执行基本的版本控制操作（如果配置了版本控制集成）。It also contains buttons to Run Anything (press Ctrl twice) and Search Everywhere (press Shift twice).它还包含用于运行任何操作（按Ctrl键两次）和搜索任何位置（按Shift键两次）的按钮。

Status bar状态栏

Show/hide: View | Appearance | Status Bar显示/隐藏：视图|外观|状态栏

The left part of the status bar at the bottom of the main window shows the most recent event messages and descriptions of actions when you hover over them with the mouse pointer. 当您将鼠标指针悬停在主窗口底部状态栏的左侧时，状态栏的左侧将显示最新的事件消息和操作说明。Click a message in the status bar to open it in the Event Log. 单击状态栏中的消息以在事件日志中打开它。Right-click the message in the status bar and select Copy to paste the message text when you are searching for a solution to a problem or need to add it to a support ticket or to the WebStorm issue tracker.在状态栏中右键单击消息，然后选择复制以在搜索问题解决方案或需要将其添加到支持通知单或WebStorm问题跟踪器时粘贴消息文本。

Use the quick access button or to switch between tool windows and hide the tool window bars.使用快速访问按钮或在工具窗口和隐藏工具窗口栏之间切换。

The status bar also shows the progress of background tasks. 状态栏还显示后台任务的进度。You can click to show the Background Tasks manager.您可以单击以显示后台任务管理器。

The right part of the status bar contains widgets that indicate the overall project and IDE status and provide access to various settings. 状态栏的右侧包含指示整个项目和IDE状态的小部件，并提供对各种设置的访问。Depending on the set of plugins and configuration settings, the set of widgets can change. Right-click the status bar to select the widgets that you want to show or hide.根据插件集和配置设置，小部件集可以更改。右键单击状态栏以选择要显示或隐藏的小部件。

Widget小部件	Description描述
52:11	Shows the line and column number of the current caret position in the editor. 显示编辑器中当前插入符号位置的行号和列号。Click the numbers to move the caret to a specific line and column. 单击数字将插入符号移动到特定的行和列。If you select a code fragment in the editor, WebStorm also shows the number of characters and line breaks in the selected fragment.如果在编辑器中选择代码片段，WebStorm还会显示所选片段中的字符数和换行符数。
	Shows the line endings used to break lines in the current file. 显示用于打断当前文件中的行的行尾。Click this widget to change the line separators.单击此小部件更改行分隔符。
	Shows the encoding used to view the current file. 显示用于查看当前文件的编码。Click the widget to use another encoding.单击小部件以使用其他编码。
Column列	Indicates that the column selection mode is enabled for the current editor tab. 指示当前编辑器选项卡的列选择模式已启用。You can press Alt+Shift+Insert to toggle it.您可以按Alt+Shift+Insert来切换它。
	Click to lock the file from editing (set it to read-only) or unlock it if you want to edit the file.单击以锁定文件，使其无法编辑（将其设置为只读），或者如果要编辑文件，则将其解锁。
JSON SchemaJSON架构	The widget appears on the Status bar when a JSON file (for example, package.json or tsconfig.json) is opened in the active editor tab. 当在活动编辑器选项卡中打开JSON文件（例如，package.json或tsconfig.json）时，该小部件将显示在状态栏上。The widget shows the schema that is used in this JSON file. 小部件显示此JSON文件中使用的模式。Learn more from JSON.从JSON中了解更多信息。
TypeScript	The widget is shown on the Status bar all the time after you have opened a TypeScript file in the editor. 在编辑器中打开TypeScript文件后，小部件始终显示在状态栏上。Use the widget to compile TypeScript and to configure or restart the TypeScript Language Service. 使用小部件编译TypeScript并配置或重新启动TypeScript语言服务。Learn more from TypeScript and Compiling TypeScript into JavaScript.从TypeScript和将TypeScript编译成JavaScript了解更多信息。
	If version control integration is enabled, this widget shows the current VCS branch. 如果启用版本控制集成，此小部件将显示当前VCS分支。Click it to manage VCS branches.单击它可管理VCS分支。
	Shows the indent style used in the current file. 显示当前文件中使用的缩进样式。Click to configure the tab and indent settings for the current file type or disable indent detection in the current project.单击以配置当前文件类型的选项卡和缩进设置，或在当前项目中禁用缩进检测。
	Shows the amount of memory that WebStorm consumes out of the total amount of heap memory. 显示WebStorm在堆内存总量中消耗的内存量。For more information, see Increase the memory heap.有关更多信息，请参阅增加内存堆。

Tool windows工具窗口

Show/hide: View | Tool Windows显示/隐藏：查看|工具窗口

Tool windows provide functionality that supplements editing code. 工具窗口提供了补充编辑代码的功能。For example, the Project tool window shows you the structure of your project, and the Run tool window displays the output of your application when you run it.例如，项目工具窗口显示项目的结构，而运行工具窗口在运行应用程序时显示应用程序的输出。

By default, tool windows are docked to the sides and bottom of the main window. 默认情况下，工具窗口停靠在主窗口的侧面和底部。You can arrange them as necessary, undock, resize, hide, and so on. 您可以根据需要对其进行排列、取消锁定、调整大小、隐藏等。Right-click the title of the tool window or click in the title for its arrangement options.在工具窗口的标题上单击鼠标右键，或在标题中针对其排列选项单击。

You can assign shortcuts to quickly access the tool windows that you frequently use. 可以指定快捷键以快速访问经常使用的工具窗口。Some of them have shortcuts by default. 默认情况下，其中一些具有快捷方式。For example, to open the Project tool window, press Alt+1, and to open the Terminal tool window, press Alt+F12. 例如，要打开“项目”工具窗口，请按Alt+1，而要打开“终端”工具窗口，则请按Alt+F12。To jump from the editor to the last active tool window, press F12.要从编辑器跳转到最后一个激活的工具窗口，请按F12。

Context menus上下文菜单

You can right-click various elements of the interface to see the actions available in the current context. 您可以右键单击界面的各个元素以查看当前上下文中可用的操作。For example, right-click a file in the Project tool window for actions related to that file, or right-click in the editor to see actions that apply to the current code fragment.例如，在“项目”工具窗口中的文件上单击鼠标右键以查看与该文件相关的操作，或在编辑器中单击鼠标右键以查看应用于当前代码片段的操作。

Most of these actions can also be performed from the main menu at the top of the screen or the main window. 大多数操作也可以从屏幕顶部的主菜单或主窗口执行。Actions with shortcuts show the shortcut next to the action name.带有快捷方式的操作将在操作名称旁边显示快捷方式。

Popup menus弹出式菜单

Popup menus provide quick access for actions related to the current context. 弹出菜单可快速访问与当前上下文相关的操作。Here are some useful popup menus and their shortcuts:以下是一些有用的弹出菜单及其快捷方式：

• Alt+Insert opens the Generate popup for generating boilerplate code based on the context.为了根据上下文生成样板代码，打开生成弹出窗口。

• Ctrl+Alt+Shift+T opens the Refactor This popup with a list of contextually available refactorings.打开重构此弹出窗口，其中包含上下文可用重构的列表。

• Alt+Insert in the Project tool window opens the New popup for adding new files and directories to your project.在“项目”工具窗口中，打开新建弹出窗口，用于将新文件和目录添加到项目中。

• Alt+` opens the VCS Operations popup with contextually available actions for your version control system.打开VCS操作弹出窗口，其中包含版本控制系统的上下文可用操作。

You can create custom popup menus using quick lists of actions that you often use.您可以使用常用操作的快速列表创建自定义弹出菜单。

Main window主窗口

The main window contains all the information for a single WebStorm project. 主窗口包含单个WebStorm项目的所有信息。You can open multiple projects in multiple windows. 可以在多个窗口中打开多个项目。By default, the window header contains the name of the project and the name of the currently open file. 默认情况下，窗口标题包含项目名称和当前打开文件的名称。If there are multiple modules, it will also show the name of the relevant module.如果有多个模块，它还将显示相关模块的名称。