WebStorm 2017.3 Help

Auto-Completing Code and Paths

This section covers various techniques of context-aware code completion that allow you to speed up the coding process.

Basic code completion. Completing names and keywords

Basic code completion helps you complete names of classes, methods, and keywords within the visibility scope. When you invoke code completion, WebStorm analyses the context and suggests the choices that are reachable from the current caret position.

Code completion covers supported and custom file types. However, WebStorm does not recognize the structure of custom file types and suggests completion options regardless of whether a specific type is appropriate in the current context.

If basic code completion is applied to part of a parameter, or a variable declaration, WebStorm suggests a list of possible names depending on the item type.

To use basic code completion

  1. Start typing a name.
  2. Press Ctrl+Space or choose Code | Completion | Basic from the main menu.

    The image below shows a suggestion list containing a variable name:


    The image below shows a suggestion list containing keywords:

  3. If necessary, press Ctrl+Space for the second time (this action produces the same effect as pressing Ctrl+Alt+Space).

To configure automatic code completion

You can configure WebStorm to automatically invoke the suggestions list, without having to call basic completion explicitly.

  1. From the main menu select File | Settings (or press Ctrl+Alt+S).
  2. On the left choose Editor | General | Code Completion, and select the Autopopup code completion option.
  3. You can also select the Insert selected variant by typing dot, space, ect. option to use some keys to accept completion. These keys depend on the language, your context, etc.

    Note that while this setting helps you save time, turning it on may result in items being inserted accidentally.

Smart code completion. Completing code based on type information

Smart code completion filters the suggestions list and shows only the types applicable to the current context.

To use smart code completion:

  1. Start typing. Press Ctrl+Shift+Space or choose Code | Completion | SmartType from the main menu.

    SmartType code completion automatically highlights the selection in the suggestions list that is most suitable for the current context.

  2. If necessary, press Ctrl+Shift+Space once again.

Completing statements

Complete statements enables you to create syntactically correct code constructs. This command inserts necessary syntax elements (parentheses, braces, semicolons etc.) and gets you in position where you can start typing the next statement.

To automatically complete a statement, start typing it. The punctuation required in the current context is added and the caret moves to the next editing position.

  • Completing code constructs: start typing a code construct and press Ctrl+Shift+Enter:
    web ide completing code construct 1

    WebStorm automatically completes the construct, and the caret is placed at the next editing position:


  • : WebStorm automatically encapsulates a method call when you directly type a new method call next to it.

    For example, type

    and then type the method call. When println gets the focus in the suggestion list, select it with Ctrl+Shift+Enter:
    The resulting code will look like the following:

Completing tag names

WebStorm automatically completes tags and attributes names and values in the following file types:


Automatic tag name completion is based on the DTD or Schema the file is associated with.

If there is no schema association, WebStorm will use the file content (tag and attribute names and their values) to complete your input.

In XML/XSL files, completion for taglibs and namespaces is available.

Completing tag names

  1. Press < and start typing the tag name. WebStorm displays the list of tag names appropriate in the current context. Use the ArrowUp and ArrowDown buttons to scroll through the list.
  2. Press Enter to accept a selection from the list.

    WebStorm automatically inserts the mandatory attributes according to the schema.

Inserting a taglib declaration

  1. Start typing a tag and press Ctrl+Alt+Space.
  2. Select a tag from the list. The uri of the taglib it belongs to is displayed in brackets.
  3. Select the desired taglib and press Enter. WebStorm adds the declaration of the selected taglib:

Importing a taglib declaration

  1. Start typing a taglib prefix and press Alt+Insert.
  2. Select a taglib from the list and press Enter.

    WebStorm imports the selected taglib and adds the import statement automatically.

Hippie completion. Expanding words based on context

Hippie completion is a completion engine that analyses your text in the visible scope and draws its completion proposals from the current context. It helps you complete a word with a keyword, class name, method or variable.

To expand a string at caret to an existing word, do the following:

  1. Type the initial string and do one of the following:
    • Press Alt+/ or choose Code | Completion | Cyclic Expand Word to search for matching words before the caret
    • Press Shift+Alt+/ or choose 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. Press Enter to accept the suggestion, or hold the Alt key and keep pressing Slash until the desired word is found.

Postfix code completion

Postfix code completion helps you reduce backward caret jumps as you write code. It allows you to transform an already typed expression to a different one based on a postfix you type after a dot, the type of expression, and its context.

For example, the .if postfix applied to an expression wraps it with an if statement.

function m(arg) { arg.if }
function m(arg) { if (arg) { } }

To enable/disable the postfix completion feature or separate templates, in the Settings / Preferences Dialog dialog, go to Editor | General | Postifx completion. You can also choose which key you want to use to expand postfix templates: Tab, Space, or Enter.

Postfix completion suggestions are shown as part of the basic completion suggestions list. To see a full list of postfix completions applicable in the current context, press Ctrl+J.

Completion tips and tricks

Narrow down the suggestions list

You can narrow down the suggestions list by typing any part of a word (even characters from somewhere in the middle), or invoking code completion after a dot separator. WebStorm will show suggestions that include the characters you've entered in any positions.

This makes the use of wildcards unnecessary:


In case of CamelCase or snake_case names, type the initial letters only. WebStorm automatically recognizes and matches the initial letters.

Accept a suggestion

You can accept a suggestion from the list in one of the following ways:

  • Press Enter or double-click the desired choice to insert completion to the left from 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, etc.)

View reference information

  • You can use the Quick Definition View by pressing Ctrl+Shift+I when you select an entry in the suggestions list:
  • You can use the Quick Information View by pressing Ctrl+Q when you select an entry in the suggestions list:
    web ide suggestion list documentation lookup

Sort entries in the suggestions list

You can sort the suggestions list alphabetically or by relevance. To toggle between these modes, click a icon or pi icon respectively in the lower-right corner of the list.

WebStorm will remember your choice. You can change the default behavior in the Code Completion settings page.

View code hierarchy

You can view code hierarchy when you've selected an entry from the suggestions list:

  • Press Ctrl+H to view type hierarchy.
  • Press Ctrl+Alt+H to view call hierarchy.
  • Press Ctrl+Shift+H to view method hierarchy.

Completing a path

This type of completion aims at speeding up selection of files and folders. The dialog used for that purpose is called rather often, for example, when you specify the installation folder of an external tool or a Version Control engine or configure a Node.js interpreter.

  1. Open the Select Path dialog by choosing Open File on the File menu or by clicking the Browse button browseButton 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 pop-up 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.
Last modified: 26 March 2018

See Also


Getting Started: