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

Instructor: [00:00] Many of us work on projects where we have files in directories like app/client/source/pages/admin. Then you drop an index.js file in there. Inside of your source folder, you probably have components/button.js. You're exporting something like just a standard button.

[00:25] In your pages, you probably want to import button from. Then you're up a directory, up a directory, components, button. You go up one, up one, then components and button. Then you have access to the button in this file. You can navigate between it by command-clicking on it.

[00:47] To save yourself this hassle, you probably set up a webpack.config.js. Then you set up your module exports, resolve, and alias, and something like, you say, "Components is path resolve dirname app/client/source/components."

[01:12] During development, you could get rid of these. What happens is the VS Code loses the ability to navigate and click on that or even doing the autocompletion of components and button. In VS Code, what you can do is create what's called a jsconfig.json file.

[01:32] I'm going to autocomplete a lot of this. Compiler options and then say the base URL is the current directory. We want to set up some paths. Then we want star to represent. You can pass in many paths inside of an array. The main one we're concerned with is app/client/source/* so that it'll look for any file inside of our source directory.

[01:59] Now if I go back into my index file and hit my autocomplete, it'll pull up components/button. I can command-click on this and navigate back to it. I'll go back to my file.

[02:10] Before, you saw it was this, where it looked up the directories. Now we've matched our jsconfig to say, "Hey, you know what? Any time I'm looking for a file, I'm looking for it inside of the source directory."