新增 jsconfig.json

若使用相對路徑 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


1
2
3
4
5
6
7
8
import HelloWorld from './components/HelloWorld.vue'

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

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

Webpack Alias


1
2
3
4
5
6
7
8
9
import HelloWorld from '@/components/HelloWorld.vue'

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

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

jsconfig.json


1
2
3
4
5
6
7
8
9
10
11
12
13
{
"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

2019-03-09