Criar uma boa estrutura para o projeto é essencial para que nossa aplicação cresça organizada e seja fácil de localizarmos o que necessitamos, principalmente ao se trabalhar em um time.
Em projetos NextJS/React a tendencia é que nossos componentes importem não só pacotes mas também outros diversos componentes. Na maioria das vezes acabamos com importações como essa:
import Header from '../../../components/Header'
Podemos tornar isso mais simples utilizando alias para acessar as pastas que temos na aplicação.
Em suas últimas versões o NextJS tornou isso ainda mais simples, ainda mais para quem trabalha com o VSCode.
Na raiz do seu projeto crie o arquivo jsconfig.json
ou tsconfig.json
, caso seu projeto utilize Typescript.
{
compilerOptions: {
"baseUrl": "."
}
}
Com o baseUrl
definimos a pasta base do nosso projeto podendo assim alterar a importação para:
import Header from 'components/Header'
Paths
Por vezes utilizamos subpastas para nossos arquivos:
import Button from '../components/atoms/Button'
Utilizando o método anterior nossa importação ficaria:
import Button from 'components/atom/Button
Mas e se ainda pudermos deixar mais objetivo essa importação, diretamente para as subpastas do projeto?
Podemos fazer isso utilizando a propriedade paths
da seguinte maneira:
{
compilerOptions: {
"baseUrl": ".",
"paths": {
"@/components/*": ["components/*"],
"@/atoms/*": ["components/atoms/*"],
"@/molecules/*": ["components/molecules/*"],
"@/organisms/*": ["components/organisms/*"],
}
}
}
A partir de agora temos um caminho mais objetivo para os arquivos:
import Button from '@/atoms/Button'
Uma grande vantagem é que o próprio VSCode reconhece esse caminho, então quando realizamos importações automáticas dos nossos arquivos(utilizando cmd + espaço
ou ctrl + espaço
) é aplicado o valor que definimos no paths.
No site do VSCode você pode ver outras configurações que podem ser adicionadas ao jsconfig.json
e tsconfig.json
.
Configuração eslint
Se você estiver utilizando o eslint no seu projeto, e realmente espero que esteja, é necessário adicionar uma regra para que ele aceite os nosso atalhos sem retornar erro.
Existem diversas maneiras de se fazer isso e uma que acho simples é que ao adicionarmos algum símbolo as nossas importações, como o @, podemos usar a seguinte regra no eslintrc:
"rules": {
...,
"import/no-unresolved": ["error", { "ignore": ["^@"] }]
},
Pronto, agora o seu projeto está pronto para continuar, com um pouco mais de organização.
Top comments (0)