开发Vue或React项目时路径别名智能提示方案

在我们开发Vue或React项目时，每次配置完路径别名，在输入路径时都没有对应的智能提示路径，如何解决这个痛点呢？
笔者通常都是使用vscode，本次使用vscode来进行演示解决，非常简单的

path-alias插件

1. 在vscode插件商城中搜索并安装: path-alias
2. 不光具备路径别名智能提示，还可以点击别名路径跳转到该文件

配置

因为path-alias插件只默认配置路径@映射到项目的src目录，其他目录的映射需要自己手动完成

1. 进入你的vscode的settings.json文件
2. 添加如下配置

{
  "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 也会有智能提示了