🎯 ۱۲ تا از افزونه های VS Code برای برنامه‌نویسی Front-end (آموزش نصب و تنظیمات)

📝 چرا باید افزونه های VS Code را بشناسیم؟

ویژوال استودیو کد یا همان VS Code یکی از محبوب‌ترین ادیتورهای کدنویسی در دنیاست که تقریباً تمام برنامه‌نویسان فرانت‌اند و بک‌اند از آن استفاده می‌کنند. اما چیزی که این ابزار را واقعاً قدرتمند می‌کند، افزونه های VS Code هستند.

با نصب افزونه های VS Code ، می‌توانید سرعت کدنویسی، کیفیت کدها و حتی تجربه طراحی و توسعه پروژه‌های خود را چندین برابر کنید. در واقع بدون استفاده از افزونه های VS Code، محیط کدنویسی شما مثل یک ادیتور ساده باقی می‌ماند و از تمام ظرفیت‌های این نرم‌افزار حرفه‌ای بهره نمی‌برید. در این مقاله می‌خواهیم بهترین افزونه های VS Code برای برنامه نویسان فرانت‌اند را به شما معرفی کنیم تا بتوانید مثل یک حرفه‌ای کدنویسی کنید و از هر لحظه کار با این ادیتور قدرتمند لذت ببرید.

🔧 1. Auto Rename Tag

❓ کاربرد:

هنگام تغییر نام یک تگ HTML یا JSX، به‌صورت خودکار تگ بسته (Closing Tag) نیز تغییر می‌کند.

🚀 آموزش نصب:

1. به بخش Extensions برو.
2. عبارت Auto Rename Tag را جستجو کن.
3. روی Install کلیک کن.

🔎 تنظیمات:
معمولاً بدون تنظیمات اضافه کار می‌کند. اما می‌توانی از مسیر Settings > Extensions > Auto Rename Tag تنظیمات دلخواهت را تغییر دهی.

💡 چرا مفیده؟ سرعت کدنویسی را چند برابر می‌کند و احتمال اشتباه در بستن تگ‌ها را از بین می‌برد.

🔧 2 . Live Server

❓ کاربرد:

وب‌سایت‌هایت را به‌صورت Live Reload ببین؛ یعنی هر تغییری در فایل ذخیره شود، مرورگر به‌طور خودکار Refresh می‌شود.

🚀 آموزش نصب:

۱. در Extensions سرچ کن: Live Server
۲. Install را بزن.

🔎 تنظیمات:
روی فایل HTML راست‌کلیک کن و گزینه Open with Live Server را انتخاب کن.

💡 چرا مفیده؟ تغییراتت را بلافاصله می‌بینی و روند طراحی صفحات HTML و CSS بسیار سریع‌تر می‌شود

🔧 3 . Prettier – Code Formatter

❓ کاربرد:

برای داشتن کدی مرتب و خوانا؛ با فشردن Ctrl+S، کدت به‌صورت خودکار فرمت می‌شود.

🚀 آموزش نصب:

۱. جستجو: Prettier
۲. نصب افزونه.

🔎 تنظیمات:

• وارد Settings شو.
• سرچ کن: Format On Save و تیک آن را فعال کن.

💡 چرا مفیده؟ کدهای تمیز، دیباگ ساده‌تر و همکاری تیمی راحت‌تری خواهی داشت.

🔧 4 . ESLint

❓ کاربرد:

خطاهای جاوااسکریپت را به‌صورت لحظه‌ای نمایش می‌دهد و رعایت اصول کدنویسی را اجباری می‌کند.

🚀 آموزش نصب:

۱. در Extensions سرچ کن: ESLint
۲. Install را بزن.

🔎 تنظیمات:
در پروژه‌های React و Node باید فایل .eslintrc.json را به‌صورت دستی بسازی یا از تنظیمات پیش‌فرض استفاده کنی.

💡 چرا مفیده؟ به‌خصوص در پروژه‌های React و Vanilla JS از بروز باگ‌های ریز جلوگیری می‌کند.

🔧 5 . CSS Peek

❓ کاربرد:

با نگه‌داشتن Ctrl روی کلاس‌های CSS در HTML می‌توانی مستقیم به تعریف آن‌ها بروی.

🚀 آموزش نصب:

۱. سرچ کن CSS Peek
۲. نصب کن.

💡 چرا مفیده؟ سرعت دسترسی به استایل‌ها را بالا می‌برد و دیگر نیازی به گشتن فایل‌ها نیست.

