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プラグインなどを使用する必要があります。
- review
もう「なんとなく」で決めない!『解像度を上げる』馬田隆明著で身につけた、曖昧思考を一瞬で明晰にする技術
- review
もう疲れ知らず!『最高の体調』鈴木祐著で手に入れた、一生モノの健康習慣術
- review
人生が激変!『苦しかったときの話をしようか』森岡毅著で発見した、本当に幸せなキャリアの築き方
- review
もう「何言ってるの?」とは言わせない!『バナナの魅力を 100 文字で伝えてください』柿内尚文著 で今日からあなたも伝え方の達人!
- review
もう時間に追われない!『エッセンシャル思考』グレッグ・マキューンで本当に重要なことを見抜く!
- review
プロダクト開発の悩みを一刀両断!『プロダクトマネジメントのすべて』及川 卓也, 曽根原 春樹, 小城 久美子