In this section:
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.
When you open a file for editing, it opens in its own tab. The editor you are currently working in, is the active editor.
- 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.
You can change the behavior of the left gutter.
To change the behavior of the left gutters, use either the Appearance page of the editor settings, or the :
By default, this command is not mapped to any keyboard shortcut. You can create your own shortcut as described in the section Configuring Keyboard Shortcuts.
- 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 navigate 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:
- Close one or more tabs.
- Pin active tab.
- Split and unsplit tabs.
- Manage groups of tabs.
- Navigate between tabs.
- Add to Favorites.
- Move to a 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 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.