エイリアスを設定したのにVS Codeでジャンプできなかった原因Why VS Code Could Not Navigate Despite Path Aliases Being Configured
匿名の公開いいねです。記事の保存・お気に入りではなく、Featured、Top 3、重要度、掲載順位には影響しません。仕組みとプライバシーAnonymous public likes are reactions, not saved articles or bookmarks. They do not affect Featured, Top 3, importance, or listing order.How it works and privacy
- VS Codeの定義ジャンプには、Viteのresolve.aliasに加えてjsconfig.jsonのpathsにも対応付けが必要です。
- 両方を正しく設定すれば、@utilsなどの参照先へ移動でき、開発効率が向上します。
- VS Code requires aliases in jsconfig.json as well as Vite's resolve.alias for Go to Definition.
- Aligning both mappings restores navigation for @utils and similar imports.
本ページの本文と要約は AI による自動生成です。日本語版と英語版は言語ごとに独立して生成されるため、表現や詳しさが異なる場合があります。正確性は元記事 (qiita.com) をご確認ください。The body and summaries are AI-generated independently for each language, so wording and detail may differ. Verify accuracy at the original source (qiita.com).
要約と収集メタデータに基づく AI 解説。元記事全文の転載・翻訳ではありません。AI explainer based on the summaries and collected metadata, not a copy or translation of the full source article.
Vite環境でパスエイリアスを設定していても、VS Codeの定義ジャンプが機能しない場合がある。原因は、ビルドツール向けの設定とエディタ向けの設定を混同し、VS Codeが参照する対応付けが不足していたことだった。
定義ジャンプの差
開発中、@hooksや@modulesなどの参照は、VS Code上でCmd＋クリックすると定義元ファイルへ移動できていた。WindowsではCtrl＋クリックに相当する。一方、@utilsなどでは同じ操作をしてもジャンプできない現象が起きていた。
エイリアス自体は、vite.config.jsのresolve.aliasに記述されていた。@hooksをresources/js/hooks、@modulesをresources/js/components/modules、@utilsをresources/js/utils、@apiをresources/js/apiへ対応付ける設定である。
設定の読み手
問題は、vite.config.jsに書けばVS Codeでも認識されると思い込んでいた点にある。vite.config.jsのresolve.aliasはVite向けの設定であり、VS Codeの定義ジャンプに必要な設定とは読み手と目的が異なる。
そのため、Vite側でエイリアスが解決できる状態でも、それだけではエディタ上の参照先移動に必要な情報がそろわない。VS Code向けには、jsconfig.json側にも同じエイリアスの対応関係を記述する必要がある。
pathsへの追加
対応は、プロジェクトルートにあるjsconfig.jsonを開き、compilerOptions.pathsへ不足していたエイリアスを追加することだ。プロジェクトルートはpackage.jsonと同じ階層で、jsconfig.jsonの代わりにtsconfig.jsonを使用する構成も示されている。
vite.config.jsのresolve.aliasとjsconfig.jsonのpathsの対応付けをそろえることで、@utilsなどから参照先へ定義ジャンプできるようになる。
VS Code Definition Navigation
Path aliases in a Vite environment can work for the build tool while still failing in VS Code’s Go to Definition navigation. Correctly aligning the relevant configuration files restores navigation to imports such as @utils and can improve development efficiency.
The issue appeared when using Cmd + click in VS Code, or Ctrl + click on Windows. Aliases including @hooks and @modules could navigate to their definition files, while another configured alias did not behave as expected.
vite.config.js and jsconfig.json
The cause was a mix-up between configuration intended for the build tool and configuration read by the editor. The aliases had been added to resolve.alias in vite.config.js, including mappings for @hooks, @modules, @utils, and @api.
Those entries mapped the aliases to directories under resources/js. For example, @hooks pointed to resources/js/hooks, @modules to resources/js/components/modules, @utils to resources/js/utils, and @api to resources/js/api.
However, defining these mappings in vite.config.js alone did not provide VS Code with everything required for definition navigation. The missing configuration was the corresponding alias entry in jsconfig.json.
compilerOptions.paths
The required fix is to open jsconfig.json, or tsconfig.json, at the project root on the same level as package.json. Any alias missing from the editor configuration must then be added under compilerOptions.paths.
The distinction is the reader and purpose of each file. Vite uses resolve.alias from vite.config.js, while VS Code relies on the path mappings supplied through jsconfig.json or tsconfig.json for navigation.
Both sets of mappings therefore need to correspond. Once @utils and similar aliases are represented in both Vite’s resolve.alias and compilerOptions.paths, VS Code can navigate from those imports to their referenced files.
ポコとTECHガイドPoko & TECH Guide
ポコと当サイトのTECHガイドが、記事の要約と収集した情報から読みどころを語るAI生成の対話です。Poko and TECH Dashboard's own TECH Guide discuss the article's highlights in an AI-generated conversation based on its summary and collected source details.
- ポコPokoコードを書いているとき、普段の作業はどう変わるの？ @utilsを見つけやすくなる？How does this change my day-to-day coding? Does it make imports like @utils easier to track down?
- TECHガイドTECH GuideVS Codeで@utilsなどをCmd＋クリック、WindowsならCtrl＋クリックすると、参照先へ移動できるよ。ファイルを探す手間を減らせるね。In VS Code, Cmd-clicking @utils—or Ctrl-clicking on Windows—can take you to its source. That means less time spent hunting for files.
- ポコPokoでも、Viteにエイリアスを書いていたなら、前はどうしてジャンプできなかったの？ ほかのエイリアスは動いていたんだよね。But if the alias was already set in Vite, why couldn’t VS Code jump to it? The other aliases were working, right?
- TECHガイドTECH GuideViteのresolve.aliasはビルドツール向けで、VS Codeの定義ジャンプにはjsconfig.jsonのpathsも必要だったんだ。@utils側の記述が漏れていたよ。Vite’s resolve.alias is for the build tool, while VS Code also needs the mapping under paths in jsconfig.json. The @utils mapping was missing there.
- ポコPokoなるほど。いちばんの収穫は、ViteだけでなくVS Code向けにも同じ対応付けを書くことなんだね。Got it. My main takeaway is that the same alias mapping needs to be set up for VS Code, not just Vite.
- TECHガイドTECH Guideうん。次はプロジェクトルートのjsconfig.json、またはtsconfig.jsonで、compilerOptions.pathsに不足がないか確認だね。Exactly. Next, check compilerOptions.paths in jsconfig.json—or tsconfig.json—at the project root and make sure no alias mappings are missing.
