前言
看很多大佬分享vscode插件，其中關(guān)于路徑聯(lián)想的插件Path Intellisense 或者 Path Autocomplete都是非常不錯(cuò)的闰歪，這兩個(gè)插件功能幾乎一樣脚囊，配置方式也是大同小異共缕，這里就那拿Path Autocomplete來舉例說明如何配置vscode的路徑自動(dòng)聯(lián)想吧徐紧！
步驟
1、配置 Path Autocomplete 插件
首先宽档，我們要先安裝Path Autocomplete插件尉姨。
然后，打開設(shè)置吗冤，setting.json又厉，按下圖舉例配置好提示規(guī)則pathMappings
這個(gè)是我自己項(xiàng)目的配置模板，需要了解更多插件配置的可以閱讀插件說明
path-autocomplete 插件文檔
Path Intellisense插件的配置也是大同小異椎瘟，這里說下區(qū)別覆致，除了jsonKey不同之外，就是根目錄的代指不同肺蔚，其余都是一樣的
2煌妈、配置jsconfig.json
配置這個(gè)的原因是因?yàn)闉榱颂岣唛_發(fā)體驗(yàn)，光有路徑引導(dǎo)還不行宣羊，還需要文件模塊的提示聯(lián)想璧诵，還有文件跳轉(zhuǎn)等功能，所以jsconfig的配置就是必要的了段只。
這里先貼出來官方文檔解釋，習(xí)慣看官方文檔的直接前往就好鉴扫，我會(huì)做簡(jiǎn)單的說明
jsconfig#_using-webpack-aliases
主要是這么幾個(gè)配置赞枕，而我們用到的最主要的是
baseUrl和paths這兩項(xiàng)，是告訴編輯器我們的查找路徑規(guī)則的。
// 這里貼出我的jsconfig配置炕婶，和上面的插件配置對(duì)應(yīng)
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"@css*": ["src/assets/css*"],
"@icon*": ["src/assets/icon/*"],
"@image*": ["src/assets/image/*"]
}
}
}
配置好之后姐赡，就可以在vue文件里面用起來啦！
此時(shí)柠掂，終于不用寫那么多的../../项滑。
這里小提示一下，js文件中引用路徑直接用@/就可以了涯贞，html文件引入圖片地址的時(shí)候要用~@image枪狂，別忘記前面的~
很多教程到這里就結(jié)束了，但實(shí)際上運(yùn)行起來之后宋渔，會(huì)發(fā)現(xiàn)報(bào)錯(cuò)州疾，原因是不識(shí)別
@是個(gè)什么玩意？現(xiàn)在我們主流都是使用webpack打包的皇拣，所以我們需要讓webpack也知道路徑的命名規(guī)則严蓖！It is important！
3氧急、配置configureWebpack
那Vue項(xiàng)目舉例颗胡，我們需要配置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/')
}
}
}
};
做好這些之后吩坝，打包就會(huì)將@處理成__dirname毒姨，這樣再按照我們之前的規(guī)則，一一添加別名就好了钾恢。
至此手素，就可以愉快的進(jìn)行文件別名+自動(dòng)路徑提示的快捷開發(fā)流程了，趕快推薦給還不知道的小伙伴們吧瘩蚪！
