VSCode Webpack别名跳转配置

webpack配置的别名路径，在VSCode开发工具中，无法通过按住Ctrl+单击鼠标左键的方式查看源文件或者通过import 导出的方法定义，影响了编码效率，其实这个问题不难解决，在项目根目录下添加一个jsconfig.json的配置文件，就可以了。先看看效果

image

jsconfig.json配置文件内容如下：

  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "jsx": "react",
    "paths": {
      "@src/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

踩过的坑

重点是"paths": { "@src/": ["./src/"]}这一句, 要看项目中的webpack.config.js配置了哪些别名，jsconfig.json中配置的别名要与webpack.config.js中一一对应

如果webpack中的别名是这样配置

 resolve: {
        extensions: ['.jsx', '.js', '.json'],
        alias: {
            '@src': resolve('../src'),
            '@components': resolve('../src/components'),
            '@utils': resolve('../src/utils'),
            '@common': resolve('../src/config')
        }
    },

那么jsconfig.js应该这样配置

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "jsx": "react",
    "paths": {
      "@src/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@utils/*": ["./src/utils/*"],
      "@common/*": ["./src/config/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}