VSCode Webpack別名跳轉(zhuǎn)配置
webpack配置的別名路徑，在VSCode開發(fā)工具中秦叛，無法通過按住Ctrl+單擊鼠標(biāo)左鍵的方式查看源文件或者通過import 導(dǎo)出的方法定義，影響了編碼效率三圆，其實(shí)這個(gè)問題不難解決避咆，在項(xiàng)目根目錄下添加一個(gè)jsconfig.json的配置文件，就可以了查库。先看看效果
image
jsconfig.json配置文件內(nèi)容如下：
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"baseUrl": ".",
"jsx": "react",
"paths": {
"@src/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
踩過的坑
重點(diǎn)是"paths": { "@src/": ["./src/"]}這一句, 要看項(xiàng)目中的webpack.config.js配置了哪些別名樊销，jsconfig.json中配置的別名要與webpack.config.js中一一對(duì)應(yīng)
如果webpack中的別名是這樣配置
resolve: {
extensions: ['.jsx', '.js', '.json'],
alias: {
'@src': resolve('../src'),
'@components': resolve('../src/components'),
'@utils': resolve('../src/utils'),
'@common': resolve('../src/config')
}
},
那么jsconfig.js應(yīng)該這樣配置
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"baseUrl": ".",
"jsx": "react",
"paths": {
"@src/*": ["./src/*"],
"@components/*": ["./src/components/*"],
"@utils/*": ["./src/utils/*"],
"@common/*": ["./src/config/*"]
}
},
"exclude": ["node_modules", "dist"]
}
