WebStorm 2018.1 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 completion: names and keywords

Basic code completion helps you complete the 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 (suggestions also include Live templates).

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.

Invoke basic 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:

    web_ide_completing_names.png

    The image below shows a suggestion list containing keywords:

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

Statements completion

Statements completion enables you to create syntactically correct code constructs. It inserts the necessary syntax elements (parentheses, braces, semicolons etc.) and gets you in a position where you can start typing the next statement.

Complete a code construct

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

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

    web_ide_completing_code_construct_2.png

Hippie completion: expanding words based on context

Hippie completion is a completion engine that analyses your text in the visible scope and generates suggestions from the current context. It helps you complete any word from any of the currently opened files.

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 | 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.
    wi_hippie_completion_js.png

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 the dot, the type of expression, and its context.

Transform a statement with a postfix

  • Type an expression and then type a postfix after a dot, for example .if:
    function m(arg) { arg.if }

    The initial expression gets wrapped with an if statement:

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

To disable certain postfix completion templates, in the Settings/Preferences dialog (Ctrl+Alt+S) select Editor | General | Postfix Completion. You can also choose which key you want to use to expand postfix templates: Tab, Space, or Enter.

You can edit the predefined postfix templates, for example to replace a long key with a shorter one, or to expand the list of expression types it's applicable to.

Completion of tags and attributes

WebStorm automatically completes tags and attributes names and values in many file types, including:

  • HTML/XHTML
  • XML/XSL
  • JSON

Completion of tags and attribute names 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.

Complete tag names

  1. Press < and start typing the tag name. WebStorm displays the list of tag names appropriate in the current context:
    tags completion
  2. Use the ArrowUp and ArrowDown buttons to scroll through the list.
  3. 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.

Import a taglib declaration

If you need to use tags declared in a tag library, you need to import this taglib before any custom tag from it can be used.

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

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

Insert a tag declared in a taglib

  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.
    tagCompletionBefore
  3. Select the desired taglib and press Enter. WebStorm adds the declaration of the selected taglib:
    tagCompletionAfter

Configure code completion settings

Configure completion options

  1. In the Settings/Preferences dialog (Ctrl+Alt+S) select Editor | General | Code Completion.
  2. Do the following:
    • To automatically display the suggestions list without having to call code completion explicitly by pressing Ctrl+Space for basic completion or Ctrl+Shift+Space for smart completion, select the Auto-display code completion checkbox.

      You can also choose to automatically insert suggestions when there's just one option: select the completion type under Auto-insert when only one choice on.

    • To sort suggestions in the alphabetical order, instead of sorting them by relevance, select the Sort lookup items lexicographically checkbox.

      You can also toggle these modes by clicking a icon or pi icon respectively in the lower-right corner of the list.

    • If you want case to be taken into account when suggesting completion options, select one of the options next to Case sensitive completion.
    • If you want the documentation popup up to be displayed automatically, select the Auto-display documentation option. Note that this is only valid if automatic completion is disabled and you invoke it explicitly.

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 Browse 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:
    ws_complete_path.png
    As you type, the suggestion list shrinks to show the matching paths only:
    ps_complete_path_2.png
    You can also press Ctrl+Space to show the suggestion list.
  4. Select the relevant suggestion from the list.

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:

wi_suggestion_list_wildcards.png

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 a 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, etc.)

You can also use specific keys to insert the selected completion suggestion: in the Settings/Preferences dialog (Ctrl+Alt+S) choose Editor | General | Code Completion and select the Insert selected variant by dyping dot, space, etc. option. These keys depend on the language, your context, 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:
    web_ide_suggestion_list.png
  • 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

View code hierarchy

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

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

Troubleshooting

If code completion doesn't work, this may be due to one of the following reasons:

  • The Power Save Mode is on (File | Power Save Mode). Turning it on minimizes power consumption of your laptop by eliminating the background operations, including error highlighting, on-the-fly inspections, and code completion.
  • An SDK is not configured for your project.
  • Your file doesn't reside in a content root and is not bound to a build path, so it doesn't get the required class definitions and resources needed for code completion.
  • A file containing classes and functions that you want to appear in completion suggestions list is marked as a plain text file.
  • External libraries that contain functions that you want to appear in completion suggestions list are not added as dependencies or global libraries.
Last modified: 11 May 2018

See Also

Reference:

Getting Started: