webpack路徑別名識(shí)別
-
安裝path intellisence 設(shè)置圖標(biāo)--擴(kuò)展設(shè)置--setting.json
···
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}
···
image.png 重啟vscode
根目錄package.json同級(jí)添加jsconfig.js
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": [
"node_modules"
]
}
重啟vscode
webpack配置別名
config.resolve.alias.set('@', resolve('src/'))
- 重新運(yùn)行webpack
- 使用時(shí)注意需要點(diǎn)時(shí)間去加載，大概兩三秒，如果還沒反應(yīng)就證明沒設(shè)置對(duì)
安全起見還是先試下無(wú)別名訪問時(shí)加載提示目錄和文件速度，因?yàn)橛袝r(shí)vscode會(huì)卡住
函數(shù)注釋懸浮和定義跳轉(zhuǎn)
- 基于導(dǎo)入文件的路徑能被vscode識(shí)別，webpack路徑別名識(shí)別就成為了關(guān)鍵
- 光標(biāo)放在函數(shù)中芝加，按ctrl+alt或者F12
import customer from '@/api/customer' //前提是設(shè)置了path intellisense
// import customer from '../../../api/customer' //vscode懸浮提示時(shí)能往上查找到
