Astro フレームワークでパスエイリアスを利用する

はじめに

Astro プロジェクトの tsconfig.json へ設定を行いパスエイリアスを設定します。
パスエイリアスを利用することで、長い相対パスを避け、コードを読みやすくします。

パスエイリアスの設定

tsconfig.json の compilerOptions へ以下を追加します。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  }
}

パスエイリアスを利用した記載方法

以下のような記載が可能になります。

- import Layout from "../../layouts/Layout.astro";
+ import Layout from "~/layouts/Layout.astro";