Optimize Imports in WebStorm

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:

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).


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.


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.


The WebStorm team

Comments below can no longer be edited.

18 Responses to Optimize Imports in WebStorm

  1. Avatar

    Jorrit Schippers says:

    May 15, 2018

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

  2. Avatar

    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

      Ekaterina Prigara says:

      July 16, 2018

      Sorry, there’s no way to do that.

    • Avatar

      Doug says:

      July 30, 2018

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

    • Avatar

      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. Avatar

    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

      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. Avatar

    Kirill says:

    November 26, 2018


    Is it possible to setup this type of import

    import {
    } from ‘@angular/core’;


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

    • Ekaterina Prigara

      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. Avatar

    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. Avatar

    Gauthier PEEL says:

    January 26, 2019

    If the import locations are missing, the REMOVE is not made, which is a pain:
    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. Avatar

    Artem says:

    November 21, 2019

    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. Avatar

    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.

    • Avatar

      lena_spb says:

      May 8, 2020


      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