Adios ../../../.. relative imports JS

Cada vez que creamos componentes, funciones, constantes o cualquier otra cosa en nuestro proyecto en React o cualquier otro framework, solemos hacerlo en la carpeta src , y cuando importamos estos archivos solemos hacerlo con las rutas relativas.

Suponiendo que tenemos nuestro proyecto de la siguiente manera:

 - src /
   - components /
      - Avatar /
         index.js
      - RoundedButton /
         index.js

Al importar nuestros componentes y/o funciones o cualquier archivo dentro de nuestra carpeta src, solemos hacerlos de la siguiente manera:

import RoundedButton from '../../components/RoundedButton'
import Avatar from '../../components/Avatar' 

Hacerlo de esta manera no implica una mala practica o que estes haciendo mal, el detalle es que entre mas crecen nuestros imports se ve mas sucio nuestro codigo en la parte superior. Que tal se verian nuestros imports de esta manera ? :

import RoundedButton from 'components/RoundedButton' 
import Avatar from 'components/Avatar' 

Se veria mas limpio no ?

Hacer estas importaciones es demasiado sencillo. En tu proyecto crea o edita el archivo jsconfig.json si usas Javascript o tsconfig.json si usas Typescript, y agrega las siguientes lineas:

{
   "compileOptions": {
      "baseUrl": "src"
   },
   "include": ["src"]
}

You are Ready ! Ahora puedes dejar de usar las rutas relativas y hacer las importaciones de tus archivos mas facil

import React from 'react'

import Avatar from 'components/Avatar'
import RoundedButton from 'components/RoundedButton'

const Panel = () => {
  return (
    <>
       <RoundedButton />
       <Avatar />
    <>
  )
}

Asi de sencillo es olvidarnos de las rutas relativas...

Nota: Esto funciona perfectamente sin hacer mas modificaciones en VSCode, para WebStorm e IntelliJ existe una configuracion para que funcione. Espero pronto actualizar este articulo y compartir como seria la configuracion en los IDE's de JetBrains

Este tip lo aprendi de Nilanth... Puedes ver su articulo original en el siguiente enlace:
https://dev.to/nilanth/no-more-import-in-react-2mbo