WebStorm 2018.1 Help

Editor basics

Navigate between editor and other tool windows

DescriptionAction

Switch schemes, keymaps, or view modes.

In the Switch menu, select your option and press Enter. Use the same shortcut to undo your changes.
You can also find and adjust the color scheme settings in File | Settings/Preferences | Editor | Color Scheme and the keymap settings in File | Settings/Preference | Keymap.
Ctrl+`

Maximize editor pane.

In this case WebStorm hides all other windows so only the editor you currently work in is open.
Ctrl+Shift+F12
Switch the focus from other windows to an active editor.Escape

Return to an editor from the command-line terminal.

However, note that in this case WebStorm closes the terminal window.

To keep the terminal window open when you want to switch back to an active editor, press Ctrl+Tab.

Alt+F12

Return to a default layout.

In this case WebStorm hides the Project tool window. However, you can select Window | Store Current Layout as Default from the main menu to save the current layout you are working in as default and use the same shortcut to restore it.
Shift+F12
Jump to last active window you have used. F12

Navigate inside the editor

Line numbers

DescriptionAction / Access
By default, WebStorm shows line numbers in the editor. If you do not want to see line numbers, select Settings/Preferences | Editor | General | Appearance and from the options on the right, select Show line numbers. You can also assign a shortcut to the Show line numbers action. Show line numbers
To navigate to a specific line or/and a column in the editor, press this shortcut. In the dialog that opens, specify the line or column number, or both, using: as separator and click OK. Ctrl+G

Cursor position and edit location

DescriptionAction / Access

Find current cursor location in the editor.

This action might be helpful if you have a large project and do not want to scroll through the file.
Ctrl+M
See on what element the cursor is currently positioned.Alt+Q
Find a previous cursor position. Ctrl+Alt+Left
Navigate to the last edited location. Ctrl+Shift+Backspace
Show the list of recently edited files.Ctrl+Shift+E
See recent files.Ctrl+E

Lens mode

The lens mode in the editor lets you scroll your code without actual scrolling. The mode is available by default when you hover your mouse on a scrollbar. To disable this option, right-click the code analysis marker located on the right side of the editor and from the context menu clear the Show code lens on the scrollbar hover checkbox.

Alternatively, you can perform the following steps:

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog.
  2. From the options on the left, select Editor | General | Appearance.
  3. From the options on the right, clear the Show code lens on the scrollbar hover checkbox.

Breadcrumbs

Breadcrumbs let you navigate through the source code, by showing the names of classes, variables, functions, methods and tags in the file with which you are currently working in the editor. By default, breadcrumbs are enabled and displayed at the bottom of the editor.

  • To change the location of breadcrumbs, right-click a breadcrumb, from the context menu select Breadcrumbs and the location preference.
  • To edit breadcrumbs settings, press Ctrl+Alt+S and on the page that opens, select Editor | General | Breadcrumbs. On the Breadcrumbs page, adjust the settings and click OK.

Manage editor tabs

WebStorm lets you manage the open tabs in the editor. You can close, hide, and detach them. Every time you open a file for editing, the tab with its name is added next to the active editor tab.

DescriptionAction / Access
Close all of the opened tabs, select this option on the main menu.Window | Editor Tabs | Close All
Close all inactive tabs leaving only the active one.Alt and click close1 on the active tab
Close only the active tab.Ctrl+F4
Move between tabs.Alt+Right / Alt+Left
Detach a tab, drag the tab you need outside of the main window (drag the tab back to attach it) or press this shortcut.

You can also use Alt+mouse.

Shift+F4
Switch between recently viewed tabs or files.
If you keep holding Ctrl, the Switcher window opens where you can select other files or tool windows to which you can switch.
Ctrl+Tab
Place editor tabs in a different part of the editor frame or remove the tabs.
From the main menu, select this path and the appropriate placement option.
Window | Editor Tabs | Editor Placement
Sort editor tabs.
From the main menu, select this option .
Window | Editor Tabs | Sort Tabs by File Name
Split the editor window.
Right-click the desired editor tab, and from the context menu select how you want to split the editor window (vertically or horizontally). WebStorm creates a split view of the editor and places it according to your selection. If you want to move the file without splitting the editor, select the Move Right or Move Down option.
Split Vertically / Split Horizontally

Tabs limits

WebStorm limits number of tabs that you can open in the editor simultaneously (the default tab limit is 10).

To change the default tab limit or to configure which editor tabs to close after the number of tabs reaches its limit:

  1. Press Ctrl+Alt+S.
  2. From the options on the left, select Editor | General |Editor Tabs.
  3. From the options on the right, in the Tab closing policy section, adjust the settings according to your preferences and click OK.

You can hide editor tabs if there is no more space:

  1. Press Ctrl+Alt+S.
  2. From the options on the left, select Editor | General | Editor Tabs.
  3. From the options on the right, select the Hide tabs if there is no space option. Extra tabs will be placed in the drop-down list located in the upper right part of the editor.

Edit code

Select, move, copy code

DescriptionAction
Extend the selection of your code.
For plain texts, the selection starts within the whole word then extends to a sentence, paragraph, etc.
For lines of code, the selection works the same way. It starts with a smaller part of code and then increases the selection to a larger code construct.

For example, when you press this action successively in a method call that contains vararg arguments, first, vararg argument is selected, then the whole group of vararg arguments, and then all arguments in the method call.

Ctrl+W
Shrink the code selection. Ctrl+Shift+W
Make the initial selection of your code, press the same key again to find the matching occurrence in the file. Alternatively, to make a multiselection of your code, press Shift+Alt and double-click the left mouse button. Alt+J
Find all the occurrences in the file. Ctrl+Shift+Alt+J
Find next/previous occurrence of the selected identifier.Alt+Wheel down /
Alt+Wheel up
Copy / paste a reference of a line or symbol when placing a caret on the line or symbol in question. Ctrl+Shift+Alt+C / Ctrl+V
To paste from history use this action.
In the dialog that opens, select your entry and click Paste.
You can configure the depth of the clipboard stack in the Limits section located in File | Settings/Preferences | Editor | General. When the specified number is exceeded, the oldest entry is removed from the list.
Ctrl+Shift+V
Undo or redo your changes. Ctrl+Z / Ctrl+Shift+Z
To highlight braces, place the caret immediately after the block closing brace/bracket or before the block opening brace/bracket.

Select, move, copy lines and code blocks

DescriptionAction / Access
To add or delete multiple cursors, use this action.
Alternatively, you can press Ctrl (for Windows or UNIX) / Alt (for macOS) twice, and then without releasing it, press the up or down arrow keys.
If you want to delete all added cursors, press Escape.
Shift+Alt and click the left mouse button at the location of the caret.
Configure settings options for the multiple cursors' location.Settings/Preferences | Editor | General (Virtual Space section)
Enable column selection mode to make a multiple selection of your code in columns. It might be helpful when you want to edit several lines of code simultaneously.
ws_column_selection_mode.png
By default, the mode is disabled.
Shift+Alt+Insert press the same shortcut to disable the mode.
Add a line after the current one. WebStorm moves the cursor to the next line. Shift+Enter
Add a line before the current one.Ctrl+Alt+Enter
Duplicate a line.Ctrl+D
Remove a line.Ctrl+Y
Move a line up or down.Shift+Alt+Up / Shift+Alt+Down
Move a code element to the left or to the right. Place the caret at the desired code element, or select the elements to be moved and press the appropriate shortcut. Ctrl+Shift+Alt+Left / Ctrl+Shift+Alt+Right
Join lines. Place the cursor on the line to which you want to join the other lines and press the shortcut. Keep pressing the shortcut until all the needed elements are joined. You can also join string literals, a field or variable declaration, and statement. Note that WebStorm checks the code style settings and eliminates unwanted spaces and redundant characters. Ctrl+Shift+J
Split string literals into two parts. WebStorm splits the sting and provides the correct syntax. You can also use the Break string on '\n' intention to split the string literals. Enter
Toggle between upper and lower case.
Note that when you apply the toggle case action to the CamelCase name format, WebStorm converts the name to lower case.
Ctrl+Shift+U
Comment or uncomment blocks of code. Select your code block and press the shortcut.
For a line of code, press Ctrl+/.
Ctrl+Shift+/
To move or copy code fragments in the editor with drag-and-drop actions, use the Enable Drag'n'Drop functionality in editor option that is enabled by default.
If you want to move the item, select the desired fragment of your code and drag the fragment to the target location.

If you want to copy your code selection, keep the Ctrl key pressed, drag the selection to the target location.

Settings/Preferences | Editor | General
(Mouse section)
Enable Drag'n'Drop functionality in editor

Move, remove statements

DescriptionAction / Access
Move statement up or down.
Note that if moving of statement is not allowed in the current context, the commands will be disabled. Also, note that WebStorm moves the selected statement performing a syntax check.
Ctrl+Shift+Up / Ctrl+Shift+Down
Unwrap or remove statement. Place the caret on the expression you want to extract or unwrap and press the shortcut.
ws_unwrap_statement.png
WebStorm shows a pop-up window with all the actions that are available in the current context. Statements to be extracted are displayed on the blue background, statements to be removed are displayed on the grey background.
You can select the desired action and press Enter.
Ctrl+Shift+Delete

Parameter hints

Parameter hints show the names of parameters in methods and functions to make your code easier to read. By default, parameter hints are enabled and shown only for values that are literals or function expressions but not for named objects.

To configure parameter hints:

  1. Press Ctrl+Alt+S to open Settings/Preferences dialog.
  2. From the options on the left select Editor | General | Appearance.
  3. Click Configure next to the Show parameter name hint checkbox (the checkbox is selected by default). In the dialog that opens, configure parameter settings and click OK.

Fold code elements

The folded code fragment is shown as shaded ellipses (foldedFragment). If the folded code fragment contains errors, WebStorm highlights the folded fragment in red.

DescriptionAction / Access
Fold code aka expand or collapse your code fragment. WebStorm folds / unfolds a current code fragment, for example, a single method.Ctrl+NumPad -/Ctrl+NumPad Plus
Collapse / expand all code fragments. In this case WebStorm collapses / expands all fragments within the selection, or, if nothing is selected, all fragments in the current file, for example, all methods in a file. Ctrl+NumPad - / Ctrl+NumPad Plus
Collapse / expand code recursively. In this case WebStorm collapses / expands the current fragment and all its the subordinate regions within that fragment. Ctrl+Alt+NumPad - / Ctrl+Alt+NumPad Plus
Fold blocks of code. Collapse the code fragment between the matched pair of curly braces {} and create a custom folding region for that fragment to make it "foldable". Ctrl+Shift+..
Collapse / expand doc comments in the current file.Code | Folding | Expand doc comments / Collapse doc comments
To collapse / expand a custom code selection. You can fold / unfold any selected region in your code. Ctrl+.
Expand the current fragment and all the nested fragments up to the specified level. Depending on a level (up to 5), change the number in the shortcut accordingly.Ctrl+NumPad *, 1
Expand all the collapsed fragments in the file up to the specified nesting level. Depending on a level (up to 5), change the number in the shortcut accordingly.Ctrl+Shift+NumPad *, 1
Collapse / expand code using Surround With action. Press Ctrl+Alt+. to navigate to your custom region.Ctrl+Alt+T and select <editor-fold...> or region...endregion
Disable the code folding outline that appears on the left gutter. Clear the Show code folding outline option.Settings / Preferences | Editor | General | Code Folding

Reformat and rearrange code

WebStorm lets you reformat your code according to the requirements you've specified in the Code Style settings.
To access the settings, select File | Settings/Preferences | Editor | Code Style. You can also rearrange code based on the arrangement rules specified on the Arrangement tab.

DescriptionAction / Access
Reformat code in the current file. In the editor, select a code fragment you want to reformat / rearrange and select these options respectively. Ctrl+Alt+L / Code | Rearrange Code
Invoke the Reformat File dialog for details.Ctrl+Shift+Alt+L
Reformat a module or directory. Right-click a module or a directory and from the context menu, select Reformat Code or press this shortcut. Ctrl+Alt+L
Exclude part of code from reformatting. In File | Settings/Preferences | Editor | Code Style select this option. Then in the editor, at the beginning of a region that you want to exclude, create a line comment (Ctrl+/) and type //@formatter:off, at the end of the region, again create a line comment and type //@formatter:on. Enable formatter markers in comments
Reformat line indents based on the specified settings. Use the Tabs and Indents tab located on the language page, in File | Settings/Preferences | Editor | Code Style. Ctrl+Alt+I

Use quick pop-ups

DescriptionAction / Access
View quick definition of a symbol (tag, class, method/function, field, etc.). WebStorm displays the information in a pop-up. If you need, click the pin icon to open the Find tool window with the item's definition and its usages. Ctrl+Shift+I
View quick documentation for a code element.
WebStorm displays a pop-up with the appropriate information. You can press Ctrl+Q twice to open the pop-up in the Documentation tool window. (Press same shortcut to switch back to the pop-up).
If you need to change the font size of the text displayed in the pop-up window, click the cogwheel blue no arrow icon and in the window that opens, change the font size according to your preferences.
You can also view an external documentation while in the quick documentation pop-up. Click arrowUp or press Shift+F1. If you invoke the quick documentation pop-up when you look for a class (Ctrl+N), you can look up the documentation on any class displayed in the list. To switch focus to the pop-up, press the same shortcut.
Ctrl+Q
View the context information (the action shows the current method or class declaration when it is not visible). Alt+Q
View a description of the error or warning at the caret. Ctrl+F1
View all usages for code element.Ctrl+Alt+F7
Enable/disable import pop-up messages.Select or clear Show notification after optimize imports action in Settings/Preferences | Editor | General (Formatting section)

Spellchecking

To make sure that all your source code, textual strings, comments, literals, and commit messages, are spelt correctly, you can use the Typo inspection. This inspection checks your code against the defined dictionaries and highlights typos, if any.

You can configure the spellchecker's custom dictionaries in the Custom Dictionaries section located on the Dictionaries tab of the Editor | Spelling page of the Settings/Preferences dialog.

  • To check the spelling of a highlighted word, press Alt+Enter to show the available intention actions and choose the appropriate one.
  • To configure pre-defined and custom dictionaries, press Ctrl+Alt+S, select Editor | Spelling and specify the appropriate options.
  • To configure the Typo inspection settings:
    1. Press Ctrl+Alt+S and select Editor | Inspections .
    2. In the list of inspection types, expand the Spelling node, click Typo and configure the spellchecking options.

Configure file encodings

  • You can choose file encoding on the status bar located at the bottom of the screen.
    WebStorm opens a dialog where you can decide what you want to do with your file. You can click either Reload or Convert.
    (If you choose Reload, you load the file in the editor from a disk and the encoding changes are applied to the editor only. If you choose Convert, the file on a disk is overwritten with the encoding of your choice.)
  • To configure settings for file encodings, press Ctrl+Alt+S, select Editor | File Encodings.

Editor settings

WebStorm lets you use settings for configuring different editor options to customize the editor.

DescriptionAction / Access
Access settings.Ctrl+Alt+S
Navigate inside the Settings dialog through a search field.Search field
Configure the settings for the code formatting, such as tabs and indents, spaces, wrapping and braces, hard and soft margins, etc. Use the Code Style page and the appropriate language. Editor | Code Style
Configure fonts, size, and font ligatures on the Font page.
Editor | Font
Change font size in the editor, on the General page.
Editor | General (mouse section)
Select Change font size (Zoom) with Ctrl+Mouse Wheel.

Then in the editor, press Ctrl, hold it and using the wheel on your mouse, adjust the font.

Configure color scheme settings for different languages and frameworks.
Open the Color Scheme node and select the one you need. You can also use the General option from the list to configure color schemes settings for general items such as code, editor, errors and warnings, popups and hints, search results, etc.
Editor | Color Scheme
To configure code completion options, use Code Completion page. You can configure case sensitive completion, configure how to sort your code, configure auto-display options, etc. Editor | General | Code Completion
Configure caret placement options, such as Allow placement of caret after end of line, through the General page. When you select this option, the caret on the next line is placed in the same position as the end of previous line. If this option is cleared the caret on the next line is placed at the end of the actual line. You can also select the Allow placement of caret inside tabs option which might be helpful when you move up or down inside the file and want the cursor to remain in the same position. Editor | General
Configure the behavior of trailing spaces on save. When you save your code either manually or automatically and want to preserve trailing spaces on the caret line regardless of what option is selected in the Strip trailing spaces on save list, select the Always keep trailing spaces on caret line option. Editor | General
Configure editor appearance options, for example, showing line numbers, or showing hard wrap guide through the Appearance page. Editor | General | Appearance
Manage the appearance of long code lines through the Soft Wraps section on the General page.Editor | General
Configure a certain behavior for different basic editor actions.
Use the Smart Keys page.
Editor | General | Smart keys
Last modified: 11 May 2018