Organize imports using Smart Import Visual Studio Code Extension — TypeScript — Angular, Reactjs, Vuejs, Nodejs

Smart Imports — VS Code extension demo

If you haven’t read the below story, do check it out. It explains in details about index.ts file.

Smarter way to organize “import” statements using “index.ts” file(s) in Angular

In any TypeScript based application like Angular, managing imports is one of the tedious jobs. As the application grows, the number of individual TypeScript files grows proportionally. Especially the payload Models, helper Services, Pipes, State classes and so on.

The consumer of these types must import using the relative path in order to use it. And that results into huge number of import statement at the beginning of Component and other files.

import { AddressService } from '../@services/address.service';
import { AppService } from '../@services/app.service';
import { AzureNotificationService } from '../@services/azure-notification.service';
import { DiscountService } from '../@services/discount.service';
import { OrdersService } from '../@services/orders.service';
import { PaymentService } from '../@services/payment.service';
import { ProductsService } from '../@services/products.service';
import { UsersService } from '../@services/users.service';

What we can do is to create index.ts a file, inside services the folder, that would have export statements like below.

export * from './address.service';
export * from './orders.service';
export * from './discount.service';
export * from './payment.service';
export * from './users.service';
export * from './app.service';
export * from './auth.service';
export * from './products.service';
export * from './azure-notification.service';

The consumer would become a single import statement.

import {
  OrdersService,
  PaymentService,
  ProductsService,
  AddressService,
  AppService,
  AzureNotificationService,
  DiscountService,
  UsersService
} from '../@services';

To automate this process, I have published a Visual Studio Code Extension called “Smart Imports”…