Creating Imports

Introduction

When you reference a class that has not been imported yet, WebStorm suggests to add the corresponding import statement or even adds it automatically on the fly, when you complete your code.

The import statement is added to the imports section, but the cursor does not move from the current position, and your current editing session does not suspend. This feature is known as the Import Assistant.

The same possibility applies to the XML files. When you type a tag with an unbound namespace, import assistant suggests to create a namespace and offers a list of appropriate choices.

Importing TypeScript symbols

In the TypeScript context, WebStorm can generate import statements for modules, classes, and any other symbol that can be exported and called as a type. Open the desired file in the editor and do one of the following:

• Start typing the short name of a symbol. From the suggested variants for completion, select the relevant symbol name:

  

• Position the cursor at the unresolved symbol, which is displayed in red, and press Alt+Enter:

  

  On the context menu, select Add import statement and press Enter.
• Configure WebStorm to show a pop-up every time you hover the mouse pointer over an unresolved reference which required import:
  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for macOS. Expand the Editor node, and then click Auto Import under General.
  2. On the Auto Import page that opens, select the Show import pop-up check box in the TypeScript area.

  Every time you hover the mouse pointer over an unresolved symbol, WebStorm will display the following pop-up message:

  

  Press Alt+Enter to have an import statement generated and inserted automatically.

In either case, WebStorm inserts an import statement:

You can configure the quotes style for generated import statements on the Code Style. TypeScript page, tab Punctuation (File | Settings | Editor | Code style | TypeScript | Punctuation for Windows and Linux or WebStorm | Preferences | Editor | Code style | TypeScript | Punctuation for macOS).

Importing an XML namespace

To import an XML namespace, follow these steps:

1. Open the desired file for editing, and start typing a tag. If a namespace is not bound, the following prompt appears:

   

2. Press Alt+Enter. If there are multiple choices, select the desired namespace from the list.

   

   WebStorm creates a namespace declaration.