VSCode Webpack别名跳转配置
webpack配置的别名路径，在VSCode开发工具中，无法通过按住Ctrl+单击鼠标左键的方式查看源文件或者通过import 导出的方法定义，影响了编码效率，其实这个问题不难解决，在项目根目录下添加一个jsconfig.json的配置文件，就可以了。先看看效果
image
jsconfig.json配置文件内容如下：
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"baseUrl": ".",
"jsx": "react",
"paths": {
"@src/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
踩过的坑
重点是"paths": { "@src/": ["./src/"]}这一句, 要看项目中的webpack.config.js配置了哪些别名，jsconfig.json中配置的别名要与webpack.config.js中一一对应
如果webpack中的别名是这样配置
resolve: {
extensions: ['.jsx', '.js', '.json'],
alias: {
'@src': resolve('../src'),
'@components': resolve('../src/components'),
'@utils': resolve('../src/utils'),
'@common': resolve('../src/config')
}
},
那么jsconfig.js应该这样配置
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"baseUrl": ".",
"jsx": "react",
"paths": {
"@src/*": ["./src/*"],
"@components/*": ["./src/components/*"],
"@utils/*": ["./src/utils/*"],
"@common/*": ["./src/config/*"]
}
},
"exclude": ["node_modules", "dist"]
}
