Astroでパスエイリアス設定

概要

Astroのtsconfig.jsonファイルでパスエイリアス（Path Aliases）を設定することで、importパスのショートカットを作成できる。これにより、相対パスを使った冗長なimport文を簡潔にできる。

設定方法

tsconfig.jsonのcompilerOptionsセクション内で以下のように設定する：

{
  // Astroの厳密な型設定を継承
  "extends": "astro/tsconfigs/strict",
  "include": [
    ".astro/types.d.ts",  // Astroの型定義ファイル
    "**/*"                // すべてのファイルを対象
  ],
  "exclude": [
    "dist"  // ビルド出力ディレクトリを除外
  ],
  "compilerOptions": {
    "baseUrl": ".",  // 基準となるディレクトリ
    "paths": {
      // src ディレクトリのエイリアス
      "@src/*": [
        "src/*"
      ],
      // layoutsディレクトリのエイリアス
      "@layouts/*": [
        "src/layouts/*"
      ],
      // componentsディレクトリのエイリアス
      "@components/*": [
        "src/components/*"
      ],
      // assetsディレクトリのエイリアス
      "@assets/*": [
        "src/assets/*"
      ],
      // stylesディレクトリのエイリアス
      "@styles/*": [
        "src/styles/*"
      ]
    }
  }
}

使用例

パスエイリアスを使用することで、以下のようにimport文を簡潔にできる：

// 従来の相対パス
import Layout from '../../layouts/BaseLayout.astro';

// パスエイリアス使用
import Layout from '@layouts/BaseLayout.astro';

この設定により、深い階層にあるファイルからのimportも分かりやすくなり、ファイル移動時のパス修正も簡単になる。