Navigate back to the homepage

How to Automatically Sort Import Modules with ESLint

In this artcile, you’ll learn how configure ESLint to imports for us automatically.

Ahmed Abdulrahman
Jan 5th, 2020 • ☕️ 1 min read

As we know, when working on bit projects that requires a lot of components and modules to be imported. By time this gets pretty messy and unreadable, and it is really annoying to sort them manually. Here ESLint come into play, we can enforce our editor to sort imports for us automatically. In this artcile, you’ll learn how configure ESLint to imports for us automatically.


Installing ESLint

To install ESLint globally:

1npm install -g eslint

or we can install ESLint locally within a project:

1# With NPM
2npm install eslint --save-dev
3# With YARN
4yarn add -D eslint

Next, we need to create an ESLint config file file (if you haven’t already):

1npx eslint --init

ESLint Configuration

ESLint comes with built-in import sorting rules and only able to sort variable names inside of multiple-imports. It considers the following to be the same type of import:

1import foo from 'foo';
2import { bar } from 'bar';

So, I use eslint-plugin-import. It extends the ESLint import rules and have addional feature like preventing issues with misspelling of file paths and import names. To install eslint-plugin-import plugin:

1npm install eslint-plugin-import --save-dev
2# With YARN
3yarn add -D eslint-plugin-import

No rules are enforced by default. However, we need to configure them manually in ESLint config file:

1//.eslintrc file
3 .......
4 extends: ['plugin:import/recommended'],
5 rules: {
6 'import/namespace': ['error', { allowComputed: true }],
7 'import/order': [
8 'error',
9 {
10 groups: [['index', 'sibling', 'parent', 'internal', 'external', 'builtin']],
11 'newlines-between': 'never',
12 },
13 ],
14 }
15 ......
  • import/namespace: will report at the import declaration if there are no exported names found. When imported as a full namespace (i.e. import * as foo from './foo';;) will report if bar is not exported by ./foo.
  • groups: sets the order intended for every group.
  • newlines-between: set to never, no new lines are allowed in the entire import section.

And that’s how one sets up autofixable import sorting with ESLint.

Did you find this useful? Buy me a coffee to give my brain a hug ☕️.

Hope you liked this article. If you did, then share it. It means a lot.🙌 Thanks for reading!

Discuss on TwitterFollow @_ahmed_ab

Other things I've written

Useful utilities functions to use in your next JavaScript project

a collection of useful functions that you can use to create or expand your utilities library!

Jan 2nd, 2020 · 1 min read

How to Handle Concurrent Operations in Parallel in JavaScript?

Assume that you have more than one promise and you need to know when all the promises get resolved or you have to wait till all the promises resolve.

Dec 27th, 2019 · 1 min read

© 2018–2020
Ahmed Abdulrahman


Link to $ to $ to $