TypeScript Hero is a vscode extension that makes your life easier. When you are coding a lot of TypeScript you may want vscode to automatically include your imports.

If you search for this feature: here's the solution (and many more). Typescript hero will be extended in the future and there are many features in the pipeline that will enhance the way you work with typescript.

If you'd like to buy me a beer :-)

Here is a brief list, of what TypeScript Hero is capable of (more at the end):

• Add imports of your project or libraries to your current file
• Add an import for the current name under the cursor
• Add all missing imports of a file with one command
• Intellisense that suggests symbols and automatically adds the needed imports
• "Light bulb feature" that fixes code you wrote
• Sort and organize your imports (sort and remove unused)
• Code outline view of your open TS / TSX document
• All the cool stuff for JavaScript as well! (experimental stage though, better description below.)
  • Add imports from javascript files
  • Code outline for JS / JSX files
  • Intellisense for JS / JSX files

All commands are preceeded by typescriptHero.

The following commands are bound by default when the extension is installed.

In the following tables, all possible settings are explained. If you find any settings that are not listed here, that means they are "beta" or "not implemented yet".

All settings are preceeded by typescriptHero.

These settings do not have a prefix.

The following settings do have the prefix codeCompletion. So an example setting could be typescriptHero.codeCompletion.completionSortOrder.

| Setting | Description | | completionSortOrder | The order of import completions in suggestion list, bottom pushes them down |

The following settings do have the prefix resolver. So an example setting could be typescriptHero.resolver.stringQuoteStyle.

The following settings do have the prefix codeOutline. So an example setting could be typescriptHero.codeOutline.enabled.

TypeScript Hero can manage your imports. It is capable of:

• Import something you select from a list of all possible indexed symbols
• Import something that is beneath your current cursor position (and ask you if it's not sure which one)
• Import all missing identifiers of the current file
• Remove unused imports and sort the remaining ones by alphabet
• Do organize the imports when a document is saved
  • Note that this feature is only enabled if the vscode setting editor.formatOnSave is enabled as well!

The import groups setting allows you to order all your imports as you may want. The settings is an array of elements. An element can either be a string (with a certain keyword or a regex like string) or an object that contains an identifier (with a certain keyword or a regex like string) and a sort order. The order you enter those objects / string does matter since it is used to define the import groups.

An example (complex) could be:

[
    "Plains",
    "/@angular/",
    {
        "identifier": "/Foo[1-9]Bar/",
        "order": "desc"
    },
    "Workspace",
    {
        "identifier": "Remaining",
        "order": "desc"
    }
]

• Modules : contains all imports from modules (npm etc) import ... from 'vscode';
• Plains : contains all string only imports import 'reflect-metadata;
• Workspace : contains all local project files import ... from '../server';
• Remaining : contains all imports that are not matched by other import groups

(hint: The Remaining group is added implicitly as the last import group if not added specifically)

The default is as follows:

[
    "Plains",
    "Modules",
    "Workspace"
]

For everybody that just wants all imports ordered in asc or desc, just overwrite the default with:

For all imports sorted asc:

[]

For all imports sorted desc:

[
    {
        "identifier": "Remaining",
        "order": "desc"
    }
]

The regex import group contains a regex string. Let's say you want to group all your @angular namespaced imports together in one group you'd use /@angular/ as "identifier" (either in the object when you want to change the order or just the plain regex since default order is asc).

(hint: only the name of the library is matched against the regex)

[
    "/@angular/"
]

The setting above would create two groups: one with all @angular imports another with all other imports.

import {http} from '@angular/http';
import {component} from '@angular/core';

import 'reflect-metadata';
import {Server} from './server';

Intellisense is a common IDE feature. TypeScript Hero provides you with symbols as you type your code and does add the import to the top of the file, if you don't have already imported the symbol.

The "light-bulb" feature of VSCode can provide some code-fix actions to take when you make mistakes. TypeScript Hero offers the following fix actions:

• Detect a missing import and automatically add the import to the file
• Detect a missing import and offer to add all missing imports to the file
• Detect missing methods / properties of an interface that you implemented and implement them for you (implement interface refactoring)
• Detect missing abstract methods of an extended abstract class and implement them for you (implement abstract class refactoring)

This view is below your file explorer. It displays a code outline of your actually opened typescript or typescript-react file. If you switch your actual editor, the new file is parsed and shown. When you expand classes and imports, you'll see what's in them. If you click on an element, the editor will jump to the location of the element.

By now, only typescript / typescript-react is supported. Maybe this will wander in it's own extension to support more languages than those two.

As of now, this is kind of an experimental stage. TypeScript Hero can be set into an ES6 or Both mode, instead of only TypeScript. With one of either modes, it will scan for javascript files in the workspace.

Right now, only files in the workspace are considered "worth", because of the immense amount of javascript files in the node_modules. So if you set TSH to ES6 it will scan all typescript declarations in the node_modules, and your javascript files in the workspace. If you set it to Both, it will scan all typescript files and the javascript files in the workspace (as well as the declarations).

Please visit the issue list :-)