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.

El servidor de desarrollo se reiniciará automáticamente tras este cambio de configuración. Ahora puedes importar usando los alias en cualquier parte de tu 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.