WebStorm auto-import: better support for importing a whole module ("import * as blah from ...")

For about half of our TypeScript modules, you're meant to import individual symbols.

import {UserCreateError} from 'common/api/user'; 

For the other half, you're meant to import the module as a whole:

import * as dbUtil from 'backend/db_util';

const arg = dbUtil.escape(...);

WebStorm will help with auto-imports for the first type of module, but not for the second.

1. Is there a way to configure WebStorm to do what I want? Is there a way to customize the behavior with a plugin?
2. Is there a way to mark modules as "import whole module" and have WebStorm understand that preference?


No way, and I doubt that it's possible. How can the IDE know that dbUtil is an alias for importing everything from certain module?


An example:

  1. Let's say I haven't yet imported "backend/db_util" in one of my files.
  2. I type "dbUtil.escape" inside a function body.
  3. WebStorm highlights that code in red but doesn't suggest any imports.

My current procedure is to do a global search for "db_util", find an existing instance of that import, then copy/paste that import line into my file.  I'm wondering if there's a way for WebStorm to make that process less painful.

WebStorm seems to know a lot of things about my code.  Maybe it could also notice the following:

  1. "dbUtil" is the camel-case version of "db_util".
  2. My project contains many instances of the line: `import * as dbUtil from 'backend/db_util'`
  3. The "backend/db_util" module contains a function named "escape".

I'm not sure that auto-importing anything based on such assumptions is something that worth implementing...


Curious to know why you think it's not worth it.  Is it because you believe `import * as blah` is rare and so there's no need for WebStorm to help with that style of import?


No, they aren't rare; I just think that auto-import based on assumptions listed above could be rather annoying, resulting in broken code


Oh, maybe "auto-import" is not the right term?  I wouldn't want WebStorm to import without asking.  I'd like WebStorm to give me the option to import.

For example:

  1. I write dbUtil.escape()
  2. WebStorm highlights "dbUtil" red.
  3. If I press Alt-Enter over that token, WebStorm presents some choices, one of which is to import "backend/db_util".

Having to write these imports out manually reminds me of my days programming in Java, before I started using IntelliJ.  After I started using IntelliJ, the tedium of imports was mostly eliminated.

Now that I'm using TypeScript, the tedium is back.  I was surprised that WebStorm didn't provide more support.  Or maybe my usual project setup and import style is different from yours?



there are no standard conventions for aliasing the imports, so the heuristics based on came/snake case etc. would work for projects that use the setup like yours only.

Can be a good idea for a custom plugin though. You can use the CommonJS AutoComplete third-party plugin as example


Please sign in to leave a comment.