Auto Import

Add ES6 imports on code completion

• If this checkbox is selected, WebStorm automatically inserts an import statement in JavaScript code when you complete a symbol exported using ES6 exports in another project file:

  

  Gif

• When the checkbox is cleared, on pressing AltEnter WebStorm shows a popup that suggests importing the symbol:

  

• Completion and auto-import also work for React components, including stateless components. WebStorm properly detects them, provides code completion, and adds import statements automatically:

  

  Gif

Add TypeScript imports automatically

Select this checkbox if you want WebStorm to generate import statements in TypeScript code. Use the checkboxes below to choose when import generation will be invoked.

• On code completion If this checkbox is selected, WebStorm automatically inserts an import statement in TypeScript code when you complete a symbol exported in another project file.

• With auto-import tooltip If this checkbox is selected, WebStorm shows a tooltip with an import suggestion when you place the caret at an unresolved symbol that can be imported. When the checkbox is cleared, you can invoke import generation only be pressing AltEnter.

• Unambiguous imports on the fly With this checkbox selected, WebStorm adds import statements when you type your code or paste a fragment with a symbol that is not yet imported if there is only one source to import the symbol from.

Update imports on paste

Select how WebStorm should process references to missing symbols in pasted blocks of Dart code:

• All — WebStorm will insert import statements automatically for all missing symbols in pasted code.

• Ask — you will be prompted to select the symbol to import.

• None — WebStorm will not add any import statements automatically, you can invoke import generation by pressing AltEnter at the unresolved reference and choosing Import <symbol name> from the list.