چرا بهتره از jsconfig.json در پروژه های جاوا اسکریپت استفاده کنید | Vscode lovers

اگر از vscode استفاده میکنید،‌برای بهبود تجربه توسعه پروژه های جاوا اسکریپتی مخصوصا Reactjs یا Vuejs فایلی هست به اسم jsconfig.js که به ما در امر توسعه این پروژه بسیار کمک میکنه و کاربردیه.

اصلا چی هست؟!

وی‌اس‌کد برای بهبود تجربه توسعه زبان جاوا اسکریپت و ابزار های اون این فایل رو در اختیار توسعه دهنده ها قرار میده تا ساختار کد ها و تجربه کد زدنشون رو لذت بخش کنن.

برای مثال تصور کنید ما یه پروژه لاراولی رو با استارتر کیت Laravel Breeze Inertia توسعه دادیم. اگر فایل webpack.config.js رو باز کنید. با همچین کدی روبرو میشید.

const path = require('path');

module.exports = {

    resolve: {

        alias: {

 '@': path.resolve('resources/js'),

        },

   },

};‍

کد بالا در کانفیگ وب پک استفاده میشه و به دسترسی به ماژول ها و پکیج های ما کمک میکنه. برای مثال alias که تعریف شده به عنوان '@' به ما این امکان رو میده که بجای برگشتن و لود ماژول مورد نظر ما آدرس دیرکتوری مورد نظر رو به عنوان alias در نظر میگیریم و به این شکل براحتی و زیبایی میتونیم کامپوننت ها و ماژول هامون رو لود کنیم.

مثلا بجای وارد کردن آدرس به صورت کامل یا عقب رفتن برای دسترسی به دیرکتوری :

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

از alias تعریف شده استفاده میکنیم :

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

شما میتونید با همین فرمون جلو برید و چندین alias دیگه بر اساس دیرکتوری های مورد نیازتون درست کنید :

const path = require('path');

module.exports = {

    resolve: {

        alias: {

            '@': path.resolve('resources/js'),

            '@Components': path.resolve('resources/js'/Components),

        },

    },

};

که با alias دوم میتونیم براحتی به دیرکتوری Components دسترسی داشته باشیم.

استفاده در پروژه لاراول

حالا برای استفاده در پروژه لاراولی خودمون میایم و یه فایل jsconfig.json در روت پروژه خودمون ایجاد میکنیم و چنین ساختاری رو میتونیم داخلش داشته باشیم :

{
&quotcompilerOptions&quot: {

    &quotbaseUrl&quot: &quot.&quot,

    &quotpaths&quot: {

      &quot@/*&quot: [

        &quotresources/js/*&quot

      ],

      &quot@Components/*&quot: [

        &quotresources/js/Components/*&quot

      ]

    }

  },

  &quotexclude&quot: [

    &quotnode_modules&quot,

    &quotpublic&quot

  ]

}

نکته : ممکن است بعد از ایجاد فایل jsconfig.json نیاز به راه اندازی مجدد vscode داشته باشید.

امیدوارم که از این مقاله لذت برده باشید.