WebStorm 2016.1 Help

WebStorm Editor

WebStorm editor is a powerful tool for creating and modifying source code. As any other IDE editor, it supports basic features like bookmarks, breakpoints, syntax highlighting, code completion, zooming, folding code blocks, etc. There are, however, plenty of advanced features like macros, highlighted TODO items, code analysis, intention actions, intelligent and fast navigation, and a lot more.

To configure your editing environment, use the Editor settings page and its child pages. There is also a Quick Switch Scheme command that lets you change color schemes, themes, keymaps, etc. with a couple of keystrokes.

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.

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.
2. 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.
3. 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.
4. 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+Right or Alt+Left.

Clicking a tab while the Ctrl key is pressed, allows navigating 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 Tab Headers .

5. 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

Last modified: 11 July 2016