WebStorm 2017.1 Help

Creating Imports

On this page:

Introduction

When you reference a class that has not been imported yest, WebStorm suggests you to add the corresponding statement or even add the staement 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:
    /help/img/idea/2017.1/ws_import_on_the_fly_1.png
  • Position the cursor at the unresolved symbol, which is displayed in red, and press Alt+Enter:
    /help/img/idea/2017.1/ws_import_alt_enter_1.png
    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:

    /help/img/idea/2017.1/ws_import_pop_up.png

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

In either case, WebStorm inserts an import statement:

/help/img/idea/2017.1/ws_import_on_the_fly_2.png

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:
    unboundNameSpace1.png
  2. Press Alt+Enter. If there are multiple choices, select the desired namespace from the list.
    unboundNameSpace2.png
    WebStorm creates a namespace declaration.

See Also

Last modified: 17 July 2017