Caminhos absolutos para imports no Expo, como fazer?
Tags: javascript, react, reactnative, expo
Published: 2019-11-14 22:24:20

---
title: "Caminhos absolutos para imports no Expo, como fazer?"
description: "Acabando com os '../../' ao importar componentes"
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0o0826lsyl1qlr2crqgg.png
tags: JavaScript, React, React-Native, Expo
---

Se você assim como eu usa a pasta `src` como `root` da aplicação, sabe que é bem chato importar componentes usando `../../` para isso, fora quando você resolve mover um componente que hora foi criado local, mas por conta de ser reutilizado em outros lugares, decidiu mover ele para uma pasta global, ao fazer isso, o import era quebrar.
A motivação para escrever esse post, veio porque resolvi esse _"problema"_, com algumas configurações no `babel.config.js` que vem por padrão em qualquer projeto **Expo**, abaixo descrevo os passos necessários para que você possa configurar o seu projeto, e poder usar poder usar `~/` e ao fazer isso, ele listar as pastas/arquivos na pasta `src` definindo ela como **root** no projeto.


Vamos começar instalando o [babel-plugin-root-import](https://github.com/entwicklerstube/babel-plugin-root-import) como uma dependência de desenvolvimento no projeto, abaixo um exemplo de como fazer isso!

```
yarn add -D babel-plugin-root-import

ou

npm install babel-plugin-root-import --sav-dev
```

Uma vez instalada a dependência, ~~_espero que tenha usado o yarn para isso_~~, vamos alterar o `babel.config.js`, por padrão ele vem assim:
```javascript
module.exports = function(api) {
  api.cache(false);
  return {
    presets: ['babel-preset-expo'],
  };
};
```
Mas iremos altera-lo e deixar dessa forma aqui:
```javascript
module.exports = function(api) {
  api.cache(false);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'babel-plugin-root-import',
        {
          rootPathSuffix: 'src',
        },
      ],
    ],
  };
};

```
Com isso, incluímos o `babel-plugin-root-import` e definimos a pasta **src**, como sendo nosso `rootPath`. Boa parte já está feita, e para finalizar precisamos configurar o [VSCode](https://code.visualstudio.com/), para que ele entenda a configuração e passe a usar a pasta **src** de fato como sendo a raiz do projeto, e para isso, iremos criar na raiz do projeto um arquivo com o nome de `jsconfig.json` e incluir a configuração que mostro abaixo:
```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  }
}

```

E com isso finalizamos todas as configurações necessárias, algo que é relativamente simples, eu concordo. 

Se você seguiu todos os passos e não teve nenhum problema, ao importar um componente agora, bastará usar `~/` e o **VSCode** irá listar todas as pastas e arquivos dentro da **src**, na imagem abaixo um exemplo:

![Exemplo do resultado no VSCode ao importar um componente](https://thepracticaldev.s3.amazonaws.com/i/8pp5qemtr4qaep19x053.png)


### Considerações finais
Esse é o meu primeiro post, já peço desculpas por algo estranho nele, mas mesmo sendo algo bem simples, achei legal compartilhar e mais importante, pela primeira vez, senti a vontade e confiança para escrever.