问题背景
- 带@的映射路径无法用快捷键跳转到对应位置。
解决
- 在根目录创建@的对应映射文件,命名可以随意,为了见文知意我命名为
gotoimport.js
。
//gotoimport.js const path = require('path') function resolve(dir) { return path.join(__dirname, dir); } module.exports = { resolve: { alias: { '@': resolve('src'), }, }, };
在webstorm或者idea中设置找到文件(File)->设置(Setting)->语言与框架(Languages & Frameworks)->JavaScript->Webpack,填入gotoimport.js文件的路径。
3. 成功
注意
- 该方法只在webstorm或idea编辑器中生效。
- Vue项目同样可以在webstorm或idea中如此设置,且Vue项目在vscode编辑器还可以通过jsconfig.json配置直接实现跳转。
{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["./src/*"] }, "allowSyntheticDefaultImports": true }, "exclude": ["node_modules"] }