VSCodeで開発時のインポート補完(TypeScript)を相対パスからエイリアスにする設定

この記事は公開されてから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
Mermaid を VS Code で快適に:拡張機能・ライブプレビュー・ショートカット設定
- article
VSCode 拡張との比較でわかる!Cursor を選ぶべき開発スタイル
- article
Cline × VSCode:最強の AI ペアプログラミング環境構築
- article
GitHub Copilot の設定大全:VS Code で精度を最大化する最適化手順
- article
Copilot×Cursorでプラグインがぶつかる!VSCode拡張競合エラーの見分け方と対策集
- article
VSCode で快適に使う ESLint 拡張機能ガイド
- article
TypeScript 型カバレッジを KPI 化:`type-coverage`でチームの型品質を可視化する
- article
TypeScript 公開 API の型設計術:`export type`/`interface`/`class`の責務分担と境界設計
- article
ESLint を Yarn + TypeScript + React でゼロから構築:Flat Config 完全手順(macOS)
- article
TypeScript 型縮小(narrowing)パターン早見表:`in`/`instanceof`/`is`/`asserts`完全対応
- article
TypeScript 共有可能な tsconfig 設計:`tsconfig/bases`で複数パッケージを一括最適化
- article
TypeScript ランタイム検証ライブラリ比較:Zod / Valibot / typia / io-ts の選び方
- article
Obsidian Vault 設計の教科書:個人用とチーム用を両立する情報区画
- article
Claude Code で発生する API Error: 401·{"type":"error", ...} Please run /login の対処法
- article
Nuxt クリーンアーキテクチャ実践:UI・ドメイン・インフラを composable で分離
- article
オフラインファースト設計:Zustand で楽観的 UI とロールバックを実現
- article
Nginx API ゲートウェイ設計:auth_request/サーキットブレーカ/レート制限の組み合わせ
- article
CI/CD で更新を自動化:GitHub Actions と WordPress の安全デプロイ
- blog
iPhone 17シリーズの発表!全モデルiPhone 16から進化したポイントを見やすく整理
- blog
Googleストアから訂正案内!Pixel 10ポイント有効期限「1年」表示は誤りだった
- blog
【2025年8月】Googleストア「ストアポイント」は1年表記はミス?2年ルールとの整合性を検証
- blog
Googleストアの注文キャンセルはなぜ起きる?Pixel 10購入前に知るべき注意点
- blog
Pixcel 10シリーズの発表!全モデル Pixcel 9 から進化したポイントを見やすく整理
- blog
フロントエンドエンジニアの成長戦略:コーチングで最速スキルアップする方法
- review
今の自分に満足していますか?『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来