VSCode打開webpack項目，無法對@指向的文件使用“轉到定義”，怎么辦？

前言

現在前端最流行的編輯器無疑是VSCode，但是它默認是無法跳轉類似於@/assets/a.js這樣的路徑的，怎么辦？

使用jsconfig.json

jsconfig.json是VSCode自帶的一個配置文件，默認不生成這個文件，需要自己創建。官方文檔說的很清楚，盡管是英文文檔：

https://code.visualstudio.com/docs/languages/jsconfig

它的原理是，根據文檔配置這個json，然后放到項目的根目錄里面，重啟VSCode，然后右擊@/assets/a.js這樣的路徑，就會發現，可以正常用了。

做法

1. 在項目根目錄創建一個文件叫jsconfig.json。
2. 填入內容：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "target": "ES6",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3. 重啟VSCode。
4. 右擊一個類似於@/assets/a.js的代碼，點擊“轉到定義”。你會發現，可以用了。

還可以繼續深挖jsconfig.json的其他用途，看文檔即可。

轉向缺省后綴名的.vue文件無效

當指向的是.vue文件，但@/assets/a又缺省了后綴名，這時候也是轉向無效的，所以要么寫成@/assets/a.vue 的形式，要么就要考慮修改jsconfig.json的paths配置，但是我不會改，諸位自行研究吧。

不過寫成.vue全路徑並不是一個壞習慣，畢竟寫明確一些並不費時間，而且代碼更一目了然。

歡迎捐贈