vscode 如何配置路径别名?配合webpack使用

Question

import { queryString } from '@/utils'

如果使用相对路径, 如:

import { queryString } from '../../utils'

点击 queryString 就能直接索引到对应的文件
但是用webpack alias 后 就失去这种便捷的功能了,
vscode有没有这种路径别名的配置?

Answer 1

放一个jsconfig.json到项目根目录下。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

文档：jsconfig#_using-webpack-aliases

Answer 2

你需要一个Jump To Alias File插件,可以对 webpack 别名路径或者自定义别名路径进行快速跳转的插件.

Answer 3

resolve: {
    alias: {
        '@': path.resolve(__dirname, 'src')
    }
}