VSCode Webpack別名跳轉配置

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