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?


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


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?



Please sign in to leave a comment.