Optimize Imports in WebStorm

Posted on by Ekaterina Prigara

To help you keep the import section in a JavaScript or a TypeScript file clean and readable, WebStorm has an action called Optimize imports. It does several things at once:

  • it removes any imports that are no longer used;
  • it merges together multiple imports from the same file;
  • it can sort members inside the import and sort imports by the module name.

To run Optimize imports, use the shortcut Ctrl-Alt-O or find it in the Find Action popup (Cmd/Ctrl-Shift-A). Alternatively, you can just have WebStorm run it automatically before a commit. We’ll talk about ways to do that in a second.

Here’s how Optimize imports works:
optimize-imports

Let’s have a closer look at the actual code:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // FormsModule is no longer used,
// so we can remove its import

import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';
import { ApplicationInitStatus } from '@angular/core'; // this one imports from 
// the same module as the one above, so they can be merged into one import

This is what we get after running Optimize imports with the default options:
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ApplicationInitStatus, NgModule } from '@angular/core';

If we want to go one step further and also sort the imports, we can do that by going to Preferences | Editor | Code Style | TypeScript or JavaScript and checking Sort imports by modules on the Import tab. This will sort our imports alphabetically by module name (the part after from):
import { ApplicationInitStatus, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

On this tab, you can also find two other options related to Optimize import: Merge imports for members from the same module and Sort imported members (responsible to sorting symbols inside {} in the import statement).

import-code-style

There are several ways how you can run Optimize imports.

The most straightforward way to use the Optimize import action is to press Ctrl-Alt-O or find it in the Find Action popup (Cmd/Ctrl-Shift-A). This will only change imports in the currently opened file.

You can also select a folder in the Project view and press the same shortcut – this will run Optimize imports for all the files in this folder.

optimize-import-in-directory

Notice the check-box that says, Process only VSC changed files on the confirmation dialog. As you might guess, if you check it, the imports will be updated only in those files that are not yet committed to the version control.

Talking about version control, you can enable Optimize imports in the Commit Changes dialog – this will optimize imports in all the files that you have selected for your commit.

vcs-optimize-imports

The WebStorm team

Comments below can no longer be edited.

18 Responses to Optimize Imports in WebStorm

  1. Jorrit Schippers says:

    May 15, 2018

    Great idea! Wouldn’t optimize on save be a good addition?

  2. Yaojian says:

    July 16, 2018

    How to pin some imports at first?
    For example, I want import reflect-metadata to always be the first of all imports?

    • Ekaterina Prigara says:

      July 16, 2018

      Sorry, there’s no way to do that.

    • Doug says:

      July 30, 2018

      This would be great, we usually want some dependencies to be at the top. e.g. React, Immutable…

    • erisnuts says:

      August 1, 2018

      I’ve renamed imports, witch I wanted to be first – added numbers in the beginning of the module name like this:
      import React from ‘1react’;
      import PropTypes from ‘2prop-types’;
      and after optimization I’ve renamed them back. profit.)

  3. Jason says:

    August 21, 2018

    Does this feature also include an option to separate third-party imports and application imports with a new-line? I’ve been looking to see how to enable this grouping but can’t seem to find a setting for it.

    • Ekaterina Prigara says:

      August 21, 2018

      There’s no specific option for arranging the third-party module imports separately from the application imports, but you can enable sorting the imports by the module name – that way all the application imports that start with ./ will go after the imports from node_modules. This option is available in Preferences | Editor | Code Style | JavaScript or TypeScript | Imports.

  4. Kirill says:

    November 26, 2018

    Hello.

    Is it possible to setup this type of import

    import {
        ApplicationInitStatus,
        NgModule,
    } from '@angular/core';
    

    Instead:

    import { ApplicationInitStatus, NgModule } from '@angular/core';
    
    • Ekaterina Prigara says:

      November 26, 2018

      Yes, you can do that. Open the TypeScript code style preferences (Editor | Code Style | TypeScript): in the Wrapping and Braces tab, find “ES6 import/export” and select “Wrap always” next to it; then in the Punctuation tab select “Trailing comma – Add when multiline”.

  5. Dominik says:

    December 22, 2018

    Before optimization:
    import { of as observableOf } from ‘rxjs’;

    import { ComponentFixture } from ‘@angular/core/testing’;
    import { FormsModule } from ‘@angular/forms’;

    import { MyAppModule } from ‘@my-app/core/my-app.module’;

    import { MyAppComponent} from ‘./my-app.component’;

    After optimization:

    import { ComponentFixture } from ‘@angular/core/testing’;
    import { FormsModule } from ‘@angular/forms’;

    import { MyAppModule } from ‘@my-app/core/my-app.module’;
    import { of as observableOf } from ‘rxjs’;

    import { MyAppComponent } from ‘./my-app.component’;

    is there a way to separate imports from my @my-app? (it’s defined in tsconfig, “paths” property)

  6. Gauthier PEEL says:

    January 26, 2019

    If the import locations are missing, the REMOVE is not made, which is a pain:
    ex:
    import {LcBasicComponent} from ‘./wrongpath/lc-basic.component’;
    let component2: LcBasicComponent;

    If the ‘from’ is undeline with a red swiggly : TS2307: Cannot find module ‘./page/basic/lc-basic.component’.

    When Ctrl+ALt+O => nothing happens

  7. Artem says:

    November 21, 2019

    Hi!
    Is it possible to suppress sorting imports for some files or lines of code?
    For example in exceptional case, when import order has a matter.

    May be with special comment, like // noinspection JSUnusedLocalSymbols

  8. Clara Attermo says:

    May 7, 2020

    This feature is not working when require is used.

    const {fetchJobRow} = require(“../dal/misc_dal”);
    const {newJobEvent} = require(“../dal/misc_dal”);
    const {startJob} = require(“../dal/misc_dal”);
    const {updateJob} = require(“../dal/misc_dal”);

    Are not merged.

    • lena_spb says:

      May 8, 2020

      Hello!

      Optimize imports action only affects ECMAScript 6 imports, require() calls are not merged/sorted/etc., so this is not supposed to work. If you’d like to have similar features available for CommonJS modules, please file a feature request to youtrack, https://youtrack.jetbrains.com/issues/WEB