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.

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

Leave a Reply

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