Code completion

Invoke basic completion

1. Start typing a name. By default, WebStorm displays the code completion popup automatically as you type.

   

   If automatic completion is disabled, press Ctrl+Space or choose Code | Code Completion | Basic from the main menu.

2. To get more suggestions, press Ctrl+Space for the second time (or press Ctrl+Alt+Space).

3. To narrow down the suggestions 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.

Accept a suggestion from the list

• Press Enter or double-click the relevant list item to insert it to the left of the caret.

• Press Tab to replace the characters to the right from the caret.

• Use Ctrl+Shift+Enter to make the current code construct syntactically correct (balance parentheses, add missing braces and semicolons, and so on).

• Use specific language and context-dependent keys to insert the selected completion suggestion, see Configuring completion settings for details.

View reference for the selected suggestion

• For quick documentation look-up, select an item in the suggestion list and press Ctrl+Q. 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 Ctrl+Q sequentially.

• To view the definition of the selected suggestion, press Ctrl+Shift+I.

  

View code hierarchy

Select an entry in the suggestions list and press one of the following shortcuts:

• Ctrl+H to view type hierarchy

• Ctrl+Alt+H to view view call hierarchy.

• Ctrl+Shift+H to view method hierarchy.

See Building hierarchies for details.

Complete method declarations

• Start typing a method or function declaration and press Ctrl+Shift+Enter. WebStorm creates an entire construct of a method and places the cursor inside the method body.

  

  Gif

• Alternatively press Ctrl+Shift+Enter later, after the opening parenthesis.

Complete code constructs

• Start typing a code construct, for example, type if, and press Ctrl+Shift+Enter. WebStorm automatically adds the required punctuation and places the cursor at the next edit point.

  

  Gif

Expand a string at caret to an existing word

1. Type the initial string and do one of the following:

   • Press Alt+/ or choose Code | Code Completion | Cyclic Expand Word to search for matching words before the caret.

   • Press Alt+Shift+/ or choose Code | Code Completion | Cyclic Expand Word (Backward) to search for matching words after the caret and in other open files.

   The first suggested value appears, and the prototype is highlighted in the source code.

2. Accept the suggestion, or hold the Alt key and keep pressing / until the desired word is found.

Gif

Enable and configure postfix completion

• Go to Settings / Preferences | Editor | General | Postfix Completion and select the Enable postfix completion checkbox.

• Select Tab, Space, or Enter to be used for expanding postfix templates.

• Enable/disable a particular postfix template for the selected language.

Learn more from Activating postfix completion.

Turn off generation of method bodies for overrides

1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Languages & Frameworks | JavaScript.

2. On the JavaScript page that opens, clear the Expand method bodies in completion for overrides checkbox.

1. Press < and start typing the tag name. WebStorm displays the list of tag names appropriate in the current context.

   Use the Up and Down buttons to scroll through the list.

2. 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.

Gif

Enable ML completion

1. Press Ctrl+Alt+S to open the IDE settings and select Editor | General | Code Completion.

2. 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 ML completion.

   

Enable relevance markers

1. Press Ctrl+Alt+S to open the IDE settings and select Editor | General | Code Completion.

2. 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.

   

Display the suggestions list automatically as you type

1. Press Ctrl+Alt+S to open the IDE settings and select Editor | General | Code Completion.

2. Select the Show suggestions as you type checkbox. If the checkbox is cleared, you have to call code completion explicitly by pressing Ctrl+Space for basic completion or Ctrl+Shift+Space for type-matching completion.

   You can also choose to automatically insert suggestions when there's just one option: select the completion type under Automatically insert single suggestions for.

tip

By default, the Show suggestions as you type checkbox is selected.

Show suggestions in the alphabetic order

• Press Ctrl+Alt+S to open the IDE settings and select Editor | General | Code Completion.

• 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 suggestions list to toggle these modes. Note that these icons appear are not displayed for lists containing just a few entries.

Include suggestions in the list with respect to case

• Select the Match case checkbox and choose whether you want to match case for first letters only, or for all letters.

Turn on automatic documentation look-up

1. Press Ctrl+Alt+S to open the IDE settings and select Editor | General | Code Completion.

2. Select the Show the documentation popup checkbox.

   Learn more from Basic completion: documentation look-up.

Insert parentheses automatically

1. Press Ctrl+Alt+S to open the IDE settings and select Editor | General | Code Completion.

2. 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.

   

   Gif

   Clear the checkbox to suppress inserting parentheses automatically.

3. 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.

   

   Gif

   To 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. See Use specific keys to insert suggestions for details.

Use specific keys to insert suggestions

1. Press Ctrl+Alt+S to open the IDE settings and select Editor | General | Code Completion.

2. Select the Insert selected suggestion by pressing space, dot, or other context-dependent keys checkbox. These keys depend on the language and the context where completion is invoked.

note

• When this checkbox is selected, parentheses are always inserted automatically no matter whether the Insert parentheses automatically when applicable option in Settings/Preferences | Editor | General | Code Completion is selected or not.

• While this setting helps you save time, turning it on may result in inserting items by accidence.

Sort suggestions based on Machine Learning

1. Press Ctrl+Alt+S to open the IDE settings and select Editor | General | Code Completion.

2. 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.

3. 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 markers shown

   ML markers hidden

   

   

1. Open the Select Path dialog by choosing Open File on the File menu or by clicking Browse next to the field where a path is required.

2. Make sure that the Path field is visible. If the field is hidden, click the Show path link.

3. 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 Ctrl+Space to show the suggestion list.

4. Select the relevant suggestion from the list.

Gif