【@/】Viteの`path.alias`を使っている環境でVSCodeの参照コマンド(F12)を機能させる

問題

@/パスエイリアスでviteのインポートを制御する場合は多いと思う。

ただ一つ問題があり、VSCode上で参照【F12】コマンドが使えなくなってしまう。
なんでや！

解決

しかし、調べてみるとさすがVSCodeというべきか、対策が用意されていた。
https://code.visualstudio.com/docs/languages/jsconfig

ネット上はWebpackを使用する場合の例が多いが、viteでもしっかりと利用できた。

jsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
  ]
}

jsconfig.jsonはJavascriptルートに配置する

Vite環境の場合はだいたいプロジェクトルートに配置すれば良さそう。