Why you need a jsconfig.js when using VSCode

Tutorials

April 29th, 2021

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.

const path = require('path');
 
 
module.exports = {
resolve: {
alias: {
'@': path.resolve('resources/js'),
},
},
};

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.

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

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

import Input from `@/Components/Input.vue

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

const path = require('path');
 
 
module.exports = {
resolve: {
alias: {
'@': path.resolve('resources/js'),
'@Components': path.resolve('resources/js'/Components),
},
},
};

Which will let you then import like this.

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

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"resources/js/*"
],
"@Components/*": [
"resources/js/Components/*"
]
}
},
"exclude": [
"node_modules",
"public"
]
}

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!

Filed in:

Yaz Jallad

Yaz is a full stack developer with a passion for everything Laravel, Vue.js, Tailwind CSS and Inertia.js.