Configurando caminho absoluto

Vamos lá 👨‍💻

Uma das coisas que são chatas durante o desenvolvimento é lidar com caminhos dentro do projeto. Quem nunca se viu lidando com imports como:

import image from '../../../assets/logo.png';
// or
import StyledInput from '../../../../components/StyledInput';

Imagine que você mude os diretórios, iria quebrar o código. Para evitar isso e também pensando em manutenibilidade de código podemos melhorar isso.

Primeiro vamos adicionar babel plugin root import

Estarei utilizando yarn, mas você pode utilizar npm também.

 yarn add babel-plugin-root-import -D
 // or
 npm install babel-plugin-root-import -D

Agora precisamos criar o arquivo babel.config.js no diretório raiz, caso ele já exista apenas altere.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathPrefix: '~',
        rootPathSuffix: 'src',
      },
    ],
  ],
};

🙂 Agora já deve estar funcionando imports como:

import logo from '~/assets/logo.png'
// or
import StyledInput from '~/components/StyledInput';

😟 Você deve ter percebido que o intellisense que sugere o autocomplete não estará funcionando, isso porque o VSCODE não entende a alteração que fizemos. Para resolvermo isso precisamos criar um novo arquivo chamado jsconfig.json na raiz do projeto.

{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}

Siga este passo caso esteja utilizando eslint

Precisamos instalar a seguinte biblioteca, para arrumar os erros do eslint:

yarn add eslint-import-resolver-babel-plugin-root-import -D
// or
npm install eslint-import-resolver-babel-plugin-root-import -D

No arquivo .eslintrc.js adicione o código

settings: {
    'import/resolver': {
      'root-import': {
        rootPathPrefix: '~',
        rootPathSuffix: 'src',
        extensions: ['.js', '.android.js', '.ios.js'],
      },
    },
  },

😎 Agora tudo deve estar funcionando.

Caso tenha alguma dúvida pergunte nos comentários 🙋‍♂️