Import Rules

If a file file imports React, then it must be a tsx file and have React import at top level. Else, it must ba a ts file.

Then, imports must be alphabetical sorted by their paths. First, the third-party libraries, followed by a line break and project files.

Example:

❌

import About from '../pages/about';
import axios from 'axios';
import Contact from '../pages/contact';
import Footer from '../components/footer';
import Header from '../components/header';
import Home from '../pages/home';
import React from 'react';
import ReactDOM from 'react-dom';
import { createGlobalStyle } from 'styled-components';
import { render, screen } from '@testing-library/react';
import { useEffect, useState } from 'react';
import * as E from '../config/enums';
import * as S from './styles';
import * as T from '../config/types';

✔️

import React, { useEffect, useState } from 'react';
import { render, screen } from '@testing-library/react';
import axios from 'axios';
import ReactDOM from 'react-dom';
import { createGlobalStyle } from 'styled-components';

import * as S from './styles';
import Footer from '../components/footer';
import Header from '../components/header';
import * as E from '../config/enums';
import * as T from '../config/types';
import About from '../pages/about';
import Contact from '../pages/contact';
import Home from '../pages/home';