在我们开发Vue或React项目时,每次配置完路径别名,在输入路径时都没有对应的智能提示路径,如何解决这个痛点呢?
笔者通常都是使用vscode,本次使用vscode来进行演示解决,非常简单的
path-alias插件
- 在vscode插件商城中搜索并安装: path-alias
- 不光具备路径别名智能提示,还可以点击别名路径跳转到该文件
配置
因为path-alias插件只默认配置路径@映射到项目的src目录,其他目录的映射需要自己手动完成
- 进入你的vscode的settings.json文件
- 添加如下配置
{
"pathAlias.aliasMap": {
"actions": "${cwd}/src/actions",
"components": "${cwd}/src/components",
"constants": "${cwd}/src/constants",
"images": "${cwd}/src/images",
"middleware": "${cwd}/src/middleware",
"operation": "${cwd}/src/operation",
"pages": "${cwd}/src/pages",
"polyfill": "${cwd}/src/polyfill",
"reducers": "${cwd}/src/reducers",
"routes": "${cwd}/src/routes",
"store": "${cwd}/src/store",
"styles": "${cwd}/src/styles",
"utils": "${cwd}/src/utils",
"@": "${cwd}/src"
}
}
这时路径输入 utils 也会有智能提示了