جالب‌ترین اکستنشن های vscode

اگه از طرفدارای برنامه‌نویسی باشی، مخصوصاً اگه وقت زیادی رو تو محیط کدنویسی می‌گذرونی، مطمئناً اسم Visual Studio Code یا همون VS Code به گوشت خورده. تو این مقاله قراره با هم یه لیست خفن از افزونه‌هایی رو بررسی کنیم که باعث می‌شن VS Code از یه ادیتور ساده، تبدیل بشه به یه ایستگاه فوق‌پیشرفته برنامه‌نویسی 🚀

VS Code و افزونه‌هاش چیه اصلاً؟

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

اما چیزی که واقعاً اونو قدرتمند می‌کنه، افزونه‌ها (Extensions) هستن. این افزونه‌ها امکانات اضافی‌ای به ادیتورت اضافه می‌کنن: از فرمت کد گرفته تا تست API و مدیریت فایل‌ها. با نصب افزونه‌های مناسب، می‌تونی VS Code رو دقیقاً مطابق نیاز خودت تنظیم کنی. حالا بریم سراغ اون ۱۰ افزونه طلایی 😎👇

1. Live Server ⚡

Live Server یکی از پرطرفدارترین افزونه‌ها برای توسعه‌دهندگان فرانت‌اند هست. این افزونه یک سرور محلی راه‌اندازی می‌کنه که فایل‌های HTML/CSS/JS شما رو به‌صورت زنده در مرورگر نمایش می‌ده.

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

قابلیت‌ها:

• رفرش اتوماتیک مرورگر
• پشتیبانی از تنظیمات دلخواه پورت
• سازگار با پروژه‌های SPA

برای چه کسایی عالیه؟ فرانت‌اند دولوپرها، طراحان HTML/CSS، کسایی که سریع می‌خوان تغییرات رو ببینن.

2. Prettier – Code Formatter 🎯

Prettier یه افزونه فرمت‌کننده کد فوق‌العاده‌ست. باهاش می‌تونی کدهایی تمیز، مرتب و یکدست داشته باشی. مخصوصاً تو تیم‌های چندنفره که هرکسی یه سبک کدنویسی داره، Prettier نظم می‌ده.

پشتیبانی از زبان‌های مختلف مثل JavaScript, TypeScript, HTML, CSS, JSON و... باعث میشه توی پروژه‌های مختلف یه استایل ثابت داشته باشی.

const a={foo:"bar"}; 
=>
const a = { foo: "bar" };

امکانات:

• یکپارچه‌سازی با ESLint
• اجرای خودکار هنگام ذخیره فایل
• قابل شخصی‌سازی با فایل config

مناسب برای: همه برنامه‌نویسا، خصوصاً توی پروژه‌های گروهی 💼

3. GitLens 🔍

GitLens افزونه‌ایه که قدرت Git رو چند برابر می‌کنه. این ابزار اطلاعات دقیقی درباره تغییرات هر فایل و خط بهت می‌ده: چه کسی، کی و چرا اون قسمت رو تغییر داده.

موقع مرور پروژه‌های بزرگ یا کار تیمی، این افزونه بهت اجازه می‌ده تا تاریخچه فایل‌ها، تفاوت نسخه‌ها، و حتی نویسنده هر خط کد رو ببینی.

ویژگی‌ها:

• Blame دقیق کنار هر خط کد
• نمایش گرافیکی تاریخچه commitها
• مرور commitهای قبلی و diffها

برای کی خوبه؟ تیم‌های حرفه‌ای، پروژه‌های متن‌باز، توسعه‌دهندگان بک‌اند 💻

4. Bracket Pair Colorizer 2 🎨

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

مخصوصاً توی زبان‌هایی مثل JavaScript، Python یا C++ که ساختارهای تو در تو زیاد دارن، واقعاً نجات‌دهنده‌ست.

5. Path Intellisense 📁

