Sorting your imports correctly in React

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 apps.

Sorting your imports in a JS file has a lot of benefits. First at all makes it easier to see what you imported from specific packages, also if you group them, you can easily distinguish which imports are from third party packages or local imports.

It is annoying doing all the sorting manually, also, if you are someone who makes abusive use of the VS Code sort-imports like me, then when sharing your code, it is incompatible with the config of other developers. Here is where ESLint can help us.

ESLint to the rescue!.

As we know, ESLint is the most popular linter for javascript. I don't remember not using it in any of my react projects because it is handy to define a set of styling rules to make the code clear and consistent.

ESLint comes with an in-built import sorting rules that even they have beneficial properties, it doesn't fit what I need. So, I use eslint-plugin-import.

eslint-plugin-import is a plugin that extends the ESLint import rules. It doesn't have properties only to organize and to sort; also, it helps to prevent having issues like misspelling file path or packages names, among other things.

My settings

So, you can install the eslint-plugin-import library in your dev dependencies, add in the plugin array in your ESLint config file and start to use it.

One of the things I want to ensure in my react code is that the first import is the React package, just to follow the standard convention. Then, I want to group them separately, first all the third-party packages, and then all the local files.

So my rule is the next one:

"import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal"],
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ],

• The groups sets the order intended for every group.
• pathGroups can group by path set by a pattern. In this case, I want to look for react import to be before any other import.
• pathGroupsExcludedImportTypes defines import types. "React" will be handled as other type so it can be separated for the other external packages.
• newlines-between separates each group with a new line in between.
• alphabetize sort the order in which group will be sorted. I choose in ascending way and case sensitive.

Once you run ESLint your import statements in the code should look like this:

import React from 'react';

import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';

import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';

Conclusion

I hope this post can be helpful to someone.
Please feel free to make any suggestions or questions in the comment section.

Thanks for reading.