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/*"]
    }
  }
}

Nota

Certifique-se de que compilerOptions.baseUrl foi definido para que assim os caminhos com aliases sejam resolvidos.

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.