import-sort

import-sort is a set of packages that allow you to sort your ES2015 (aka ES6) imports. Both JavaScript and TypeScript files are supported.

Sorting imports

There are multiple ways to actually sort your imports. Just pick the one that suits you most.

• Visual Studio Code
• Atom
• Vim
• JetBrains IDEs (IntelliJ IDEA, WebStorm etc.)
• Command Line

Visual Studio Code (vsc-sort-imports)

Sort your imports directy from within Visual Studio Code.

See sort-imports in the Visual Studio Marketplace for more details.

This extension was originally developed by Peter Juras and is currently maintained by A. Matías Quezada. Thank you very much!

Atom (atom-import-sort)

Sort your imports directly from within Atom. Go to package or install it directly with apm install atom-import-sort. The plugin can sort imports in both JavaScript and TypeScript.

After you installed the package you can sort your imports using the Ctrl + Alt + o key binding or trigger it manually from the command palette with the Import Sort: Sort command.

The package also offers a "sort on save" option to automatically sort your imports whenever you save a JavaScript or TypeScript file. It's disabled by default.

Vim (vim-sort-imports)

Sort your imports directy from within Vim. See vim-sort-imports for more details about the configuration.

JetBrains IDEs

To use import-sort in any of the JetBrains IDEs follow the instructions regarding File Watcher in the prettier documentation and replace prettier with import-sort.

Alternatively, just install the File Watcher plugin and try to import the following File Watcher configuration.

Command Line (import-sort-cli)

Sort your imports from the command line. Useful to sort all your files in bulk or from a script in your package.json.

Install it with npm install --save-dev import-sort-cli or use it directly with npx import-sort-cli.

ATTENTION: Since version 4 --write modifies file in-place. The old --overwrite flag was removed. The CLI now behaves closer to prettier's CLI. Also, the exit code is now 0 even when unsorted were sorted (unless --list-different is used.)

Usage: import-sort [OPTION]... [FILE/GLOB]...

Options:
  --list-different, -l  Print the names of files that are not sorted.  [boolean]
  --write               Edit files in-place.                           [boolean]
  --with-node-modules   Process files inside 'node_modules' directory..[boolean]
  --version, -v         Show version number                            [boolean]
  --help, -h            Show help                                      [boolean]

Node.js (import-sort)

Sort your imports via Node.js. For more information take a look at the code of the import-sort-cli package.

To use it you probably want to install import-sort, import-sort-config, a parser (say import-sort-parser-babylon) and a style (say import-sort-style-eslint).

The import-sort library is basically the heart that powers import-sort-cli and atom-import-sort and should be used if you want to integrate it with other environments.

Ignoring files

Sometimes the imports in a certain file should not be sorted. To prevent import-sort from sorting a particular file, just add // import-sort-ignore or /* import-sort-ignore */ to your file. Anwhere in the file is fine.

Dealing with comments

Prior versions of import-sort had problems with comments that were attached to imports. This is now mostly fixed and situations like the following should no longer cause problems.

1import foo from "bar"; // This will move with the import

1// This will also move with the import
2import foo from "bar";

1// This won't move with the import
2
3// This will move with the import
4import foo from "bar";
5// This won't move with the import

In general, every comment that is directly above the import (no blank line between them) or is on the same line is considered part of it.

That means that things like // eslint-disable line and // eslint-disable-next-line are finally supported.

For copyright headers and compiler pragmas (like @flow) a blank line should be added after the comment.

1// @flow
2
3import foo from "bar";

Using a different style or parser

Styles (and parsers) can be configured on a per-project basis including support for different types of files (currently JavaScript and TypeScript).

Just add the following to your package.json and adapt it to your liking:

1"importSort": {
2  ".js, .jsx, .es6, .es, .mjs, .ts, .tsx": {
3    "parser": "babylon",
4    "style": "eslint"
5  }
6}

The keys are a list of file extensions that map to the parser and style that should be used for files that have any of the listed file extensions.

Instead of putting your configuration into your package.json you can also use a .importsortrc file written in JSON. For more details see cosmiconfig which is used internally by import-sort.

By default, import-sort comes with these styles:

• import-sort-style-eslint (default): A style that that is compatible with ESLint's sort-imports rule.

• import-sort-style-module: A style that groups and sorts by module.

• import-sort-style-renke: Renke's personal style.

Writing you own custom style

Since styles can now be configured using your package.json it's way easier to write and use your own style.

A style is module that should be called import-sort-style-$name where $name is the name of the style.

An API is provided to specify how the imports are sorted (see style API for more details).

The best way to write your own style is to look at existing styles like import-sort-style-renke and adapt it to your liking.

Feedback

I appreciate any kind of feedback. Just create an issue or drop me a mail. Thanks!

License

See LICENSE.