Why you need a jsconfig.js when using VSCode

Tutorials

April 29th, 2021

jsconfig-leader.jpg

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!

Filed in:

Yaz Jallad

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