vite typescript vuejsで@/でsrc配下が補完されない

確認すべき点のまとめ

• tsの場合include[]の文言をtsconfig.jsonへ追加
• jsの場合プロジェクト直下にjsconfig.jsonを追加

以上で私の場合は@/が補完されるようになりました。

vscodeの拡張機能をinstall

• Vue Language Features (Volar)
• TypeScript Vue Plugin (Volar)

ts使わないパターン

vscodeの設定ファイルに追記（必要かよくわかってないが手順としてやったので一応メモ）

.vscode/settings.json

{
    // ...
    //@補完が聞くように
    "typescript.tsdk": "node_modules/typescript/lib",
    "editor.quickSuggestions": {
      "strings": true
    },
    "javascript.suggest.paths": true,
    "typescript.suggest.paths": true,
    
    "typescript.preferences.importModuleSpecifier": "shortest",
    "javascript.preferences.importModuleSpecifier": "shortest",
    "eslint.validate": ["javascript", "javascriptreact", "vue"],
    "editor.formatOnSave": true,

    "recommendations": ["Vue.volar"]
    // ...
}

プロジェクト直下にjsconfig.jsonの作成

• 私のプロジェクトの場合下記構成になっています。
• Djangoとvueを一つのプロジェクトフォルダにまとめています。
• 各環境に読み解いてください。

project
 L frontend
    L src
    L jsconfig.json //本来vueプロジェクトを作るとここに作られる
 L backend
 L jsconfig.json //※プロジェクト直下のここに追加

jsconfig.json(tsを使わない場合）

project/jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".", // .をベースパスに設定
    "paths": {
      "@/*": [
        "frontend2/src/*"
      ] // @/はvuejs/frontend2/src/を指す
    }
  },
  "include": [
    "frontend2/src/**/*"
  ] // srcフォルダ内の全ファイルを含める
}

typescriptの場合はこうでした・・・

.vscode/settings.json

{
  // ...
  "typescript.tsdk": "frontend/node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  "typescript.suggest.paths": true,
  "javascript.suggest.paths": true,
  "volar.tsPlugin": true,
  "volar.tsPluginStatus": true
  // ...
}

project
 L .vscode
    L settings.json
 L frontend
    L src
    L tsconfig.json //本来vueプロジェクトを作るとここに作られる
 L backend
 L tsconfig.json //こいつが別になくても動いた・・・なぜ・・・

ということでフロントエンド直下のtsconfig.jsonをせってい

frontend/tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["vuetify"]
    // 他の設定...
  },
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "include": [ //こいつがキー設定だった！！！
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

なんとかこれで動くはずです！！！！