Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ao trabalhar com projetos em NextJS, especialmente na versão 13.x, um dos desafios enfrentados pelos desenvolvedores é manter a consistência nas importações, principalmente ao usar autoimportação do VSCode. A configuração padrão muitas vezes não favorece o uso de aliases definidos em tsconfig.json ou jsconfig.json, o que pode gerar uma dispersão na estrutura de importações e dificultar a manutenção.
Por padrão, a ferramenta de autoimportação do VSCode tende a gerar caminhos relativos ou absolutos, dependendo das configurações do ambiente. Isso cria um cenário onde, ao importar componentes de um mesmo nível de pastas ou de pastas diferentes, o desenvolvedor precisa editar manualmente o caminho para usar o alias, como '@/components' ao invés de './components'. Com o crescimento do projeto, essa inconsistência aumenta o risco de erros e dificulta refatorações. A decisão fica mais saudável quando o time consegue medir o impacto depois.
A primeira etapa para resolver esse problema é verificar se suas configurações de alias estão corretas no arquivo de configuração do TypeScript. É importante que as rotas estejam bem definidas em 'paths' no tsconfig.json, como:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}Depois, é preciso ajustar as preferências do VSCode. Na aba de configurações do usuário ou do workspace, procure por "Import Module Specifier". Essa configuração controla como o VSCode gera os caminhos nas importações automáticas. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta.
Para garantir que o autoimport utilize sempre os aliases definidos, você deve alterar as configurações do VSCode para usar "non-relative". Isso pode ser feito de duas formas:
1. Via interface gráfica:
2. Via arquivo settings.json:
{
"typescript.preferences.importModuleSpecifier": "non-relative",
"javascript.preferences.importModuleSpecifier": "non-relative"
}Essa configuração força os autoimports a usarem o alias em todas as situações, incluindo componentes irmãos ou de níveis diferentes. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois. Sem esse critério, a solução pode parecer simples no começo e cara no suporte.
É importante lembrar que, para que essa configuração funcione, o seu projeto deve estar corretamente configurado com os aliases no tsconfig.json. Além disso, é preciso garantir que o VSCode esteja atualizado e que o plugin do TypeScript esteja habilitado. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.
Outro ponto é que, em projetos muito grandes, essa mudança pode impactar na performance do autoimport, pois o VSCode precisará resolver os aliases em tempo real, especialmente se sua configuração de paths for extensa ou complexa. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.
Seguindo esses passos, a manutenção do projeto deve ficar mais fluida, com importações mais limpas e uma estrutura mais fácil de alterar futuramente. Essa prática não só melhora a legibilidade do código, mas também reduz o risco de erros na hora de realizar refatorações ou atualizações de arquitetura. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta.
Eu testaria isso pequeno antes de virar padrão.
O detalhe que pouca gente coloca na conta é teste pequeno. Dá para animar com React/Next, mas alguém vai ter que sustentar isso no dia a dia ahahaha
Pra mim isso depende muito de quem vai cuidar quando sair do post e virar rotina do time.
aham, ajudou pra cacete quando o time mede o antes e depois. Sem isso, vira só sensação boa de demo.
Gosto quando a discussão sai do demo. Em React/Next, eu colocaria teste pequeno, responsável claro e caminho para voltar atrás.
Boa, mas eu tomaria cuidado com a parte invisível. O primeiro ganho aparece rápido, a manutenção só aparece depois.