aliases.mdx

title	description	i18nReady
Alias	Introducción a los alias en Astro.	true

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.

---
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.

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

:::note 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:

---
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.