Why you need a jsconfig.js when using VSCode

If you want to improve your developer experience when working in JavasScript with VSCode, you need to start adding a jsconfig.json file to all your projects.

What is jsconfig.json?

VSCode uses a jsconfig.json file to aid your JavaScript language service and significantly improve your development experience.

Let's say you've just installed a new Laravel PHP application and are using the Laravel Breeze Inertia starter kit. When you open the webpack.config.js file, you'll see the following.

 1const path = require('path');
 2 
 3 
 4module.exports = {
 5    resolve: {
 6        alias: {
 7            '@': path.resolve('resources/js'),
 8        },
 9    },
10};

The above helps instruct Webpack on how modules are resolved in your application. It allows you to use @ as a shortcut, so you don't have to back step to create relative paths to other components.

Let’s say you have the following a component in /resources/js/Components called Input.vue and Page component in /resources/js/Pages/Dashboard/Index.vue.
To import the Input.vue component, it would look like this.

1import Input from `../../Components/Input.vue

With the help of the @ alias, you can change this to the following.

1import Input from `@/Components/Input.vue

You can go a step further and add a component alias as well.

 1const path = require('path');
 2 
 3 
 4module.exports = {
 5    resolve: {
 6        alias: {
 7            '@': path.resolve('resources/js'),
 8            '@Components': path.resolve('resources/js'/Components),
 9        },
10    },
11};

Which will let you then import like this.

1import Input from `@Components/Input.vue

So much cleaner.

The one thing that is missing here, if you're using VSCode, is your IDE won't be able to help you with auto-completing your paths. This is where the jsconfig.json file comes into play.

Let's create a jsconfig.json and place it in the root of our Laravel application at the same level as the webpack.config.js file.
Open it up and add the following.

 1{
 2  "compilerOptions": {
 3    "baseUrl": ".",
 4    "paths": {
 5      "@/*": [
 6        "resources/js/*"
 7      ],
 8      "@Components/*": [
 9        "resources/js/Components/*"
10      ]
11    }
12  },
13  "exclude": [
14    "node_modules",
15    "public"
16  ]
17}

Note you might have to restart VSCode for jsconfig.json to take effect.

Now, when you type import Input from '@". You will start to see your folder structure and the files that are in each directory.

That's it! Now you can get full auto-complete and file browsing support in your VSCode IDE.

Happy coding!