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
もっと見る- article
NestJSでバリデーションエラーをログ出力する設定を紹介
- article
NestJSで作成したAPIのレスポンスヘッダーに付与されるx-powered-by: Express を消す方法を紹介
- article
Next.jsで環境変数に別の変数を利用し柔軟に管理するdotenv-expandの活用法を紹介
- article
【2025年3月版】Cursor ProとAPI利用比較。 Claude・GPT-4o・o1・GPT-4.5の損益分岐点と選び方
- article
フォーム入力情報からZodを利用してDTO作成しへ変換処理を実施するやり方を紹介
- article
Zodバリデーションのエラーメッセージを日本語化すやり方を紹介