T-CREATOR

VSCodeでTypescriptファイルのimport補完で相対パスではなくエイリアスするための設定

VSCodeでTypescriptファイルのimport補完で相対パスではなくエイリアスするための設定
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Visual Studio CodeでTypeScriptファイルのimport補完をエイリアスを使用して相対パスではなく行う設定は、主に以下のステップで行います。これにより、コードの可読性が向上し、ディレクトリ構造が変更された場合でも影響を受けにくくなります。

tsconfig.json でのエイリアス設定

プロジェクトのルートにある tsconfig.json ファイルを開きます。ファイルが存在しない場合は、新しく作成してください。

compilerOptions セクションに baseUrl と paths を追加して、エイリアスを設定します。例えば、src フォルダを基点としてエイリアスを設定したい場合、以下のように記述します。

json# tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./", // プロジェクトのルートを基点に設定
    "paths": {
      "@/components/*": ["src/components/*"], // @/componentsエイリアスをsrc/components/にマッピング
      "@/utils/*": ["src/utils/*"] // @/utilsエイリアスをsrc/utils/にマッピング
    }
  }
}

VSCode の設定

VSCodeはtsconfig.jsonの設定を自動的に認識し、TypeScriptファイル内でのimport時にエイリアスに基づいた補完を提供します。特別なVSCodeの設定は必要ありません。ただし、エイリアスを設定した後にVSCodeを再起動することで、変更が正しく認識されるようになる場合があります。

エイリアスを使用したimport例

上記の設定後、以下のようにエイリアスを使用してモジュールをimportできるようになります。

typescriptimport { MyComponent } from "@components/MyComponent";
import { utilityFunction } from "@utils/utilityFunction";

その他

  • エイリアスを使用すると、ビルドツールや他のツールがエイリアスを正しく解決できない場合があります。WebpackやBabelなどを使用している場合は、これらのツールにも同様のエイリアス設定を行う必要があります。
  • この設定はTypeScriptプロジェクトに特有のものです。JavaScriptプロジェクトで同様の機能を実現するには、Babelのmodule-resolverプラグインなどを使用する必要があります。

記事Article

もっと見る