让vscode正确识别webpack alias路径的方法

一般的相对路径引入依赖文件, vscode能够正确识别, 做出智能提示. 但是有时候项目目录层级太深, 写相对路径很长, 非常容易出错, 所以一般我们会在webpack中配置alias, 使用短名来减少路径层级.
如: import { getUsers } from '@/services/users'
但是vscode并不认识@, 所以就不会提示后面的文件提示
解决办法就是 在项目根目录下添加一个jsconfig.json的文件, 配置如下

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "include": ["src/**/*"]
}

paths的配置跟webpack的alias差不多, key为别名, 对应一条或多条实际项目路径. 配置之后, vscode就能正确识别@了. 当然你也可以添加store, utils等别名.

如果你是用的是typeScript开发则不是使用jsconfig.json配置而是使用tsconfig.json,它是 TypeScript 编译器的配置文件，TypeScript 编译器可以根据它的规则来对代码进行编译，如果你是使用JavaScript开发并且根目录同时存在jsconfig.json和tsconfig.json会导致失效，需要注意。