実現したいこと

VSCode を使い JavaScript の import 文にあるファイルにすぐに飛びたいです。

発生している問題

import 文にあるURLに対して [Ctrl + クリック] すると、実際にそのファイルはあるのに、ファイルが見つからなかったため、エディターを開くことができませんでした。 という表示になってしまいます。

試したこと➀

相対パスのファイルは [Ctrl + クリック] で飛べました。
さらに先頭に / がない場合も [Ctrl + クリック] で飛べましたが、これではブラウザでエラーになります。

以下に整理します。

相対パス

import fileName from "./file-name.js"
✅ VSCode で飛べる
✅ ブラウザで正しく動作する

絶対パス (先頭に `/` アリ)

import fileName from "/path/to/file/file-name.js"
🚫 VSCode で飛べない
✅ ブラウザで正しく動作する

絶対パス (先頭に `/` ナシ)

import fileName from "path/to/file/file-name.js"
✅ VSCode で飛べる
🚫 ブラウザでエラー（Uncaught TypeError: Failed to resolve module specifier）

試したこと➁

ChatGPTに聞いて、settings.json に以下を記述しましたが、特に変化はありませんでした。
（尚 settings.json にある他の記述は有効なので、settings.json 自体は正常に読めています。）

JSON
1{
2    "typescript.preferences.importModuleSpecifier": "relative", 
3    "typescript.updateImportsOnFileMove.enabled": "always"
4}

試したこと➂

ChatGPTに聞いて、jsconfig.json に以下を記述しましたが、特に変化はありませんでした。
(尚 jsconfig.json を作るのは初めてで、VSCode を立ち上げて [Ctrl + K] [Ctrl + O] で指定したディレクトリ "project" の直下に置いています。)

JSON
1{
2    "compilerOptions": {
3        "baseUrl": "./project"
4    }
5}

または以下を記述しても変化はありませんでした。

JSON
1{
2  "compilerOptions": {
3    "baseUrl": "."
4  },
5  "include": ["./**/*.js"]
6}

試したこと➃

[Ctrl + Shift + P] を押して表示される入力ボックスに ">Go to File" と入力し [Enter] を押すとファイル一覧が表示され、それらの絶対パスには先頭に / がない状態で全て表示されました。
どうやら VSCode の視点では「先頭に / がないものがファイルだよね」と認識しているような感じでしょうか・・？これが正常なのか、変更の方法はあるのか、は調査できませんでした。

試したこと➄

ChatGPTに聞いて、Path Intellisense を導入した上で、settings.json に以下を記述しましたが、特に変化はありませんでした。

JSON
1{
2  "path-intellisense.absolutePathToWorkspace": true
3}

前提

Windows を使いたい。
VSCode を使いたい。
相対パス・絶対パスいずれの import 文でも飛べる様にしたい。
操作方法は [Ctrl + クリック] でなくとも構わない。
TypeScript や Node.js は使わない。

以上です。
よろしくお願い致します。

maisumakun

2025/05/04 13:15

JavaScriptは何かしらのツールの処理にかけていますか？それとも、書いたJavaScriptを直接ブラウザから読んでいますか？

munekun

2025/05/04 13:28

コメントありがとうございます。 > JavaScriptは何かしらのツールの処理にかけていますか？ツールの処理というのが何を指すかわからないので、おそらくかけていないと思います。JavaScriptに何かをするツールというのがいまいち思い当たらないのですが、例えば webpack (?) とやらでしょうか？まったく使ったことがないレベルで、VanillaJS のみを使っています。 > 書いたJavaScriptを直接ブラウザから読んでいますか？ JavaScript はFTPソフトからレンタルサーバーにアップロードして、レンタルサーバーに紐づいているドメインにアクセスして、ブラウザで読んでいます。恐れ入りますが１つよろしいでしょうか？このようにVSCodeで飛べないというのは通常のことなのですか？それとも何かおかしいのでしょうか？

maisumakun

2025/05/04 13:40

このような書き方をしたことがない（パスは全部相対バスで書いて、WebpackやViteで処理する体系しかやったことがない）ので、どんな挙動が正しいのかはコメントできないです。

YT0014

2025/05/04 14:17

VSCode の機能・設定の問題だと思われますので、タグ「Visual Studio Code」を追加されることをお勧めします

munekun

2025/05/05 01:13

maisumakunさま、ご返答ありがとうございます。 > このような書き方をしたことがないそうなのですか！？私はまだ VSCode にも import にも慣れておらず、とりあえず絶対パスで書いておこうという程度の使い方でした・・

munekun

2025/05/05 01:14

YT0014さま、たしかに、そうですよね。ご指摘ありがとうございます。さっそく追加しておきました。

maisumakun

2025/05/05 10:17 編集

> そうなのですか！？私はまだ VSCode にも import にも慣れておらず、とりあえず絶対パスで書いておこうという程度の使い方でした・・あくまで個人的な事情ですが、簡単なスクリプトをサッと書くならモジュールにしないし、逆に大掛かりなスクリプトを書きたいなら（TypeScriptやnpmも動員したいので）バンドラーのある環境を立ち上げる、となるので、「ブラウザで動かすES Moduleを直接書く」という機会がなかったのです。