[Tools] Support VS Code Navigation and Autocomplete Based on Webpack Aliases with jsconfig.json

It's common to setup Webpack aliases to make imports much more convenient, but then you lose the ability to navigate and autocomplete paths in VS Code. This lesson shows you how to create a jsconfig.json with proper paths so you can get back to using VS Code in all its glory.

 

webpack.config.js:

module.exports  = {
    resolve: {
        alias: {
            components: path.resolve(__dirname, "app/client/src/components")
        }
    }
}

 

jsconfig.js:

{
    "compilerOptions": {
        "baseUrl": ".",
        "path": {
            "*": ["app/client/src/*"] // match the same name folder in src 
          }    
    }
}