携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情
前言
大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了，他真的来了~
正文
看标题知内容，本文就是讲的怎样在项目中使用自定义路径编辑器也可以快捷跳转
我们知道
import { Outlet } from 'react-router-dom';
import styles from './index.scss';
以上的写法都可以在编辑器中正常快捷跳转，一般业务开发中非常方便
但一般我们还会自定义很多路径简写，比如
import { navTo } from '@utils/navigation';
import { getMapiHeaders, request } from '@/utils/request';
比如我们webpack中会配置
resolve: {
alias: {
'@': '/src',
'@utils': '/src/utils',
'utils': '/src/utils',
'@components': '/src/components',
'@assets': '/src/assets',
'@pages': '/src/pages',
'@core': '/src/core',
'core': '/src/core',
},
// ...
},
所以使用时可以快捷使用@/index.js、@utils等
写是写的方便了，但是调试时来回跳转文件时却貌似没办法正常跳转，因为这些路径是我们webpack中自定义的路径
而这些路径却是编辑器没办法识别的
这是我们鼠标移动到这些路径上时发现没有任何路径信息的提示，当然cmd + 左键也是没任何反应的，比如下面的
那怎样让编辑器识别到呢？
借助tsconfig让浏览器识别自定义路径
可以借助ts的编译配置中的个别选项来帮助浏览器识别这些自定义路径
当然不止可以通过ts的编译配置来设置，通过vscode的设置或者其他的编译类配置依然可以实现类似的功能
直接上代码吧，并不复杂
{
"compilerOptions": {
// ...
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"@utils/*": ["src/utils/*"],
"@/utils/*": ["src/utils/*"],
"utils/*": ["src/utils/*"],
"@components/*": ["src/components/*"],
"@/components/*": ["src/components/*"],
"components/*": ["src/components/*"],
"@assets/*": ["src/assets/*"],
"@/assets/*": ["src/assets/*"],
"assets/*": ["src/assets/*"],
"@pages/*": ["src/pages/*"],
"@/pages/*": ["src/pages/*"],
"pages/*": ["src/pages/*"],
"@core/*": ["src/core/*"],
"@/core/*": ["src/core/*"],
"core/*": ["src/core/*"],
},
"allowJs": true
},
}
这里关键的就是baseUrl、paths与allowJs
之后我们看效果，鼠标移动上去会发现已经正常出现了路径信息
这是cmd + 左键也可以正常跳转
结语
如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~
文章如有错误或不严谨之处，还望指出，感谢感谢！！！
往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」
