解决vscode中文件路径使用@导致的引用丢失和跳转失效等问题

在vue项目的webpack配置中，我们经常可以看到这样的配置：

 resolve: {
    alias: {
      '@': resolve('src'),
    }
  }

有了这个配置，我们可以在项目中引入其他文件中模块时，方便地使用“@”作为占位符或别名，表示项目根路径下的src文件夹，这样可以让我们少写很多啰嗦的代码，使代码更加简洁，这也是官方推荐的配置。
但是，它给我们书写路径带来了一定的便利的同时，也带来了一些问题：

1.当路径输到一半时，vscode不会像我们期望的那样，出现推荐的路径供我们方便地自动补全；
2.当你按下command并把鼠标光标移动到引入的某个对象时，无法出现代码的实现预览，按下左键也无法跳转到该对象的出处；
3.vscode完全无法感知引入对象的具体类型和它包含的属性和方法，导致无法出现代码的只能提示，无法自动补全。
出现这以上三个问题，让本来就苦逼的程序猿们雪上加霜，我们必须想办法解决它。

这时候就需要jsconfig.json登场了。

jsconfig.json

在项目根目录下创建jsconfig.json文件，内容如下：

{
  "compilerOptions": {
      "target": "ES6",
      "module": "commonjs",
      "allowSyntheticDefaultImports": true,
      "baseUrl": "./",
      "paths": {
        "@/*": ["src/*"]
      }
  },
  "exclude": [
      "node_modules"
  ]
}

然后重新加载项目代码或重启vscode，你会发现，之前出现的那三个问题已经不复存在。
关于jsconfig.json的更多信息，可参考这篇文章