WebStorm 2018.3 Help

Editor basics

While writing code in the WebStorm editor, you can perform many different tasks with shortcuts. You can switch between editor and tool windows, navigate inside the editor, edit, move, and fold code; manage editor tabs.

You can also configure editor settings to make the editor behave according to your needs.

Navigate between editor and other tool windows

Description

Action

Good to know

Switch schemes, keymaps, or view modes.

Ctrl+`

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 including the high contrast color scheme for people with eyesight deficiency in File | Settings/Preferences | Editor | Color Scheme and the keymap settings in File | Settings/Preference | Keymap.

Maximize editor pane.

Ctrl+Shift+F12

In this case WebStorm hides all other windows so only the editor you currently work in is open.

Switch the focus from other windows to an active editor.

Escape

Return to an editor from the command-line terminal.

Alt+F12However, 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.

Return to a default layout.

Shift+F12

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.

Jump to last active window you have used.

F12

Jump between open files and tool windows with a switcher.

Ctrl+Tab

Keep pressing Ctrl to keep the switcher pop-up open. Use Tab to move between elements. Use Backspace to remove the selected file from the list and close it in the editor.

Navigate inside the editor

Find a line or a column

Description

Action / Access

Good to know

By default, WebStorm shows line numbers in the editor.

Settings/Preferences | Editor | General | Appearance
the Show line numbers checkbox

If you do not want to see line numbers, clear the Show line numbers checkbox.

You can also assign a shortcut to the Show line numbers action.

Navigate to a specific line or/and a column in the editor.

Ctrl+G

In the Go to Line/Column dialog, specify the line or column number, or both, using: as separator and click OK.

Find your caret, edited line, or a file

Description

Action / Access

Good to know

Find the current caret location in the editor.

Ctrl+MThis action might be helpful if you have a large project and do not want to scroll through the file.

However, you can also use up and down arrows to achieve the same effect.

From the main menu select Edit | Find | Find Word at Caret if you want to highlight a word at the caret you are trying to locate.

See on what element the caret is currently positioned.

Alt+Q

Find a previous caret position.

Ctrl+Alt+LeftUse Ctrl+Alt+Right to move forward.

You can use Ctrl+Shift+M to toggle between starting and ending code block braces.

You can also navigate between code blocks using Ctrl+Shift+[ / Ctrl+Shift+] shortcuts.

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

You can scroll your code without the actual scrolling. The lens mode is available in the editor 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

You can navigate through the source code with breadcrumbs that show names of classes, variables, functions, methods, and tags in the currently opened file. 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

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

Description

Action / Access

Good to know

Close all opened tabs.

Window | Editor Tabs | Close All

Use the main menu for this action.

Close all inactive tabs.

Alt and click icons actions close on the active tab.

In this case only the active tab stays open.

Close only the active tab.

Ctrl+F4

You can click the mouse's wheel button anywhere on a tab to close it.

Reopen the closed tab.

Reopen Closed Tab

You can use any tab's context menu for this action. Right-click an opened tab and select the appropriate action.

Move / remove the artwork studio icons common close icon on a tab.

Settings/Preferences | Editor | General | Editor Tabs
Close button position field.

Use the main menu and the specified path to access the appropriate option.

Move between tabs.

Alt+Right / Alt+Left

Detach a tab.

Shift+F4You can drag the tab you need outside of the main window and drag the tab back to attach it.

You can also use Alt+mouse.

Switch between recently viewed tabs or files.

Ctrl+Tab

If you keep holding Ctrl, the Switcher window opens where you can select other files or tool windows to which you can switch.

Place editor tabs in a different part of the editor frame or remove the tabs.

Window | Editor Tabs | Editor Placement

Use the main menu for this action where you can select the specified path and the appropriate placement option.

Sort editor tabs.

Window | Editor Tabs | Sort Tabs by File Name

Use the main menu for accessing this option.

Split the editor window.

Split Vertically / Split Horizontally

Use the tab's context menu (right-click the desired editor tab) for this action. 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.

Assign shortcuts for open tabs.

Settings/Preferences | Keymap
Other directory

Press Ctrl+Alt+S to open the Settings/Preferences dialog. The limit of tabs to which you can assign shortcuts is 9.

Tabs limits

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

Change the default tab 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.

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

Description

Action

Good to know

Extend the selection of your code.

Ctrl+W

For plain texts, the selection starts within the whole word then extends to a sentence, paragraph, and so on.
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.

Shrink the code selection.

Ctrl+Shift+W

Find a matching occurrence in the file.

Make the initial selection of your code, press the same key again. Alt+J

Alternatively, to make a multiselection of your code, press Shift+Alt and double-click the left mouse button.

Find all the occurrences in the file.

Ctrl+Shift+Alt+J

Use F3 or Shift+F3 to move the caret to next or previous occurrences.

Find next/previous occurrence of the selected identifier.

Alt+Wheel down /
Alt+Wheel up

Copy / paste a reference

Ctrl+Shift+Alt+C / Ctrl+V

Place a caret on a line or symbol in question.

Paste from history.

Ctrl+Shift+V

When you use this action, the appropriate dialog 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.

Undo or redo your changes.

Ctrl+Z / Ctrl+Shift+Z

Highlight braces

Place the caret immediately after the block closing brace/bracket or before the block opening brace/bracket.

Add, move, remove, copy lines and code blocks

Description

Action / Access

Good to know

Add a line after the current one.

Shift+Enter

WebStorm moves the caret to the next line.

Add a line before the current one.

Ctrl+Alt+Enter

WebStorm moves the caret to the previous line.

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.

Ctrl+Shift+Alt+Left / Ctrl+Shift+Alt+Right

Place the caret at the desired code element, or select the elements to be moved and press the appropriate shortcut.

Complete current statement.

Ctrl+Shift+Enter

Inserts the required trailing comma automatically in structs, slices, and other composite literals. Moves the caret to the position where you can start typing the next statement.

Join lines.

Ctrl+Shift+J

Place the caret 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.

Split string literals into two parts.

Enter

WebStorm splits the string and provides the correct syntax. You can also use the Break string on '\n' intention to split the string literals.

Toggle between upper and lower case.

Ctrl+Shift+U

Note that when you apply the toggle case action to the CamelCase name format, WebStorm converts the name to lower case.

Comment or uncomment blocks of code. Select your code block and press the shortcut.

Ctrl+Shift+/

For a line of code, press Ctrl+/.

Move or copy code fragments in the editor with drag-and-drop actions that is enabled by default.

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

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.

Multiple carets

Description

Action / Access

Good to know

Add or delete multiple carets.

Shift+Alt and click the left mouse button at the location of the caret.

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 caret, press Escape.

Configure settings options for the multiple carets' location.

Settings/Preferences | Editor | General (Virtual Space section)

Enable column selection mode to make a multiple selection of your code in columns.

Shift+Alt+Insert press the same shortcut to disable the mode.

It might be helpful when you want to edit several lines of code simultaneously. Place caret at a symbol you need and either drag it up or down, or select a block of code and press the specified shortcut to achieve the same result.

ws_column_selection_mode.png

Note that by default, this mode is disabled.

Move, unwrap, and remove statements

You can move statement with the following shortcuts:

  • Up - Ctrl+Shift+Up

  • Down - Ctrl+Shift+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.

Unwrap or remove statement

  1. Place the caret on the expression you want to extract or unwrap.

  2. Press Ctrl+Shift+Delete.

    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.

  3. You can select the desired action and pressEnter.

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.

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.

Description

Action / Access

Good to know

Fold / unfold code (collapse or expand) your code fragment.

Ctrl+NumPad - / Ctrl+NumPad Plus

WebStorm folds / unfolds a current code fragment, for example, a single method.

Collapse / expand all code fragments.

Ctrl+Shift+NumPad - / Ctrl+Shift+NumPad Plus

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.

Collapse / expand code recursively.

Ctrl+Alt+NumPad - / Ctrl+Alt+NumPad Plus

In this case WebStorm collapses / expands the current fragment and all its subordinate regions within that fragment.

Fold blocks of code.

Ctrl+Shift+.

This action collapses the code fragment between the matched pair of curly braces {} and creates a custom folding region for that fragment and makes it "foldable".

Collapse / expand doc comments in the current file.

Code | Folding | Expand doc comments / Collapse doc comments

Collapse / expand a custom code selection.

Ctrl+.

You can fold / unfold any manually selected region in your code.

Expand the current fragment and all the nested fragments

Ctrl+NumPad *, 1You can expand the current fragment up to the specified nesting level (from 1 to 5).

Change the level number in the shortcut accordingly to see the needed results.

Expand all the collapsed fragments in the file

Ctrl+Shift+NumPad *, 1

You can expand the collapsed fragments up to the specified nesting level (from 1 to 5).

Change the level number in the shortcut accordingly to see the needed results.

Collapse / expand code using Surround With action.

Ctrl+Alt+T and select <editor-fold...> or region...endregion

You can press Ctrl+Alt+. to navigate to the created custom region.

Disable the code folding outline that appears on the left gutter.

Settings / Preferences | Editor | General | Code Folding

You need to clear the Show code folding outline option.

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.

Description

Action / Access

Good to know

Reformat code in the current file.

Ctrl+Alt+L / Code | Rearrange Code

In the editor, select a code fragment you want to reformat / rearrange and select these options respectively.

Invoke the Reformat File dialog for details.

Ctrl+Shift+Alt+L

Reformat a folder. Select a folder and press Ctrl+Alt+L.

Ctrl+Alt+L / Code | Reformat Code

Exclude part of code from reformatting.

File | Settings/Preferences | Editor | Code Style

The Formatter Control tab, the Enable formatter markers in comments option.

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.

Exclude a group of files from reformatting.

File | Settings/Preferences | Editor | Code Style

The Formatter Control tab, the Enable formatter markers in comments option.

On the Formatter Control tab, after you have selected the Enable formatter markers in comments, the scope area becomes active, click the Add icon to add a scope where you can specify files that you want to exclude from reformatting.

setting scopes

Reformat line indents based on the specified settings.

Ctrl+Alt+I

To specify settings, use the Tabs and Indents tab located on the language page, in File | Settings/Preferences | Editor | Code Style.

Use quick pop-ups

Description

Action / Access

Good to know

View quick definition of a symbol (tag, class, method/function, field, and so on.)

Ctrl+Shift+I

WebStorm displays the information in a pop-up. If you need, click the Pin button icon to open the Find tool window with the item's definition and its usages.

View quick documentation for a code element or a file.

Ctrl+Q

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 icons codeStyle Gear icon and in the window that opens, change the font size according to your preferences.
For code elements you can also view an external documentation while in the quick documentation pop-up. Click icons actions previousOccurence svg or pressShift+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.

View the context information

Alt+Q

The action shows the current method or class declaration when it is not visible.

View a description of the error or warning at the caret.

Ctrl+F1

Click on the code analysis marker to see the list of found errors. Use F2 or Shift+F2 to navigate to next or previous error.

Copy tooltip text to the clipboard.

Hold Alt (on Linux, hold Ctrl+Alt) and click the tooltip

View all usages for code element.

Ctrl+Alt+F7To control the usages highlighting, select or clear the Highlight usages on element at caret option, in Settings/Preferences | Editor | General (the Highlight on Caret Movement area).

If you turn on the Power Save mode (File | Power Save Mode), the usages are not highlighted.

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

You can configure editor settings to customize your editor's behavior.

Description

Action / Access

Good to know

Access settings.

Ctrl+Alt+S

You can also use the main menu and select File | Settings/Preferences.

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, ans so on.

Editor | Code Style

Use the Code Style page and the appropriate language.

Configure fonts, size, and font ligatures on the Font page.

Editor | Font

If you, for example, have previously saved Color Scheme Font settings, the main settings become overridden. The link with the appropriate notification will appear on the Font page.

Change font size in the editor, on the General page.

Editor | General (mouse section)
Select Change font size (Zoom) with Ctrl+Mouse Wheel.

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.

Editor | Color Scheme

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, and so on.

To configure code completion options, use Code Completion page.

Editor | General | Code Completion

You can configure case sensitive completion, configure how to sort your code, configure auto-display options, and so on.

Configure caret placement options, such as Allow placement of caret after end of line, through the General page.

Editor | GeneralWhen 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 caret to remain in the same position.

Configure the behavior of trailing spaces on save.

Editor | General

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.

Configure editor appearance options on the Appearance page.

Editor | General | Appearance

For example, you can configure showing the line numbers, or showing hard wrap guide.

Manage the appearance of long code lines through the Soft Wraps section

Editor | General

Configure a certain behavior for different basic editor actions.

Editor | General | Smart keys
Last modified: 6 December 2018