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:
optimize-imports

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

This is what we get after running Optimize imports with the default options:

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

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

WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged , . Bookmark the permalink.

14 Responses to Optimize imports in WebStorm

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

  2. Yaojian says:

    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:

      Sorry, there’s no way to do that.

    • Doug says:

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

    • erisnuts says:

      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:

    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:

      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:

    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:

      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:

    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:

    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

Leave a Reply

Your email address will not be published. Required fields are marked *