Como configurar caminhos absolutos em sua aplicação.

Em nossa vivência de projeto, algumas arquiteturas de pastas favorecem nosso entendimento de cada módulo do projeto.

No entanto, algumas situações podem nos levar a caminhos extensos, de difícil entendimento e que necessitam obrigatoriamente de se guiar pelo intellisense do vs-code (ou algo similar).

import { Module } from '../../../Folder'

Situações como esta podem se tornar comuns e cansativas ao importar um módulo/componente. E é aí que entra a magia dos caminhos absolutos para importação.

Em nosso arquivo jsconfig.json (ou tsconfig.json pra quem usa TypeScript) - vale ressaltar, se você não tem este arquivo, basta cria-lo na raiz do seu projeto e voilá! - precisamos inserir uma simples regra:

{
  "compilerOptions": {
    "baseUrl": "src" // <- Este é o nosso cara.
  },
  "include": ["src"]
}

Modificando nossa baseUrl, podemos definir qual será o caminho para importação, mudando totalmente a forma como importamos componentes dentro da nossa aplicação.

A mesma situação apresentada anteriormente pode se tornar:

import { Module } from 'components/Folder'

Onde components é uma pasta diretamente ramificada de src.

Espero que este breve artigo sirva de algum auxílio!

Comments

[Everton Souza]

Parabéns bem explicado e didático , conseguir resolve meu problemas rapidinho .