WebStorm 2020.1 Help

Overview of the user interface

When you open a project in WebStorm, the default user interface looks as follows:

The Main window

Depending on the set of plugins and configuration settings, your IDE may look and behave differently.

Editor

Use the editor to read, write, and explore your source code.

Action indicators and action list

Various icons that appear in the gutter, for example, the Yellow bulb icon, 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.

The navigation bar at the top is a quick alternative to the Project tool window where you can navigate the structure of your project and open files for editing.

Use the buttons to the right of the navigation bar to run the Run button and debug the Debug button your application, and perform basic version control operations (if the version control integration is configured). It also contains buttons to Run Anything The Run Anything button (press Ctrl twice) and Search Everywhere The Search Everywhere button (press Shift twice).

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 the message 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 the support ticket or to the WebStorm issue tracker.

The status bar also indicates the overall project and IDE status and provides access to various settings. The table below lists default icons and elements shown on the status bar.

Depending on the set of plugins and configuration settings, there can be other elements in addition to the default ones. Right-click the right part of the status bar to select the elements you want to show or hide.

Customize the icons on the Status bar

Icon

Description

Show tool windows Hide tool windows

Click to show/hide tool window bars. Double-press and hold Alt to show hidden tool window bars. For more information, see Hide or showing the tool window bars.

Background tasks

Click to show the Background Tasks manager. This icon is visible only when a background task is in progress.

52:11

Numbers divided by a colon denote the current caret position in the editor (line and column). Click the numbers to jump 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.

uiStatusLineEnding

Click to change the line endings of the current file in the editor.

Encoding

Click to change the encoding of the current file in the editor.

Code style indents

Click to change the indents style used in the current file.

Code style indents

If version control integration is enabled, shows the current VCS branch. Click to mangae VCS branches.

Read-only Write-only

Click to lock the file from editing (set it to read-only).

The Hector icon

Click to change the code inspection highlighting settings.

Use the slider to choose between Inspections The Hector inspections icon (highlight everything), Syntax The Hector syntax icon (highlight only syntax errors), and None The Hector none icon (do not highlight anything).

Select the Power Save Mode checkbox to minimize power consumption by eliminating all background operations Code analysis disabled in the Power Save mode. In this mode the IDE is more like a text editor without background compilation, code completion, code inspections, and highlighting.

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 The Show Options Menu button 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. To jump from the editor to the last active tool window, press 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 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+Shift+Alt+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 contexutally available acttios for your version control system.

You can create custom popup menus using quick lists of actions that you often use.

Last modified: 7 April 2020