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:
- Start typing a name.
- 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:
- If necessary, press Ctrl+Space for the second time (this action produces the same effect as pressing Ctrl+Alt+Space).
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:
- 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.
- If necessary, press Ctrl+Shift+Space once again.
The Smart Enter completion enables you to create syntactically correct code constructs.
To automatically complete a statement, start typing it and press N/A. 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 N/A:
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, typeand then type the method call. When
printlngets the focus in the suggestion list, select it with N/A: 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
- 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.
- Press Enter to accept a selection from the list.
WebStorm automatically inserts the mandatory attributes according to the schema.
Inserting a taglib declaration
- Start typing a tag and press Ctrl+Alt+Space.
- Select a tag from the list. The
uriof the taglib it belongs to is displayed in brackets.
- Select the desired taglib and press Enter. WebStorm adds the declaration of the selected taglib:
Importing a taglib declaration
- Start typing a taglib prefix and press Alt+Insert.
- 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:
- Type the initial string and do one of the following:
- Press Alt+Slash or choose Code | Completion | Cyclic Expand Word to search for matching words before the caret
- Press Shift+Alt+Slash or choose Code | Completion | Cyclic Expand Word (Backward) to search for matching words after the caret and in other open files.
- 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
| || |
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 N/A to make the current code construct syntactically correct (balance parentheses, add missing braces and semicolons, etc.)
View reference information
Sort entries in the suggestions list
You can sort the suggestions list alphabetically or by relevance. To toggle between these modes, click or 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 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.
- Open the Select Path dialog by choosing on the menu or by clicking the Browse button 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 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.
- Select the relevant suggestion from the list.