The Smart Import extension will help you organize your TypeScript applications like Angular.
In TypeScript applications, we can define class, interface, enum and other types in a separate files, and import them in the consumer using import syntax.
For example
import { AuthService } from './@services/auth.service';
import { AzureNotificationService } from './@services/azure-notification.service';
import { AppService } from './@services/app-service';This approach clutter codebase a lot with many import statements for each file.
However, using index.ts file in a folder can solve this problem. For example, we can create index.ts file in services folder and export all types.
export * from './auth.service';
export * from './azure-notification.service';
export * from './app.service';Now, we can simply use one import statement to import all these services.
import { AppService, AuthService, AzureNotificationService } from './@services';
Smart Import: This extension allow you to select a directory in Explorer and create an
index.tsfile for all.tsfiles (excluding.spec.tsfiles). Every time you add/remove files from a directory, just re-run the extension and it will update the entries inindex.tsfile.
This extension has been tested with Angular projects. However, this can be used with any other web frameworks with TypeScript support e.g. Vue.js, React.js, Node.js etc.
This extension contributes the following settings:
explorer/context: Show a menu option in explorer context menu.
The extension generate index.ts file for a selected directory only. If there are any sub-directory, they won't be processed.
This is a first version of the extension. Feel free to open an issue with any bugs or feature requests.
Cheers!