Automatically Optimizing Imports — WebStorm

IntelliJ — WebStorm offers an “Optimize Imports” feature designed to enhance the organization and readability of your JavaScript and TypeScript files. This functionality serves several purposes:

1. Eliminating unused imports.
2. Consolidating multiple imports originating from the same source.
3. Optionally arranging imports, as well as their constituent members, alphabetically by module name.

To use the “Optimize Imports” feature, you can use the keyboard shortcuts ^⌥O (Mac) / Ctrl+Alt+O (Windows) or access it via the “Find Action” popup.

Please note that this action exclusively affects the imports within the current file. For additional methods to execute “Optimize Imports,” refer to the section below for further details.

Let’s Try

This is our example imports section of the file

import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {environment} from '../environments/environment';
import {AppComponent} from './app.component';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {ApplicationInitStatus} from '@angular/core';

After we use the “Optimize Imports” feature, it became the following:

import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {ApplicationInitStatus, NgModule} from '@angular/core';

As a result, it removed unused imports and combined two of them coming from Angular Core library.

To take an additional step in organizing our imports, we can access the “Preferences/Settings” menu, navigate to “Editor”, then select “Code Style”, and choose either JavaScript or TypeScript. In the “Imports tab”, there is an option to sort imports by module name. Enabling this setting will arrange the imports in alphabetical order based on their module names.

Within this tab, you will come across two additional settings associated with the Optimize Imports feature: “Merge imports for members from the same module” and “Sort imported members”. We’ve already seen the first one in action. When this checkbox is checked, it combines imported symbols from the same module into a single import statement, separated by commas. These members are then listed in the order they are imported. If you wish to organize them alphabetically, you can select the “Sort imported members” checkbox.

Settings in IntelliJ Webstorm

Optimize Imports on Save

You have the option to set up the IDE to automatically optimize imports in modified files as you save your edits. To do this, navigate to “Preferences/Settings”, then access the “Tools” section and choose “Actions on Save”. Here, you can enable the “Optimize imports” checkbox. You also have the flexibility to decide whether this action should be executed when saving any file type or only for specific file types of your choosing.

You can also run your TSLint Watcher on every save action via this window and for more details about TSLint Watcher and making it automatic, please visit my previous post.

Actions on Save in IntelliJ Webstorm

I hope that these functionalities can save your time and you’ll have a better code base for every project that you’re working.

Good luck!