🔧 6 . Color Highlight

❓ کاربرد:

رنگ‌های Hex و RGB را در کدهایت به‌صورت رنگ واقعی نمایش می‌دهد.

🚀 آموزش نصب:

۱. سرچ کن Color Highlight
۲. Install را بزن.

💡 چرا مفیده؟ انتخاب و بررسی سریع رنگ‌ها بدون نیاز به باز کردن Color Picker.

🔧 7 . JavaScript (ES6) code snippets

❓ کاربرد:

با تایپ چند حرف، اسنیپت‌های پرکاربرد جاوااسکریپت برایت پیشنهاد داده می‌شود.

🚀 آموزش نصب:

۱. سرچ: JavaScript (ES6) code snippets
۲. نصب کن.

💡 چرا مفیده؟ نیاز به حفظ کردن syntaxهای طولانی را کاهش می‌دهد و سرعت کدنویسی‌ات را بالا می‌برد.

🔧 8 . Bracket Pair Colorizer 2

❓ کاربرد:

براکت‌های باز و بسته همرنگ می‌شوند تا راحت‌تر کدهایت را بخوانی.

🚀 آموزش نصب:

۱. سرچ: Bracket Pair Colorizer 2
۲. نصب کن.

💡 چرا مفیده؟ ساختار کدهای HTML، CSS و JS را سریع‌تر درک می‌کنی و کمتر دچار سردرگمی می‌شوی.

🔧 9 . Path Intellisense

❓ کاربرد:

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

🚀 آموزش نصب:۱. سرچ: Path Intellisense
۲. نصب کن.

💡 چرا مفیده؟ احتمال اشتباه در آدرس‌دهی فایل‌ها را نزدیک به صفر می‌کند.

🔧 10 . GitLens — Git supercharged

❓ کاربرد:

برای مدیریت Git در پروژه؛ می‌توانی ببینی کدام خط کد را چه کسی نوشته و تاریخچه تغییرات را بررسی کنی.

🚀 آموزش نصب:

۱. سرچ: GitLens
۲. نصب کن.

💡 چرا مفیده؟ در پروژه‌های تیمی و سورس کنترل، مدیریت و بررسی کدها بسیار آسان‌تر می‌شود.

🔧 11 . IntelliSense for CSS class names in HTML

❓ کاربرد:

هنگام نوشتن کلاس‌ها در HTML، تمام کلاس‌های موجود در فایل‌های CSS پروژه‌ات را پیشنهاد می‌دهد.

🚀 آموزش نصب:

۱. سرچ: IntelliSense for CSS class names in HTML
۲. نصب کن.

💡 چرا مفیده؟ سرعت طراحی Front-end را چند برابر می‌کند و از اشتباه تایپی در نام کلاس‌ها جلوگیری می‌شود.

🔧 12 . vscode-icons

❓ کاربرد:

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

🚀 آموزش نصب:

۱. سرچ: vscode-icons
۲. نصب کن.

💡 چرا مفیده؟ مدیریت فایل‌های پروژه را ساده‌تر و جذاب‌تر می‌کند.

🎬 خلاصه آموزش نصب افزونه های VS Code

🔹 روی آیکون Extensions در نوار سمت چپ کلیک کن
🔹 نام افزونه را جستجو کن
🔹 روی Install بزن
🔹 برای مدیریت تنظیمات هر افزونه، روی آیکون ⚙️ کنار آن کلیک کن و Extension Settings را انتخاب کن.

🚀 آموزش تخصصی طراحی سایت با پشتیبانی کامل

اگر می‌خواهی برنامه‌نویسی فرانت‌اند و طراحی سایت را به‌صورت اصولی و پروژه‌محور یاد بگیری، دوره‌های پیشرفته رایا اسکیلز بهترین انتخاب برای تو هستند:

🔹 آموزش کامل HTML, CSS, JavaScript, React
🔹 آموزش UI/UX با فیگما
🔹 ساخت پروژه‌های واقعی برای رزومه
🔹 پشتیبانی و رفع اشکال توسط منتورهای حرفه‌ای
🔹 ارائه مدرک معتبر از جهاد دانشگاهی امیرکبیر

✅ هم حضوری هم آنلاین | همراه با مسابقات کشوری و بین‌المللی برای رزومه‌سازی

🎯 برای ثبت‌نام و شروع مسیر حرفه‌ای طراحی سایت، همین حالا کلیک کن:

ثبت‌نام دوره طراحی سایت 👉