This article goes over how to sort imports with ESLint.

Table of Contents

• Prerequites
  • Install
  • Config
  • Run
• Problem
• Solution
  • sort-imports
  • eslint-plugin-simple-import-sort
• Demo

Prerequites

Install

Install eslint with npm:

npm install --save-dev eslint

Or with yarn:

yarn add --dev eslint

Your package.json should look like:

{
  "devDependencies": {
    "eslint": "^7.25.0"
  }
}

Config

Create an ESLint config:

npx eslint --init

Your .eslintrc will look like:

{
  "env": {
    "es2021": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {}
}

Run

Execute the eslint binary with npx:

npx eslint .

Or create a package.json script:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix"
  },
  "devDependencies": {
    "eslint": "^7.25.0"
  }
}

To call it from the command line:

npm run lint

If you encounter the parsing error:

The keyword 'import' is reserved

Update your .eslintrc with the following:

{
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  }
}

Problem

Let’s say you have the index.js:

// index.js
import foo from './foo';
import { resolve, join } from 'path';
import fs from 'fs';

As more modules are imported, it can get messy. So how can we enforce a sorting order without having to do it manually each time? With ESLint.

Solution

sort-imports

ESLint has the rule sort-imports. To enable it in .eslintrc:

{
  "rules": {
    "sort-imports": "error"
  }
}

But when you run eslint, you’ll get the errors:

npm run lint

> @ lint /home/runner/eslint-sort-imports
> eslint .


/home/runner/eslint-sort-imports/index.js
  3:1   error  Expected 'multiple' syntax before 'single' syntax                        sort-imports
  3:19  error  Member 'join' of the import declaration should be sorted alphabetically  sort-imports

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

Autofixable errors can be fixed by passing --fix in the CLI:

npm run lint -- --fix

> @ lint /home/runner/eslint-sort-imports
> eslint . "--fix"

/home/runner/eslint-sort-imports/index.js
  3:1  error  Expected 'multiple' syntax before 'single' syntax  sort-imports

✖ 1 problem (1 error, 0 warnings)

This fixes the member sort error, as shown in the diff below:

 // index.js
 import foo from './foo';
-import { resolve, join } from 'path';
+import { join, resolve } from 'path';
 import fs from 'fs';

But the declaration sort error still persists. This is because changing the evaluation order of imported modules may lead to unexpected changes in how the code works (see #11542).

As a result, there’s no automatic fix for this rule. You’ll either need to manually fix it or ignore the sorting of import declaration statements like below:

{
  "rules": {
    "sort-imports": ["error", { "ignoreDeclarationSort": true }]
  }
}

This isn’t ideal so what can you do? You can find other ESLint plugins that handle import sorting.

eslint-plugin-simple-import-sort

One ESLint plugin that performs autofixable import sorting is eslint-plugin-simple-import-sort.

Install the package with npm:

npm install --save-dev eslint-plugin-simple-import-sort

Or with yarn:

yarn add --dev eslint-plugin-simple-import-sort

Your package.json will look like:

{
  "devDependencies": {
    "eslint": "^7.25.0",
    "eslint-plugin-simple-import-sort": "^7.0.0"
  }
}

Add the plugin and rules to .eslintrc:

{
  "plugins": ["simple-import-sort"],
  "rules": {
    "simple-import-sort/imports": "error"
  }
}

To sort exports, add the ESLint rule:

{
  "plugins": ["simple-import-sort"],
  "rules": {
    "simple-import-sort/exports": "error",
    "simple-import-sort/imports": "error"
  }
}

Reminder: Don’t forget to remove or disable the sort-imports rule.

When you run eslint . --fix:

npm run lint:fix

> @ lint:fix /home/runner/eslint-sort-imports
> npm run lint -- --fix

> @ lint /home/runner/eslint-sort-imports
> eslint . "--fix"

You will see no more errors.

The file index.js will look like:

// index.js
import fs from 'fs';
import { join, resolve } from 'path';

import foo from './foo';

Congratulations! You’ve set up import sorting with ESLint.

Demo

Replit example: