DEV Community

Sorting your imports correctly in React

Martín Mato on April 13, 2020

While I am preparing my next article, I wanted to share with you this short post with an excellent configuration for your React or React Native app...

Read full post

Aamnah Akram • Jul 28 '20 • Edited

Thanks for this. My config is pretty much the same as yours except for groups

"groups": [ "builtin", "external", "internal", ["parent", "sibling"] ],

This gives me one more group of import statements for all files that are imports from ../ and ./ files

Martín Mato • Aug 2 '20

Yes, that's great. Thanks!

Ryan Setiagi • Oct 3 '20

Thanks for the config, I figured it out how to group react and react-native import first with this pattern

"pathGroups": [
          {
            "pattern": "react+(|-native)",
            "group": "external",
            "position": "before"
          }
        ],

Nermin Skenderovic • Jul 19 '22

How do I also include "expo" in that pattern?

Aamnah Akram • Jan 19 '21

excellent. now i only need to figure out how to write that in YAML..

Good stuff and well done! • Apr 27 '20

import/order works great until it hits code like:

import { b, c, a } from 'sth';

It will simply ignore { b, c, a } sorting. I have tried coupling it with sort-import but they are conflicting.

So, in the end, I will probably resort to simple-import-sort which does both, grouping and sorting in groups as well as import members.

Aamir Afridi • Sep 2 '20

Thanks for pointing to eslint-plugin-simple-import-sort simple to configure and worked great for me.

Cosmas Gikunju • Apr 14 '20

I have been doing this manually😅. I feel stupid but now I'm not

Martín Mato • Apr 14 '20

Glad it was helpful!.

Adam Nathaniel Davis • Apr 14 '20 • Edited

I really like the ESLint approach. FWIW, I recently wrote an article extolling the benefits of sorting your code in many other areas of the application as well:

dev.to/bytebodger/sorting-code-alp...

Pavel Shamparov • Jul 10 '20

Does anyone experiences wrong regex behaviour with groupPath pattern?

Martín Mato • Jul 10 '20

Can you specify your problem?

Raf • Nov 26 '21

this is great although not sure how strict the alphabetic sort is. seems to be a little spotty

i wonder if this plugin also support non default imports (i.e. { a, b, c } from "x")

Taehyun Hwang • Jan 16 '21 • Edited

Thank you for your effort!
I have searched this formatting option after reading your post and i have a wonder for option "pathGroupsExcludedImportTypes".
I read many times your post and eslint-import-order.md (github.com/benmosher/eslint-plugin...) but i don't understand.
What kind of situations should I use this for?
Could you please explain in more detail?

Thank you!

Karson • Jun 12 '21

After several tries and error. my guess is that those import types included in "pathGroupsExcludedImportTypes" (default: ["builtin", "external"]) won't be working on "pathGroups" configuration. So by default, the pathGroups won't be working in "builtin" and "external".
Basically he overwritten the default value of pathGroupsExcludedImportTypes to "react" , which is none of the valid import type. Therefore, "pathGroups" will work on all import types in this case.

Aashutosh Rathi • Jul 11 '20

You simply saved my day!

Wahdan • Apr 13 '20

And i thought i am alone by doing this, thanks for your contribution 🙌

Hoang Le • Apr 14 '20

This is awesome.

How about if we use for Angular? Btw have you been able to use any ext that can auto reorder imports based on the eslint rule?

Martín Mato • Apr 14 '20

To use for Angular, I think you should use a tool like typescript-eslint for ESLint support Typescript and then use the plugin as I mentioned in the article. In theory, this should work, but I didn't try myself.

Regarding extensions to help you auto-reorder, you have the ESLint extension. With the help of setting editor.formatOnPaste": true and editor.formatOnSave": true on the VS Code settings you should be able to sort automatically on save and paste using the ESLint rule.