WebStorm

The JavaScript and TypeScript IDE

Download

Tips & Tricks

Optimize Imports in WebStorm

Ekaterina Prigara

Note: This post was updated in July 2022.

To help you keep the import sections of your JavaScript and TypeScript files clean and readable, WebStorm includes an Optimize Imports action. It does several things:

It removes imports that are no longer used.
It merges multiple imports from the same file.
It can sort imports – and members inside them – by module name.

To run Optimize Imports, you can use the shortcut ^⌥O / Ctrl+Alt+O or search for it in the Find Action popup (⌘⇧A / Ctrl+Shift+A). This will only change the imports in the current file. To learn about other ways to run Optimize Imports, see this section below.

Let’s use it on our code and take a closer look at what’s happening:

We start with the following:

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';

And this is what we get after running Optimize Imports with the default options:

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

WebStorm has removed:

import { environment } from '../environments/environment'; // because it was unused.
import { BrowserModule } from '@angular/platform-browser'; // as this was a duplicate.

And combined:

import {ApplicationInitStatus} from '@angular/core'; and import {NgModule} from '@angular/core'; // as they both import from the same module and so can be merged into one import.

If we want to go a step further and sort the imports, we can go to Preferences / Settings | Editor | Code Style | JavaScript or TypeScript and select Sort imports by modules on the Imports tab. Selecting this option will sort the imports alphabetically by module name:

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

On this tab, you’ll also find two other options related to Optimize Imports: 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 selected, imported symbols from the same module are listed in one import statement with a comma as a separator, and the members are listed in the order in which they are imported. To arrange them alphabetically, you can select the Sort imported members checkbox.

Other ways to run Optimize Imports

There are other ways to use the Optimize Imports action aside from the one described above.

Optimize all imports

You can use the same shortcut ^⌥O / Ctrl+Alt+O on folders in the Project view – this will run the Optimize Imports action across all the files in that folder.

Notice the checkbox that says process only VCS changed files. If you check this checkbox, the imports will only be updated in modified files that haven’t been committed to the version control yet.

Optimize imports before committing changes to your VCS

You can also run the Optimize Imports action before committing changes to the version control. Open the Commit UI with ⌘K / Ctrl+K and check the Optimize imports box in the pre-commit checks menu under the gear icon – this will optimize the imports in all the files you have selected for your commit.

Optimize imports on save

You can configure the IDE to automatically optimize the imports in modified files when you save your changes. Go to Preferences / Settings | Tools | Actions on Save and check the Optimize imports checkbox. You can choose whether it’s run when you save any file type or only specific ones.

We hope you have enjoyed this post about the Optimize Imports action. If there are any other actions or features you would like us to write about, please let us know in the comments below.

The WebStorm team