Skip to main content

How To use jsconfig.js when using VSCode in laravel8

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? | Laravelnote

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.

Popular posts from this blog

Laravel8 in Serializes Models trait | laravelnote

This article was originally posted, with additional formatting, on my personal blog at laravel serializes model Background  When dispatching an object onto the queue, behind the scenes Laravel is recursively serializing the object and all of its properties into a string representation that is then written to the queue. There it awaits a queue worker to retrieve it from the queue and unserialize it back into a PHP object (Phew!). Problem When complicated objects are serialized, their string representations can be atrociously long, taking up unnecessary resources both on the queue and application servers. Solution Because of this, Laravel offers a trait called SerializesModels which, when added to an object, finds any properties of type Model or Eloquent\Collection during serialization and replaces them with a plain-old-PHP-object (POPO) known as a ModelIdentifier. These identifier objects represent the original properties Model type and ID, or IDs in the case of an Eloquent\Collecti...
Read more

Octane Support in Laravel forge 2021 5 may

 Back in March, Taylor announced the new Laravel Octane project at Laracon Online. Since then, we've been busy working on bug fixes and enhancements to Octane, as well as adding support to Laravel Forge. Today we're pleased to announce that Octane support is available in Forge. We've written the guide below to help you get started. Please keep in mind that Octane is still in beta and should not be used in production. Prerequisites Your project must require "laravel/octane": "^0.3.2" or above. Your server must have PHP 8.0 installed. You should then follow the Octane installation instructions listed in the Octane repository. Creating an Octane Site Octane can be enabled by selecting the Laravel Octane (Beta) project type option and PHP 8.0 as the PHP version that should be used to serve your site: Laravel Octane Project Type Laravel Octane Project Type Once the project type has been selected, Forge will ask for the port that Octane should listen on. Unlik...
Read more

Create Your Next Project's Readme in Laravel8 | laravelnote

  The readme.so editor gives you visual cues, starter section templates and includes many standard readme sections you're likely to use. It also has a nice preview to help guide you along the way. Never forget a section for your readme again! Select sections to add to your readme, edit the contents, and drag to rearrange. See a live-updating rendered preview of your markdown, then download your README.md file! Here's an example of starting an API section, which provides helpful formatting. You might need to specify API params: The editor includes both light and dark editor support, and you can download or copy/paste the raw markdown of your readme into version control once you're done. You can learn more about this project and start using it on  readme.so . Also, be sure to check out  readme.so on Product Hunt  and upvote it if you find it useful!
Read more