前言
看很多大佬分享vscode插件,其中关于路径联想的插件Path Intellisense 或者 Path Autocomplete都是非常不错的,这两个插件功能几乎一样,配置方式也是大同小异,这里就那拿Path Autocomplete来举例说明如何配置vscode的路径自动联想吧!
步骤
1、配置 Path Autocomplete 插件
首先,我们要先安装Path Autocomplete插件。
然后,打开设置,setting.json,按下图举例配置好提示规则pathMappings
这个是我自己项目的配置模板,需要了解更多插件配置的可以阅读插件说明
path-autocomplete 插件文档
Path Intellisense插件的配置也是大同小异,这里说下区别,除了jsonKey不同之外,就是根目录的代指不同,其余都是一样的
2、配置jsconfig.json
配置这个的原因是因为为了提高开发体验,光有路径引导还不行,还需要文件??榈奶崾玖耄褂形募裙δ?,所以jsconfig的配置就是必要的了。
这里先贴出来官方文档解释,习惯看官方文档的直接前往就好,我会做简单的说明
jsconfig#_using-webpack-aliases
主要是这么几个配置,而我们用到的最主要的是
baseUrl
和paths
这两项,是告诉编辑器我们的查找路径规则的。
// 这里贴出我的jsconfig配置,和上面的插件配置对应
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"@css*": ["src/assets/css*"],
"@icon*": ["src/assets/icon/*"],
"@image*": ["src/assets/image/*"]
}
}
}
配置好之后,就可以在vue文件里面用起来啦!
此时,终于不用写那么多的../../。
这里小提示一下,js文件中引用路径直接用@/
就可以了,html文件引入图片地址的时候要用~@image
,别忘记前面的~
很多教程到这里就结束了,但实际上运行起来之后,会发现报错,原因是不识别
@
是个什么玩意?现在我们主流都是使用webpack打包的,所以我们需要让webpack也知道路径的命名规则!It is important!
3、配置configureWebpack
那Vue项目举例,我们需要配置vue.config.js文件,其中最主要的是configureWebpack
属性
const path = require('path');
function resolvePath(dir) {
return path.join(__dirname, dir);
}
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': resolvePath('src'),
'@icon': resolvePath('src/assets/icon'),
'@image': resolvePath('src/assets/image/'),
'@css': resolvePath('src/assets/css/')
}
}
}
};
做好这些之后,打包就会将@
处理成__dirname
,这样再按照我们之前的规则,一一添加别名就好了。
至此,就可以愉快的进行文件别名+自动路径提示的快捷开发流程了,赶快推荐给还不知道的小伙伴们吧!