WebStorm Help

Using Suggestion List

Any code completion or live template operation ends up with a suggestion list, from which you have to select the desired option. WebStorm provides handy ways to make your selection, complete the source code, sort entries, and view reference information without leaving the suggestion list.

In this section:

Navigating through the suggestion lists

To navigate through the suggestion lists, use the mouse cursor or the Up and Down arrow keys.

Narrowing and widening the suggestion list

  • Use the horizontal arrow keys in the completed expression to make the suggestion list wider (left arrow) or closer (right arrow):
    lookupListHorizArrows

Completing selection

  • Use Enter to insert the selected string at the insertion point.
  • Use Tab to replace the string next to the caret with the selected one.
  • Use Ctrl+Shift+Enter to make the current code construct syntactically correct (balance parentheses, add missing braces and semicolons, etc.)
  • It is possible to enter the desired element name manually when the input position is highlighted and the list of suggestions is opened. As you type, the suggestion list shrinks so that only matching element names remain:
    wi_suggestion_list_shrinks.png

    If you enter a name not used in scope, WebStorm informs you with a pop-up window, as shown in the figure below:

    wi_suggestion_list_no_suggestion..png
  • It is possible to type any part of a word, even the characters located somewhere in the middle:
    wi_suggestion_list_wildcards.png

    That's why asterisk character doesn't get any special processing as a wildcard.

Please note the following:

  • If, invoking an action, you don’t get what you want immediately, invoke this action again by pressing the same shortcut.
  • Most suitable variants in the suggestion list are displayed on top of the list.
  • Entries in bold font on top of the list denote symbols defined in the current class. All the other symbols are shown below.

Viewing reference information in the suggestion lists

  • Use the Quick Definition View. If you select an entry in a list and press Ctrl+Shift+I, WebStorm displays the following quick information pop-up window:
    web_ide_suggestion_list.png
  • Quick Information View works in a suggestion list. If you select an entry in a list, and press Ctrl+Q, WebStorm displays the following quick information pop-up window:
    web_ide_suggestion_list_documentation_lookup.png

Sorting entries in a suggestion list

To sort entries in a suggestion list:

  • Click a_icon or pi_icon in the lower-right corner of the list to toggle between sorting in alphabetical order, or by relevance.

Please note the following:

  • The sorting icon appears in the list if it is long enough. For few entries only sorting icon is not displayed.
  • Use mouse only to click this icon.
  • WebStorm memorizes the type of sorting.
  • Default behavior is defined in the Code Completion page of the Editor settings.

Viewing hierarchy in a completion pop-up

To view hierarchy in a completion pop-up, follow these steps:

  1. Start typing the source code, and press Ctrl+Shift+Space orCtrl+Space. The suggestion list appears.
  2. While in the suggestion list, pressCtrl+H. The Hierarchy tool window shows the type hierarchy of the class, selected in the suggestion list.

Closing a suggestion list

Close suggestion lists with Escape, then enter your own code at the code completion position.

See Also

Last modified: 22 May 2015