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, you will learn:
- To navigate though the suggestion list and completed expression
- To complete selection
- To view reference information in the suggestion list
- To sort entries in the suggestion list
- To view hierarchy in the completion pop-up
- To close the suggestion list
- Use the mouse cursor or the UpUpUpUpUp or Ctrl+PUpUpUpUp or Control PUpUp or Control P and DownDownDownDownDown or Ctrl+NDownDownDownDown or Control NDownDown or Control N arrow keys to navigate through the suggestion list.
Use the horizontal arrow keys in the completed expression to make the suggestion list wider (left arrow) or closer (right arrow):
- Use EnterEnterEnterEnterEnterEnterEnterEnterEnterEnterEnter to insert the selected string at the insertion point.
- Use TabTabTabTabTabTabTabTabTabTabTab to replace the string next to the caret with the selected one.
- Use Ctrl+Shift+EnterCtrl+Shift+EnterCtrl+Shift+EnterCtrl+Shift+EnterCtrl+Shift+EnterCtrl+Shift+EnterCtrl+Shift+EnterCtrl+Shift+EnterShift Command EnterShift Command EnterShift Command 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 open. As you type, the suggestion list shrinks so that only matching
element names remain:
If you enter a name that is not used in the scope, WebStorm will inform you with a pop-up window as shown in the figure below:
It is possible to type any part of a word,
even the characters located somewhere in the middle of the word:
That's why asterisk character doesn't get any special processing as a wildcard.
- 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 the green background 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.
Quick Definition View. If you select an entry in a list and press
Ctrl+Shift+ICtrl+Shift+ICtrl+Shift+ICtrl+Shift+ICtrl+Shift+ICtrl+Shift+ICtrl+Shift+ICtrl+Shift+IAlt Space or Command YShift Command IAlt Space or Command Y, WebStorm displays the following quick information pop-up window:
Click thumbnail to view larger image.
Quick Information View
works in a suggestion list. If you select an entry in a list, and press
Ctrl+Q or Alt+Button2 ClickCtrl+Q or Alt+Button2 ClickCtrl+Q or Alt+Button2 ClickCtrl+Q or Alt+Button2 ClickCtrl+Q or Alt+Button2 ClickCtrl+QCtrl+Q or Alt+Button2 ClickAlt+Button2 Click, Ctrl+Shift+Space or F2F1, Control J or Control Button2 ClickControl J or Control Button2 ClickAlt Button2 Click or F2, WebStorm displays the following quick information pop-up window:
Click thumbnail to view larger image.
- Click or in the lower-right corner of the list to toggle between sorting in alphabetical order, or by relevance.
- 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.
- Start typing the source code, and press Ctrl+Shift+SpaceCtrl+Shift+SpaceCtrl+Shift+SpaceCtrl+Shift+SpaceCtrl+Shift+Space or Ctrl+Alt+SlashShift+Alt+SpaceCtrl+Shift+Space or Ctrl+Shift+Back SlashShift+Alt+SpaceControl Shift SpaceControl Shift SpaceShift Alt Space orCtrl+SpaceCtrl+SpaceCtrl+SpaceCtrl+SpaceAlt+SlashCtrl+SpaceCtrl+Space or Ctrl+Back SlashCtrl+SpaceControl SpaceControl SpaceControl Space. The suggestion list appears.
- While in the suggestion list, pressCtrl+HCtrl+HCtrl+HCtrl+HCtrl+HAlt+HShift+Alt+F12F4Control HControl HF4. The Hierarchy tool window shows the type hierarchy of the class, selected in the suggestion list.
- Close the suggestion list with EscapeEscapeEscapeEscapeEscape, Escape or Ctrl+GEscapeEscapeEscapeEscapeEscapeEscape, then enter your own code at the code completion position.