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
Copilot×Cursorでプラグインがぶつかる!VSCode拡張競合エラーの見分け方と対策集
- article
VSCode で快適に使う ESLint 拡張機能ガイド
- article
VSCodeで開発時のインポート補完(TypeScript)を相対パスからエイリアスにする設定
- article
Next.js のTypeScriptプロジェクトへeslint、stylelint、prittierを導入してVSCodeで自動フォーマットするまでの手順
- article
VS Code(Visual Studio Code)v1.57へバージョンアップ時の制限モード(Workspace Trust)のダイアログの対処
- blog
うちのチーム、これやってない?アジャイル開発を腐らせる、ありがちなアンチパターン 10 選と処方箋
- blog
CD パイプラインを構築して、開発チームを「リリース疲れ」から解放しよう
- blog
見積もりが全然当たらないあなたへ。プランニングポーカーで楽しく、納得感のある見積もりをするコツ
- blog
「QA は最後の砦」という幻想を捨てる。開発プロセスに QA を組み込み、手戻りをなくす方法
- blog
ドキュメントは「悪」じゃない。アジャイル開発で「ちょうどいい」ドキュメントを見つけるための思考法
- blog
「アジャイルコーチ」って何する人?チームを最強にする影の立役者の役割と、あなたがコーチになるための道筋
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来
- review
人類はなぜ地球を支配できた?『サピエンス全史 上巻』ユヴァル・ノア・ハラリが解き明かす驚愕の真実
- review
え?世界はこんなに良くなってた!『FACTFULNESS』ハンス・ロスリングが暴く 10 の思い込みの正体
- review
瞬時に答えが出る脳に変身!『ゼロ秒思考』赤羽雄二が贈る思考力爆上げトレーニング
- review
関西弁のゾウに人生変えられた!『夢をかなえるゾウ 1』水野敬也が教えてくれた成功の本質
- review
「なぜ私の考えは浅いのか?」の答えがここに『「具体 ⇄ 抽象」トレーニング』細谷功