Code completion
By default, WebStorm displays the code completion popup automatically as you type.
Alternatively, you can press CtrlSpace or select from the main menu.
To narrow down the suggestion list, type any part of the expected name or keyword (even characters from somewhere in the middle are accepted) or invoke code completion after a dot separator. WebStorm shows the suggestions that include the typed characters in any positions.
tip
For CamelCase or snake_case names, WebStorm automatically recognizes and matches the initial letters only.
For the quick documentation look-up, select an item in the suggestion list and press Ctrl0Q. WebStorm shows you quick documentation for it in the Documentation popup.
tip
Alternatively, enable automatic documentation look-up as described in Configuring completion settings.
To view the documentation in a tool window with more controls, pin the Documentation popup. To switch between the Documentation popup and the Documentation tool window, press Ctrl0Q sequentially.
To view the definition of the selected suggestion, press CtrlShift0I.
Go to the Editor | General | Code Completion settings page CtrlAlt0S.
In the JavaScript section, select the Suggest variable and parameter names and Suggest names for class fields checkvboxes.
If applicable, enable showing type annotations for suggested parameter names.
Start typing a method or function declaration and press CtrlShiftEnter. WebStorm creates an entire construct of a method and places the caret inside the method body.
GifAlternatively, press CtrlShiftEnter later, after the opening parenthesis.
Start typing a code construct, for example, type
if, and press CtrlShiftEnter. WebStorm automatically adds the required punctuation and places the caret at the next edit point.
Gif
note
Generation of method bodies for overrides is available in JavaScript and in TypeScript.
Type the opening
<and then start typing the tag name. WebStorm displays the list of tag names appropriate in the current context.Use the 0↑ and 0↓ keys to scroll through the list.
Press Enter to accept a selection from the list. If your file is associated with a schema or a DTD, WebStorm automatically inserts the mandatory attributes according to it.
Press CtrlAlt0S to open settings and select Editor | General | Code Completion.
Under Machine Learning-Assisted Completion, enable the Sort completion suggestions based on machine learning option and select the languages for which you want to use the ML completion.
Press CtrlAlt0S to open settings and select Editor | General | Code Completion.
Enable the following options:
Mark position changes in the completion popup: use the
and 
icons to indicate whether the relevance of a suggestion is increasing or decreasing and therefore the suggestion has moved up or down the suggestion list.Mark the most relevant item in the completion popup: use the
icon to indicate the most suitable suggestion on the list.
ML-assisted relevance markers shownML-assisted relevance markers hidden
To access code completion settings right from the completion popup, click the 
icon and select Code Completion Settings.
Press CtrlAlt0S to open settings and then select .
Select the Sort suggestions alphabetically checkbox. By default, the checkbox is cleared and suggestions are sorted by their relevance.
Alternatively use
or 
in the lower-right corner of the suggestion list to toggle these modes. Note that these icons appear are not displayed for lists containing just a few entries.
Press CtrlAlt0S to open settings and then select .
Select the Insert parentheses automatically when applicable checkbox.
By default, this option is turned on and WebStorm automatically inserts a pair of opening and closing parentheses when you complete a function/method.
Insert parentheses on completion enabledInsert parentheses on completion disabled
GifClear the checkbox to suppress inserting parentheses automatically.
If you use an opening parentheses
(instead of Enter to apply the selected item from a completion list, parentheses will be inserted automatically no matter whether the option is turned on or off.
GifTo use an opening parentheses
(instead of Enter to apply the selected item from a completion list, select the Insert selected suggestion by pressing space, dot, or other context-dependent keys checkbox. For more information, refer to Use specific keys to insert suggestions.
To turn this annoying behavior off, open the Settings dialog (CtrlAlt0S) , go to , and clear the Enable the auto-popup of tag name code completion when typing in HTML text checkbox.
Gif
Press CtrlAlt0S to open settings and then select .
By default, completion suggestions in JavaScript and TypeScript files are sorted by their relevance based on machine-learning algorithms.
To turn off ML-based sorting, clear the Sort completion suggestions based on machine learning checkbox.
To turn off ML-based sorting in JavaScript or in TypeScript only, clear the corresponding checkbox.
WebStorm can rank suggestions by their relevance and show special markers to indicate this rank.
The most relevant suggestion is marked with an asterisk
. To show this indicator, select the Mark the most relevant item in the completion popup checkbox.The
and arrow icons indicate whether the relevance of a suggestion is increasing or decreasing and therefore the suggestion has moved up or down the list.To show these indicators, select the Mark position changes in the completion popup checkbox.
ML-assisted relevance markers shownML-assisted relevance markers hidden
note
Completion for paths to files and folders is not available on macOS.
Open the Select Path dialog by choosing on the menu or by clicking Browse
next to the field where a path is required.Make sure that the Path field is visible. If the field is hidden, click the Show path link.
Start typing a path. WebStorm suggests a list where you can quickly find the needed directory.
As you type, the suggestion list shrinks to show the matching paths only.
You can also press CtrlSpace to show the suggestion list.
Select the relevant suggestion from the list.