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 is a full stack developer with a passion for everything Laravel, Vue.js, Tailwind CSS and Inertia.js.