VSCode Webpack别名跳转配置,@/src/*跳转到文件方法

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

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"]
}

喜欢 (1)赏

[新概念]

分享 (0)