وقتی می‌خوای مسیر یه فایل رو بنویسی، ممکنه یادت نیاد دقیقاً اسم فایل یا فولدر چی بود. Path Intellisense به‌صورت خودکار مسیر درست فایل‌ها رو پیشنهاد می‌ده.

این افزونه autocomplete مسیرها رو در لحظه میاره، از جمله فایل‌های داخل فولدرهای تو در تو. باعث میشه ایمپورت‌ها سریع‌تر، بدون خطا و دقیق‌تر نوشته بشن.

import Button from '../../components/ui/Button';

6. REST Client 🧪

نیاز داری یه API رو تست کنی ولی نمی‌خوای از Postman استفاده کنی؟ REST Client دقیقاً برای همینه! مستقیماً داخل VS Code می‌تونی درخواست‌های HTTP بفرستی و پاسخ رو ببینی.

پشتیبانی از انواع متدها (GET, POST, PUT, DELETE)، ارسال هدر، بادی JSON، و حتی ذخیره درخواست‌ها توی فایل با پسوند `.http` از قابلیت‌های عالی این افزونه‌ست.

POST https://api.example.com/users
Content-Type: application/json

{
  "name": "Ali",
  "email": "ali@example.com"
}

7. CodeSnap 📸

می‌خوای یه تیکه کدتو به قشنگ‌ترین حالت ممکن پست کنی؟ CodeSnap بهت این امکان رو می‌ده که از کدت عکس‌هایی با استایل حرفه‌ای بگیری.

امکان شخصی‌سازی فونت، رنگ پس‌زمینه، حاشیه‌ها، و تم رنگی رو داری. حتی خروجی PNG با کیفیت بالا می‌ده که عالیه برای پست‌های توییتر یا پرزنتیشن‌ها.

8. TODO Highlight 📝

وقتی تو کدت یادداشت‌های TODO یا FIXME می‌نویسی، این افزونه اون‌ها رو با رنگ خاصی هایلایت می‌کنه تا هیچ‌وقت فراموشت نشن.

علاوه بر اون، یه نمای کلی از تمام TODOها رو هم توی سایدبار می‌ده که خیلی برای مدیریت وظایف نیمه‌تمام مفیده.

9. Thunder Client ⚡

یه جایگزین سبک‌تر برای Postman! Thunder Client یه ابزار ساده اما حرفه‌ای برای تست سریع API‌هاست که مستقیماً داخل VS Code کار می‌کنه.

رابط کاربری ساده، پشتیبانی از JSON، نمایش ساختار پاسخ به‌صورت زیبا، و ذخیره درخواست‌ها، این افزونه رو یه گزینه عالی برای توسعه‌دهنده‌های بک‌اند کرده.

10. vscode-icons 🗂️

با نصب این افزونه، آیکون اختصاصی برای هر فایل و پوشه در ادیتورت نمایش داده میشه. ظاهر پروژه‌ت زیباتر، حرفه‌ای‌تر و قابل‌فهم‌تر می‌شه.

پشتیبانی از صدها نوع فایل، تم‌های مختلف آیکون و امکان شخصی‌سازی آیکون‌ها از ویژگی‌های مهمشه. اگه دنبال یه تجربه بصری جذاب‌تری توی ادیتور هستی، نصبش واجبه!

جمع‌بندی نهایی 🧠

VS Code به‌تنهایی ابزار فوق‌العاده‌ایه، ولی وقتی این افزونه‌ها رو بهش اضافه کنی، قدرت واقعی‌ش رو می‌بینی. از مدیریت بهتر پروژه‌ها گرفته تا افزایش سرعت کدنویسی و دقت بیشتر.

اگه از این لیست چیزی نصب نکردی، پیشنهاد می‌کنم دونه‌دونه امتحانشون کنی. مطمئن باش خیلی ازشون خوشت میاد. 😊 و اگه تو هم افزونه خفنی سراغ داری، توی کامنت‌ها معرفی کن!