Auto-Completing Code and Paths
Code completion is one of the essential features of the WebStorm editor. To show you completion suggestions, WebStorm goes through the project files with the source code and adds classes, methods, functions, and variables defined in them to a special internal index. Additional information from JSDoc comments, TypeScript type definitions, etc. can also significantly improve completion.
This section covers various techniques of context-aware code completion that allow you to speed up your coding process.
Basic completion: names and keywords
Basic code completion helps you complete the names of classes, methods, fields, 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 a part of a parameter or variable declaration, WebStorm suggests a list of possible names depending on the item type.
Invoke basic completion
- Start typing a name. By default, WebStorm displays the code completion popup automatically as you type. Alternatively, press Ctrl+Space or choose Code | Completion | Basic from the main menu.
- To get more suggestions, press Ctrl+Space for the second time (or press Ctrl+Alt+Space).
- 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.
Accept a suggestion from the list in one of the following ways
- 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, etc.)
- 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 pop-up. To view the documentation in a tool window with more controls, pin the Documentation pop-up window. To switch between the Documentation pop-up window 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.
Statements completion Ctrl+Shift+Enter 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.
- To complete a method declaration, start typing
functionand press Ctrl+Shift+Enter. WebStorm creates an entire construct of a method and places the cursor inside the method body.
- To complete a code construct, start typing it, for example, type
if, and press Ctrl+Shift+Enter. WebStorm automatically adds the required punctuation and places the cursor at the next edit point.
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
- 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.
- Accept the suggestion, or hold the Alt key and keep pressing / 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 the dot, the type of expression, and its context.
Completion of tags, attributes, and properties
WebStorm automatically completes the names and values of tags and attributes in many file types:
- HTML/XHTML, including completion for CSS classes and for HTML tags inside JSX.
- XML/XSL, including completion for namespaces.
- JSON, see Editing package.json for details.
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.
- 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. If your file is associated with a schema or a DTD, WebStorm automatically inserts the mandatory attributes according to it.
Configuring code completion settings
You can customize the default completion behavior by updating its settings on the Code Completion page. To open the page, in the Settings/Preferences dialog (Ctrl+Alt+S), click General under Editor, and then click Code Completion.
To display the suggestions list automatically as you type
- 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 smart 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.
To show suggestions in the alphabetic order
- 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.
To 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.
To turn on automatic documentation look-up
- Select the Show the documentation popup checkbox. Learn more from Basic completion: documentation look-up.
To use specific keys to insert suggestions
- 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.
Completing a path
This type of completion speeds 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 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 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.
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.
- Your file doesn't reside in a content root, so it doesn't get the required class definitions and resources needed for code completion.
- The file with the symbols to be used in code completion is marked as a plain text file.