如何使 VS Code 支援 Ｗebpack Alias 的 ＠ ?

若使用相對路徑 Import Module，VS Code 的 Go to Definition 可以順利使用；但若使用 Webpack Alias 的 @ 時，VS Code 就會找不到 Module，該如何解決呢 ?

Version

VS Code 1.32.1

Vue 2.6.6

Vue CLI 3.4.1

Relative Path

import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}

Vue CLI 預設是以相對路徑載入 HelloWorld component，這種寫法 VS Code 的 Go to Definition (F12) 可以正常使用。

Webpack Alias

import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

若改用 Webpack Alias 的 @ ，他會指向專案的 src 路徑， yarn serve 與 yarn build 都可正常執行，但 VS Code 認不出 @ ，因此 Go to Definition 無法使用。

jsconfig.json

{
  "include": [
    "src/**/*"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

在專案根目錄下新增 jsconfig.json ，這個檔案告訴 JavaScript Language Service 目前目錄為 JavaScript 專案，並且設定 JavaScript 檔案的實際目錄與其他相關設定。

include：指定 JavaScript 實際目錄位置，Vue CLI 預設將所有 JavaScript 放在 src 目錄下，因此 src/**/* 表示 src 目錄下所有子目錄下的檔案

baseUrl：指定所有路徑的基本參考目錄， . 表示從專案的根目錄開始參考

paths：指定 Webpack Alias 的對應目錄，根據 baseUrl 的設定值繼續設定，因此 @/* 相當於 src/*

Conclusion

• 只要在專案根目錄加上 jsconfig.json ，並加上適當的設定，VS Code 也能看懂 Webpack Alias 的 @

Sample Code

完整範例可以在我 GitHub 上找到

Reference

VS Code , jsconfig.json

Vetuer, Setup