Pular para o conteúdo

Aliases

Um alias é uma maneira de criar atalhos para as suas importações.

Os aliases podem ajudar a melhorar a experiência de desenvolvimento em bases de código com muitos diretórios ou importações relativas.

src/pages/sobre/empresa.astro
---
import Botao from '../../components/controles/Botao.astro';
import logoUrl from '../../assets/logo.png?url';
---

Nesse exemplo, um desenvolvedor precisaria entender a relação de árvore entre src/pages/sobre/empresa.astro, src/components/controles/Botao.astro e src/assets/logo.png. E então, se o arquivo empresa.astro fosse movido, essas importações também precisariam ser atualizadas.

Você pode adicionar aliases de importação a partir de tsconfig.json ou jsconfig.json.

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"]
    }
  }
}

O servidor de desenvolvimento será reiniciado automaticamente após essa alteração de configuração. Agora você pode importar usando os aliases em qualquer lugar do seu projeto:

src/pages/sobre/empresa.astro
---
import Botao from '@components/Botao.astro';
import logoUrl from '@assets/logo.png?url';
---

Esses aliases também são integrados automaticamente ao VS Code e a outros editores.