讓vscode讀懂alias path

Frontend, vscode
4 mins.
  1. 1. code
  2. 2. webpack
  3. 3. jsconfig
vscode webpack

在專案開發的時候，為了讓import的路徑短一點，通常都會用alias來處理，例如../../../components/Button會用@components/Button來做為取代

這邊不討論用auto import還是用alias的好壞

code

1
2
3
// import Button from '../../../components/Button';
// alias
import Button from '@components/Button';

webpack

首先我們會在webpack加上resolve的設定

相關資料可以參考官網

1
2
3
4
5
6
7
{
	resolve: {
		alias: {
			'@components': path.resolve(__dirname, 'src/components')
		}
	}
}

這樣的設定是為了讓編譯看的懂，但是vscode還是看不懂，當你滑鼠移動到 @components/Button 就無法知道真正的路徑，也沒辦法快速的用f12移動到檔案中看內容

jsconfig

為了要能夠讓vscode讀懂alias，可以在根目錄底下建立jsconfig.json，在裡面加上下面的設定，儲存後不用重開只要等個幾秒，就可以測試是不是有效了！

相關資料可以參考官網

1
2
3
4
5
6
7
8
9
10
{
  "compilerOptions": {
    "target": "es2017",
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"]
    }
  },
  "exclude": ["node_modules"]
}

在我的專案中，如果只有設定baseUrl和paths是沒有效果的，必須要搭配上target才能正確的解析，在使用上需要注意一下，避免設定完了結果還是不會work

prev： next：