Refactor the importing order of imports in the project files

Development ScholarX
1

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.

The rule of thumb is to keep the import order like this:

  1. Built-in
  2. External
  3. Internal
import React from 'react';

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

import pladeholderImage from '../../assets/images/placholder.png';
import colors from '../../styles/colors';
1 Like
2

Here’s the issue for this,

3

I added an eslint rule for this now it throws an error if it’s not in the correct order. See how many error I have to fix. LOL

image
image3360×2100 596 KB

1 Like
4

Running npm run lint -- --fix fixed all of them. Thank god :sweat_smile:

2 Likes
5

Here’s the PR,

2 Likes