eslint-plugin-simple-import-sort

What is eslint-plugin-simple-import-sort?

The eslint-plugin-simple-import-sort package is an ESLint plugin that automatically sorts import statements in your JavaScript and TypeScript files. It helps in maintaining a consistent order of imports, making the codebase easier to read and maintain. It can sort imports alphabetically, group and separate different types of imports, and remove duplicate imports.

What are eslint-plugin-simple-import-sort's main functionalities?

Sorting import statements

This feature automatically sorts import statements alphabetically and groups them. After running ESLint with this plugin, the imports would be sorted as follows: import React from 'react'; import z from 'zoo'; import { a, b } from 'alphabet'; import { c as cat, d as dog } from 'animals';

import React from 'react';
import { b, a } from 'alphabet';
import z from 'zoo';
import { d as dog, c as cat } from 'animals';

Grouping and separating imports

This feature groups and separates imports by their origin. Built-in modules, external modules, internal modules, and local modules are grouped together and separated by a blank line. After sorting, the imports would be grouped as follows: import fs from 'fs'; import path from 'path'; import React from 'react'; import myLocalModule from './myLocalModule';

import fs from 'fs';
import path from 'path';
import myLocalModule from './myLocalModule';
import React from 'react';

Removing duplicate imports

This feature detects and removes duplicate import statements. After running ESLint with this plugin, only one import statement will remain: import { a } from 'module';

import { a } from 'module';
import { a } from 'module';

Other packages similar to eslint-plugin-simple-import-sort

eslint-plugin-import

This package provides a set of rules that help enforce a convention in the order of require/import statements. It is more configurable than eslint-plugin-simple-import-sort and includes a variety of other rules to ensure proper imports, prevent misspellings, and manage dependencies.

import-sort

This is not an ESLint plugin but a standalone tool that sorts imports using various style configurations. It can be used in conjunction with ESLint but requires separate configuration and execution.

eslint-plugin-autofix

This package extends ESLint's autofixing capabilities and can be used to sort imports among other things. However, it is not solely focused on import sorting and requires additional configuration to achieve similar functionality to eslint-plugin-simple-import-sort.

README

eslint-plugin-simple-import-sort

Easy autofixable import sorting.

• ✅️ Runs via eslint --fix – no new tooling
• ✅️ Also sorts exports where possible
• ✅️ Handles comments
• ✅️ Handles type imports/exports
• ✅️ TypeScript friendly (via @typescript-eslint/parser)
• ✅️ Prettier friendly
• ✅️ eslint-plugin-import friendly
• ✅️ git diff friendly
• ✅️ 100% code coverage
• ✅️ No dependencies
• ❌ Does not support require

This is for those who use eslint --fix (autofix) a lot and want to completely forget about sorting imports!

Example

➡️ Full readme

Changelog

Version 10.0.0 (2023-01-27)

This release might move some imported items with type around. This is a breaking formatting change (that only affects TypeScript and Flow), but only in the form of that you need to autofix your files.

In previous versions, type specifiers came first:

import { type B, a } from "a";
export { type B, a } from "a";

Now, all specifiers are sorted alphabetically, regardless of type:

import { a, type B } from "a";
export { a, type B } from "a";

Motivation:

You might import a class for a type annotation using:

<!-- prettier-ignore -->

import {
  type MyClass,
  coolFunction,
} from "example";

Later, you also start instantiating that class in the same file (new MyClass()), so you remove type.

Previously, this resulted in a messy diff due to the class moving:

 import {
-  type MyClass,
   coolFunction,
+  MyClass,
 } from "example";

Now, the sorting with the type keyword would be:

<!-- prettier-ignore -->

import {
  coolFunction,
  type MyClass,
} from "example";

Now there’s no reordering diff, just the type keyword being removed:

 import {
   coolFunction,
-   type MyClass,
+   MyClass,
 } from "example";

This is consistent with [“Why sort on from?”][sort-from].

Thanks to Jake Bailey (@jakebailey) for reporting and suggesting the fix!