Sort and group JavaScript import statements

How to use the JS import sorter

1. Paste your code into the JavaScript box. The import statements must be at the top, after any hashbang, comments or directives.
2. Keep Blank line between groups ticked to separate groups visually.
3. Keep Sort names inside { } ticked to order the named imports in each statement.
4. Copy Sorted imports. The rest of the file follows the imports unchanged.
5. The stats show how many imports were sorted and which groups were found.

What it does and when to use it

Import blocks grow in the order features were added, which makes them hard to scan and causes merge conflicts when two people add imports at the same spot. A fixed order fixes both. Use this tool on a file before a commit, when you tidy up old code, or to clean an example before you publish it.

It works on the import block only. Format the whole file with the JavaScript formatter, convert require calls first with the CommonJS to ESM converter, and check the result with the JavaScript validator.

How it works

The tool tokenizes the file and reads import statements from the top until it reaches the first other statement. Each import is placed in a group by its module path:

Within a group, imports are sorted by path, ignoring case and comparing numbers naturally, so v2 comes before v10. With Sort names inside { }, names in braces are sorted too, ignoring a leading type. Import attributes such as with { type: 'json' } stay with their statement. Dynamic import() and import.meta end the block.

Worked examples

A React component. The default sample:

import './styles.css';

import fs from 'node:fs';

import axios from 'axios';
import { useEffect, useState } from 'react';

import { api } from '@/lib/api';

import { formatDate } from '../utils/date';

import Button from './Button';

Seven imports were sorted into all six groups, and useEffect now comes before useState.

A Node script with a hashbang. With Blank line between groups off, the hashbang and 'use strict' stay on top. The // config loader comment moves with its import, and { z, a, type B } becomes { a, type B, z }.

Code before the imports. If const x = 1; comes first, the tool reports “No import statements found at the top of the file.” and changes nothing.

Limits and tips

• Imports further down the file are not moved or sorted.
• Unused imports are not removed; a linter or your editor can do that.
• Long multi-line imports are kept, and their names are re-printed one per line when sorted.