۷ مورد از بهترین اکستنشن های VS Code | راهنمای کاربردی

آنچه موجب تمایز بین توسعه‌دهندگان عالی و متوسط می‌شود، ابزارهایی است که مورد استفاده قرار می‌دهند. داشتن ابزارهای مناسب برای یک کار موجب می‌شود که زندگی شما به عنوان یک توسعه‌دهنده به مقدار زیادی آسان‌تر شود. در این مقاله با برخی از بهترین اکستنشن های VS Code که موجب تسهیل امور روزمره شما به مقدار زیادی می‌شوkد، آشنا خواهیم شد.

هر نوع IDE که مورد استفاده قرار می‌دهید، تفاوتی در را‌ه‌حل کار ایجاد نمی‌کند. بسیاری از توسعه‌دهندگان از «ویژوال استودیو کد» (Visual Studio Code) به عنوان یک IDE استفاده می‌کنند که به آن‌ها امکان می‌دهد تا اکستنشن‌ها را نصب کنند. در واقع این ادیتور کد در زمینه اکستنشن‌هایی که می‌توانید استفاده کنید، هیچ محدودیتی پیش روی شما قرار نمی‌دهد.

از آنجا که اکستنشن‌های زیادی برای VS Code عرضه شده‌اند، ممکن است در هنگام مراجعه به این بخش دچار سردرگمی شوید به همین جهت ما در این مقاله 7 مورد از بهترین اکستنشن‌های VS Code را به شما معرفی می‌کنیم. توجه کنید که همه این اکستنشن‌ها به صورت رایگان در مارکت‌پلیس‌ ویژوال استودیو (+) عرضه شده‌اند.

REST Client

اکستنشن REST Client (+) به شما امکان می‌دهد که درخواست‌های HTTP را ارسال کرده و پاسخ را به صورت مستقیم در ویژوال استودیو کد ملاحظه کنید. بدین ترتیب دیگر لزومی به استفاده از اپلیکیشن‌های دیگر برای ارسال درخواست‌های HTTP به سرور وجود نخواهد داشت.

فیلم آموزش نصب و راه اندازی پایتون در VS Code (رایگان) در فرادرس

کلیک کنید

این اکستنشن با بیش از یک میلیون نصب، محبوبیت بسیار زیادی دارد و از سوی توسعه‌دهندگان زیادی مورد استفاده قرار می‌گیرد. با استفاده از این اکستنشن، ارسال یک درخواست HTTP به کاری بسیار آسان تبدیل می‌شود. ساختار آن کاملاً تمیز است و گزینه‌های زیادی وجود دارند که می‌توان برای رفع نیازها مورد استفاده قرار داد. برای ارسال یک درخواست Get تنها چیزی که نیاز دارید، نوشتن یک خط ساده کد است که در آن ابتدا کلیدواژه GET و سپس URL می‌آید.

CSS Peek

اگر توسعه‌دهنده وب باشید، CSS Peek (+) یک اکستنشن کاملاً ضروری برای شما محسوب می‌شود. این اکستنشن به شما امکان می‌دهد که صرفاً با بردن نشانگر ماوس روی نام کلاس یا ID عنصر به بررسی قواعد CSS بپردازید که روی یک عنصر خاص در HTML اعمال شده‌اند.

به تصویر زیر توجه کنید. در این تصویر نشان داده‌ایم که این اکستنشن دقیقاً چطور عمل می‌کند:

با این حال کارهای این اکستنشن فراتر از این است که به شما امکان دهد استایل‌بندی را بررسی کنید. این اکستنشن یک قابیلت Go To نیز دارد که به شما امکان می‌دهد تا بی‌درنگ به آن قواعد CSS که روی عنصر اعمال شده‌اند بروید. به این ترتیب زمان زیادی که باید به دنبال سلکتورهای مناسب می‌گشتید، صرفه‌جویی می‌شود.

Beautify

اگر به کد تمیز علاقه‌مند هستید، قطعاً طرفدار Beautify (+) خواهید بود. این اکستنشن به شما کمک می‌کند که کدهای خود را مرتب کنید. Beautify از زبان‌های جاوا اسکریپت، HTML ،CSS ،‌Sass و JSON پشتیبانی می‌کند.

بهترین نکته در مورد این اکستنشن آن است که همه گزینه‌ها مانند میزان تورفتگی و پایان یافتن فایل با کاراکتر new line یا غیره کاملاً قابل سفارشی‌سازی هستند. اگر کدهایی در چند زبان مختلف می‌نویسید، Beautify به کمک شما می‌آید. امکان سفارشی‌سازی گزینه‌های برای هر زبان برنامه‌نویسی وجود دارد.

این اکستنشن با بیش از 5 میلیون نصب در میان 20 اکستنشن برتر وی‌اس‌کد قرار دارد.

Auto Rename Tag

کاری که اکستنشن Auto Rename Tag (+) انجام می‌دهد، کاملاً ساده است، با این حال داشتن آن ارزشمند است. این اکستنشن به صورت خودکار تگ‌های ‌HTML جفت‌ هم را تغییر نام می‌دهد. اگر یک تگ آغازین را تغییر دهید، تگ پایانی آن نیز بر همین مبنا تغییر خواهد یافت و برعکس.

اگر می‌خواهید در زمان وارد کردن براکت بسته شدن تگ آغازین، تگ پایانی نیز به طور خودکار ایجاد شود، باید اکستنشنی به نام Auto Close Tag (+) را بررسی کنید. داشتن این دو اکستنشن موجب می‌شود که قدرت زیای در کدنویسی به دست آورید و کدنویسی HTML شما کارآمدتر و منسجم‌تر باشد.

Quokka.js

Quokka.js (+) یک پلی‌گراند برای ساخت پروتوتایپ در ادیتور شما است که به فایل‌های پروژه، گزارش‌گیری داخلی و امکانات دیگر دسترسی دارد. مقادیر موجود در کد شما به صورت لحظه‌ای به‌روزرسانی می‌شوند و در IDE کنار کد نمایش می‌یابند.

Night Owl

مسلماً VS Code بدون وجود یک Theme زیبا ارزش چندانی نخواهد داشت. از آنجا که زمان زیادی را در این ادیتور کد به کدنویسی می‌پردازید بهتر است یک قالب خوب روی آن نصب کنید. یکی از زیباترین قالب‌ها که از سوی توسعه‌دهندگان زیادی استفاده می‌شود، قالبی به نام Night Owl (+) است. بر اساس توضیحات این قالب، Night Owl برای افرادی تنظیم شده است که در اواخر شب به کدنویسی می‌پردازند.

اگر قالب Night Owl را دوست ندارید، جای نگرانی نیست، هزاران قالب زیبای دیگر وجود دارند که می‌توانید آن‌ها را امتحان کنید.

قطعه کدهای جاوا اسکریپت (ES6)

آخرین اکستنشنی که در این مقاله معرفی می‌کنیم اکستنشن قطعه کدهای جاوا اسکریپت ES6 (+) است که ده‌ها قطعه کد آمده دارد که می‌توانید در پروژه‌های خود مورد استفاده قرار دهید.

براتی نمونه با وارد کردن عبارت clg و زدن اینتر console.log تایپ می‌شود. ممکن است کمی طول بکشد تا با روش کار این اکستنشن آشنا شوید، ‌اما زمانی که بر آن تسلط یافتید،‌ می‌توانید با سرعت زیادی به کدنویسی در ES6 بپردازید.