آشنایی با ۱۰ افزونه منحصر به فرد VSCode

همه ما از میزان محبوبیت ویژوال استدیو کد آگاهی داریم و می‌دانیم که بیشتر برنامه نویس‌های دنیا از این ویرایشگر استفاده می‌کنند. رایگان، متن باز بودن، سازگاری با پلتفرم‌های مختلف و... از جمله دلایل محبوبه ادیتور VS code  است.

اما یکی از دلایل اصلی این محبوبیت، اکستنشن‌های آن است که منجر شده تا VSCode بتواند مطابق با هر نیازی استفاده شود.

در این مطلب از وبسایت راکت ما ۱۰ افزونه منحصر به فرد و مفید را معرفی خواهیم کرد که مطمئنا در کارهای مختلفی به شما کمک خواهد کرد.

افزونه اول: Better Comments

کامنت‌نویسی در بین کدها، یکی از اصلی‌ترین تکنیک‌هایی است که باعث می‌شود با ساختار کدها بیشتر آشنا شویم. این موضوع در محیط‌های تیمی اهمیت بسیار زیادی دارد. همچنین یکی از تفاوت‌های بین توسعه دهندگان حرفه‌ای و مبتدی، کامنت‌نویسی‌های مفصل و دقیق‌شان است.

یک مشکل اساسی که در دنیای کامنت‌ها وجود دارد این است که همه کامنت‌ها شبیه به همدیگر هستند و نمی‌شود تمایزی میان آن‌ها قائل شد. اگر می‌شد که کامنت‌های مهمتر را با رنگ مثلا قرمز و کامنت‌های عادی را با رنگ آبی نشان داد، به نظرتان بهتر نمی‌شد؟

افزونه Better Comments دقیقا چنین هدفی را دنبال می‌کند.

همانطور که در تصویر بالا مشاهده می‌کنید با استفاده کردن از علائم (! - ؟ - todo - *) می‌توانید کامنت‌هایی با رنگ‌های متفاوت داشته باشید که هر کدام برای یک منظور خاص تعبیه شده‌اند.

البته شما می‌توانید یک ساختار جدید را نیز ایجاد کنید. برای مثال در تصویر بالا، مورد آخر که با علامت (-) ایجاد شده است به صورت سفارشی بوده و جزو علائم پیشفرض افزونه نیست. برای اینکار در بخش کامند-پلت عبارت better-comments را تایپ کرده و گزینه Edit in settings.json را انتخاب کنید. در این قسمت اگر قطعه کد زیر را اضافه کنید می‌توانید از علامت (-) نیز استفاده کنید.

نمونه کد

افزونه دوم: Code Time 

اگر به رهگیری میزان زمانی که مشغول کدنویسی بوده‌اید علاقه دارید این افزونه مناسب کار شما است. بعد از نصب این افزونه، میزان استفاده شما از ویرایشگر ویژوال استدیو کد ضبط شده و در نهایت می‌توانید از طریق پنل سمت چپ آن را مشاهده کنید.

افزونه سوم: HTML and CSS autocompletion

ویژوال استدیو کد به صورت پیشفرض قابلیت‌هایی برای «تکمیل خودکار کدها» برای HTML و CSS در نظر گرفته است. اما اگر دوست دارید این سطح از تکمیل کردن را به سطح جدیدی ببرید و به صورت کامل‌تری از این ویژگی استفاده کنید پیشنهاد می‌کنیم که افزونه HTML and CSS autocompletion را نصب کنید.

افزونه چهارم: Paste JSON az CODE 

افرادی که از تایپ اسکریپت استفاده می‌کنند می‌دانند که تایپ کردن interface or type برای هر کدام از API Callها چقدر سخت است.

افزونه Paste JSON as Code قصد دارد این مشکل را حل کند. این افزونه فرایند تعریف APIهای مربوط به type or interface را به صورت کامل انجام می‌دهد.

