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 fromnode 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 node of the main menu.
You always return the focus to the active editor from any tool window by pressing the EscapeEscapeEscapeEscapeEscape, Escape or Ctrl+GEscapeEscapeEscapeEscapeEscapeEscape key.
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.
- 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
To move between the tabs, use the keyboard shortcuts Alt+RightAlt+RightAlt+RightAlt+RightAlt+Right, Ctrl+X, N or Ctrl+X, OAlt+RightCtrl+Page DownCtrl+F6, Ctrl+Alt+Left or Ctrl+Page DownShift Command Close Bracket or Control RightControl RightCommand F6 or Alt Command Right or Alt+LeftAlt+LeftAlt+LeftAlt+LeftAlt+Left or Ctrl+X, PAlt+LeftCtrl+Page UpCtrl+Shift+F6, Ctrl+Alt+Right or Ctrl+Page UpShift Command Open Bracket or Control LeftControl LeftShift Command F6 or Alt Command Left.
Clicking a tab while the Ctrl key 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:
- Close one or more tabs.
- Pin active tab.
- Split and unsplit tabs.
- Manage groups of tabs.
- Navigate between tabs.
- Add to Favorites.
- Move to changelist.
- Run, or debug in the active editor.
- Perform local history and version control commands.
- Perform commands of your own tools.
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 .
- 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: