Alias

Un alias es una forma de crear atajos para tus imports.

Los alias ayudan a mejorar la experiencia de desarrollo en repositorios con muchas carpetas o importaciones relativas.

src/pages/about/company.astro

---
import Button from '../../components/controls/Button.astro';
import logoUrl from '../../assets/logo.png?url';
---

En este ejemplo, un desarrollador necesitaría comprender la relación de archivos entre src/pages/about/company.astro, src/components/controls/Button.astro y src/assets/logo.png?url. Y luego, si se moviera el archivo company.astro, estas importaciones también tendrían que actualizarse.

Puedes agregar alias de importación desde tsconfig.json o jsconfig.json.

tsconfig.json

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

Nota

Asegúrate de que compilerOptions.baseUrl esté configurado para que las rutas con alias se puedan resolver.

Con este cambio, ahora puedes importar usando los alias desde cualquier parte de su proyecto:

src/pages/about/company.astro

---
import Button from '@components/Button';
import logoUrl from '@assets/logo.png?url';
---

Estos alias también se integran automáticamente a VSCode y otros editores.