برای کار با این افزونه، ابتدا API Response مورد نظر را کپی کنید و در فایل تایپ اسکریپت خود Paste کنید. بعد از آن تمام Responseها را انتخاب کرده و سپس کلیدهای ctrl + Shift + p را بزنید و سپس Copy را تایپ کنید. بعد از اینکار کدها را پاک کرده و مجددا ctrl + shift + p را بزنید و حال Paste JSON as Code را تایپ کرده و انتخاب کنید.

افزونه پنجم: 

Pretty TypeScript Errors

اگر از حالت عادی نمایش خطاها در تایپ اسکریپت خسته شده‌اید و به دنبال یک روش کامل‌تر برای نمایش خطاهای‌تان هستید، می‌توانید از Pretty Typescript Error استفاده کنید.

قبل از نصب افزونه

بعد از نصب افزونه

افزونه ششم: Postman / Thunder Client

تست کردن APIها یکی از کارهایی است که به صورت روزانه توسط توسعه دهندگان انجام می‌شود. بیشتر توسعه دهندگان نیز این کار را خارج از محیط VSCode انجام می‌دهند. بنابراین نیاز است که مدام بین دو برنامه در رفت و آمد باشید.

با استفاده از این افزونه این مشکل حل خواهد شد. شما می‌توانید از قابلیت‌های Postman و Thunder Client در داخل ویژوال استدیو کد استفاده کرده و APIهای خودتان را در داخل ویرایشگر تست کنید.

افزونه هفتم:Mern stack Snippets 

اگر از نوشتن کدهای اولیه پروژه‌های بک-اند (Express و Mongoose) خسته شده‌اید می‌توانید این افزونه را نصب کرده و با استفاده از قطعه کدهای آماده مختلف به سرعت یک پروژه اولیه را راه‌اندازی کنید.

در زیر می‌توانید یک تصویر از قطعه کدهای آماده این افزونه را مشاهده کنید:

افزونه هشتم: Inline fold

زمانی با فریمورک‌هایی مانند TailwindCSS یا Bootstrap کار می‌کنید، ممکن است از حجم بالای نام کلاس‌ها و... بیزار شوید. با استفاده از این افزونه می‌توانید کلاس‌های‌تان را Fold کرده و در نتیجه آن‌ها را به صورت کوچک‌تر و مختصرتری نشان دهید.

افزونه نهم:CODE tour 

این افزونه به شما اجازه می‌دهد تا برای پروژه‌های خودتان یک Code Tour ایجاد کنید. منظور از Code Tour ایجاد یک راهنما برای مطالعه بخش‌های مختلف یک پروژه است. درست مانند یک تورلیدر که بخش‌های مختلف یک شهر را به شما نشان می‌دهد، با پیکربندی این افزونه، شما نیز می‌توانید یک تورلیدر برای پروژه‌تان ایجاد کنید.

افزونه دهم: Reactree

اگر از فریمورک react در فرایند توسعه اپلیکیشن‌های خود استفاده می‌کنید و قصد دارید کل ساختار اپلیکیشن‌تان را به صورت «درختی» مشاهده کنید می‌توانید از این افزونه استفاده کنید.

بعد از نصب این افزونه، دو افزونه دیگر به صورت خودکار با نام‌های learn-markdown و learn-preview نصب خواهند شد. در قدم بعدی با انتخاب کلیدهای ctrl + shift + p و تایپ ReacTree: Show Panel می‌توانید ساختار درختی اپلیکیشن‌تان را مشاهده کنید.

در پایان

شناسایی و استفاده از افزونه‌های درست باعث می‌شود تا بتوانید فرایند توسعه بهتری را با ویژوال استدیو کد تجربه کنید. به همین دلیل نیاز است که ما هر چند وقت یکبار لیستی از این افزونه‌ها را با شما به اشتراک بگذاریم.

در این مطلب از وبسایت راکت ما ۱۰ افزونه کاربردی و منحصر به فرد VSCode را به شما معرفی کردیم که مطمئنا در زمینه‌های مختلف می‌توانند برای‌تان مفید باشند.