设置了alias以后vscode 点击路径跳转不了

8,713 阅读1分钟

条件1: webpack设置了alias以后,如下图

alias: {
      components: path.join(appRoot, 'client/components'),
      images: path.join(appRoot, 'client/images'),
      common: path.join(appRoot, 'client/common'),
      utils: path.join(appRoot, 'client/utils'),
    },

条件2: 项目根目录添加了jsconfig.json,如下图

{
  "compilerOptions": {
    "target": "ES6",
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "components/*": [
        "client/components/*",
      ],
      "images/*": [
        "client/images/*"
      ],
      "common/*": [
        "client/common/*",
      ],
      "utils/*": [
        "client/utils/*"
      ],
    }
  },
  "exclude": [
    "node_modules", "public", "server"
  ]
}

结果

  1. 第1行import的 Container是文件,点击可以跳转
  2. 第2、3行import的是相对路径, login、register是一个文件夹,点击跳转不了
  3. 第5、6行components是weback设置了的alias,NotFound是一个文件夹,点击不能跳转,LoadingComponent是文件名,点击可以跳转。

提问:vscode为什么点击省略了文件名的路径跳转不了??

更新:加载省略了文件名的路径的加载机制是node的模块加载机制,vscode并不了解这种机制,所以需要安装Node modules resolve插件!!!不过使用了webpack设置的alias的文件夹名并省略了index.js这种的文件名的路径依然不能跳转。(有时间可以尝试下写一个vscode 插件补充这一功能)