如何完美集成Path|如何完美集成Path Intellisense 或 Path Autocomplete 如何完美集成PathIntellisense或

前言
看很多大佬分享vscode插件，其中关于路径联想的插件Path Intellisense 或者 Path Autocomplete都是非常不错的，这两个插件功能几乎一样，配置方式也是大同小异，这里就那拿Path Autocomplete来举例说明如何配置vscode的路径自动联想吧！
步骤
1、配置 Path Autocomplete 插件首先，我们要先安装Path Autocomplete插件。
然后，打开设置，setting.json，按下图举例配置好提示规则pathMappings

文章图片
Path Autocomplete 配置
这个是我自己项目的配置模板，需要了解更多插件配置的可以阅读插件说明
path-autocomplete 插件文档
Path Intellisense插件的配置也是大同小异，这里说下区别，除了jsonKey不同之外，就是根目录的代指不同，其余都是一样的

文章图片
Path Intellisense配置
2、配置jsconfig.json 配置这个的原因是因为为了提高开发体验，光有路径引导还不行，还需要文件模块的提示联想，还有文件跳转等功能，所以jsconfig的配置就是必要的了。
这里先贴出来官方文档解释，习惯看官方文档的直接前往就好，我会做简单的说明
jsconfig#_using-webpack-aliases

文章图片
image.png
主要是这么几个配置，而我们用到的最主要的是 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/*"] } } }

【如何完美集成Path|如何完美集成Path Intellisense 或 Path Autocomplete】配置好之后，就可以在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，这样再按照我们之前的规则，一一添加别名就好了。
至此，就可以愉快的进行文件别名+自动路径提示的快捷开发流程了，赶快推荐给还不知道的小伙伴们吧！