ts-namespace-import-plugin

This plugin can help with importing common namespaces into your modules.

As a code action

As completion

What is a namespace import you may ask? You can learn more about them here but in short it looks like the following:

import * as SomeNamespace from "path/to/module";

SomeNamespace.doStuff();

We like them because it gives context when a function is used as opposed to have a bunch of named imports. It also reduces naming conflicts.

Installation

yarn add --dev @unsplash/ts-namespace-import-plugin

Then add the following to your tsconfig.json.

{
  "compilerOptions": {
    // ...other options
    "plugins": [
      {
        "name": "@unsplash/ts-namespace-import-plugin"
      }
    ]
  }
}

Configuration

{
  "compilerOptions": {
    // ...other options
    "plugins": [
      {
        "name": "@unsplash/ts-namespace-import-plugin",
        "namespaces": {
          "MyNamespace": {
            "importPath": "path/to/module"
          }
        }
      }
    ]
  }
}

One configured, TS should prompt you with a code action whenever you write MyNamespace in any module, for instance:

// import * as MyNamespace from 'path/to/module'  <--- This would be added when the code action runs on `MyNamescape`
MyNamespace.doFoo();

Contribute

yarn link # From this repo
yarn link @unsplash/ts-namespace-import-plugin # from another repo
yarn run compile # when you make changes here to reflect in your target repo

If you need to log things inside this plugin, they will show up in the tsserver.log which can be opened from your target repo using CMD+SHIFT+P > Open TS Server Log. Keep in mind that everytime you reload your VSCode to take latest changes into account, you'll have to run this again because the file may change location on your filesystem. You can also read this for more info.