Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: 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.

    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.

    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."

    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.

    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.

    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.

    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."