Atalhos

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

Atalhos 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';
---

Neste exemplo, um desenvolvedor precisaria entender a árvore de relação entre src/pages/sobre/empresa.astro, src/components/controles/Botao.astro e src/assets/logo.png. E então, se o arquivo empresa.astro for movido para outro diretório, estas importações precisariam ser atualizadas.

Você pode adicionar um atalho de importação em 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.

Com esta alteração, você pode usar o atalho para importar seus arquivos em qualquer lugar do projeto:

src/pages/sobre/empresa.astro

---
import Botao from '@components/Botao.astro';
import logoUrl from '@assets/logo.png';
---

Estes atalhos são automaticamente integrados ao VS Code e a outros editores.