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 {…