如何完美集成Path Intellisense 或 Path Autocomplete

前言

看很多大佬分享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/*"]
        }
    }
}

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