How to Sort Imports in React Project

This content originally appeared on Level Up Coding - Medium and was authored by bitbug

Eslint and Prettier both have plugins to do this

Preface

Recently I encountered a very strange style bug. In a SPA project, if visiting page A first and then page B, there will be a problem with the page style. If visiting page B directly, it works well. This bug took me a lot of time to fix, but the cause of the bug is very simple. Both the pageA and pageB import some of the same components and override the style, but their orders are different which cause styles to be overwritten. There are some demo code:

// Page A
import "./styleA.css"; // override componentA and componentB style
import CompA from 'component/a';
import CompB from 'component/b';

// Page B
import CompA from 'component/a';
import CompB from 'component/b';
import "./styleB.css"; // override componentA and componentB style

The pageA custom style has higher priority than the pageB custom style.

They may have many ways to fix the bug, such as use scoped css, namespace etc.. But I found that the easy way is to sort the imports.

In this article, we can learn two ways to sort imports:

1. Prettier
2. Eslint

I am using VS Code to develop a react project. I have installed the prettier and eslint plugins of VS Code, which will not be installed separately in the project.

Sort imports with Prettier

The prettier doesn’t support this feature, there is an awesome plugin that can use to sort imports — GitHub — trivago/prettier-plugin-sort-imports.

First, let’s install it:

npm install --save-dev @trivago/prettier-plugin-sort-imports

// or use yarn
yarn add --dev @trivago/prettier-plugin-sort-imports

Then, we start configuring our rules for this plugin. The plugin is very flexible and has some apis that help us custom the order.

In my project, I use importOrder to custom the order of imports, and importOrderSeparation to separate different parts:

// .prettierrc.json
{
  "importOrder": ["^react(.*)", "antd/(.*)", "<THIRD_PARTY_MODULES>", "@/(.*)", "^[./]"],
  "importOrderSeparation": true
}

The imports will be the following order :

1. react, react-dom, react-router
2. antd (the ui library)
3. package/third-party imports, such as lodash.
4. project alias imports
5. relative imports

The effect of this rules will be like this:

When save the file will auto use prettier to format it, so will auto sort the imports.

Sort imports with Eslint

Eslint has many plugin for sort imports, like eslint-plugin-simple-import-sort, eslint-plugin-import, sort-imports. I prefer to use eslint-plugin-simple-import-sort which is easier and just one option for configuring the group. In follow content we will learn how to use it.

First, let’s install the dependent in project:

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

// or use yarn
yarn add eslint-plugin-simple-import-sort -D

Then, we start configuring our rules for this plugin:

// .eslintrc.js
module.exports = {
  //...
  plugin: ["simple-import-sort"],
  rules: {
    "simple-import-sort/imports": "error",
    //if we want to group imports can use below.
    "simple-import-sort/imports": ["error", {
      groups: [
        ["^react"],
        ["^antd"],
        ["^@?\\w"],
        ["@/(.*)"],
        ["^[./]"]
      ]
    }] 
  }
}

This will make the same effect as prettier except for the separator space between line:

Conclusion

In this article, we learn how to use prettier of eslint to sort the imports. The prettier way is recommended for prettier will auto format the code style like the semi, space, and so on. Both of these ways can help us to write more clean, readable and robust code especially helpful for the CSS rule override.

Thanks for reading, hope this article can help you, I am looking forward to you following me for learning more practical tips to become a better developer.

Level Up Coding

Thanks for being a part of our community! Before you go:

• 👏 Clap for the story and follow the author 👉
• 📰 View more content in the Level Up Coding publication
• 🔔 Follow us: Twitter | LinkedIn | Newsletter

🚀👉 Placing developers like you at top startups and tech companies

How to Sort Imports in React Project was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

This content originally appeared on Level Up Coding - Medium and was authored by bitbug

Print Share Comment Cite Upload Translate Updates

APA

bitbug | Sciencx (2022-09-22T15:36:06+00:00) How to Sort Imports in React Project. Retrieved from https://www.scien.cx/2022/09/22/how-to-sort-imports-in-react-project/

MLA

" » How to Sort Imports in React Project." bitbug | Sciencx - Thursday September 22, 2022, https://www.scien.cx/2022/09/22/how-to-sort-imports-in-react-project/

HARVARD

bitbug | Sciencx Thursday September 22, 2022 » How to Sort Imports in React Project., viewed ,<https://www.scien.cx/2022/09/22/how-to-sort-imports-in-react-project/>

VANCOUVER

bitbug | Sciencx - » How to Sort Imports in React Project. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/22/how-to-sort-imports-in-react-project/

CHICAGO

" » How to Sort Imports in React Project." bitbug | Sciencx - Accessed . https://www.scien.cx/2022/09/22/how-to-sort-imports-in-react-project/

IEEE

" » How to Sort Imports in React Project." bitbug | Sciencx [Online]. Available: https://www.scien.cx/2022/09/22/how-to-sort-imports-in-react-project/. [Accessed: ]

rf:citation

» How to Sort Imports in React Project | bitbug | Sciencx | https://www.scien.cx/2022/09/22/how-to-sort-imports-in-react-project/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.