WebStorm 6.0.1 Web Help

WebStorm editor is a powerful tool for creating and modifying source code of the supported file types. You can configure your editing environment in the Settings dialog.

The editor is tab-based. All operations with the editor tabs are available from the context menu of a tab, or from Window | Editor tabs node of the main menu.

When you open a file for editing, it opens in its own tab. The editor you are currently working in, is the active editor. You can change behavior of the active editor using the commands under View | Active Editor node of the main menu.

Tip

You always return the focus to the active editor from any tool window by pressing the EscapeEscape key.

wiUiEditor.png
Click thumbnail to view larger image.

1. Editor area
Use this area to type and edit your source code. The editor suggests numerous coding assistance facilities. Refer to the sections under this node, and to Basic Editing Procedures and Advanced Editing Procedures for details.
1. Gutter area
The left gutter provides additional information about your code and displays the various icons that identify the code structure, bookmarks, breakpoints, scope indicators, change markers and the code folding lines that let you hide arbitrary code blocks.
1. Smart completion pop-up
This is one of the key editing assistance features that suggests method names, functions, tags and other keywords you are typing.
1. Document tabs
Enable quick navigation across the multiple documents you are working on. Clicking a tab brings its contents to front and makes it available for editing in the active editor.

To move between the tabs, use the keyboard shortcuts Alt+RightCommand Right or Alt+LeftCommand Left.

Clicking a tab while CtrlControl is pressed, allows you to navigate to any part of the file path, through opening it in an external browser.

Context menu of a tab provides all commands applicable to a file opened in the editor, for example:

By default, the tabs appear on top of the editor, but you can change their location as described in the section Changing Placement of the Editor Tabs.

1. Validation side bar / marker bar
This is the bar to the right from the editing area, showing the green, red or yellow box on its top depending on whether your code is okay, or contains errors or warnings. This bar also displays active red, yellow, white, green and blue navigation stripes that let you jump exactly to the erroneous code, changed lines, search results, or TODO items.

In this section:

See Also

Concepts:

Procedures:

Reference:

Web Resources: