Skip to content

Latest commit

 

History

History
47 lines (37 loc) · 1.56 KB

aliases.mdx

File metadata and controls

47 lines (37 loc) · 1.56 KB
title description i18nReady
Aliases
An intro to aliases with Astro.
true

An alias is a way to create shortcuts for your imports.

Aliases can help improve the development experience in codebases with many directories or relative imports.

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

In this example, a developer would need to understand the tree relationship between src/pages/about/company.astro, src/components/controls/Button.astro, and src/assets/logo.png. And then, if the company.astro file were to be moved, these imports would also need to be updated.

You can add import aliases from either tsconfig.json or jsconfig.json.

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

:::note Make sure compilerOptions.baseUrl is set so the aliased paths can be resolved. :::

The development server will automatically restart after this configuration change. You can now import using the aliases anywhere in your project:

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

These aliases are also integrated automatically into VS Code and other editors.