سلام

قبل از شروع دوره جاوا اسکریپت لازم دونستم یه سری افزونه محبوب و پرکاربرد رو در محیط توسعه VSCode برای برو بچه‌های توسعه دهنده جاوا اسکریپت معرفی کنم :

۱. HTML Boilerplate

این افزونه بهتون کمک می‌کنه وقتی یک سند خالی HTML ایجاد کردید فقط با زدن دکمه Tab ساختار ساده HTML براتون ساخته بشه. (آخرین آپدیت : ۵/۲۰/۲۰۱۸)

لینک افزونه

افزونه‌های مشابه :

HTML Snippets ( آخرین آپدیت : ۱۲/۲۸/۲۰۱۷)

۲. CSSTree Validator

این افزونه بهتون کمک میکنه تا کدهای شما بر اساس مشخصات W۳C اعتبار سنجی بشن تا کدهای CSS شما کاملا معتبر باشه.این کار هم در همون زمان کدنویسی انجام میشه .یعنی نیاز نیست برین ۴ ساعت بگردین و مشکلات مربوط به استایل دهیتون رو اصلاح کنید. (آخرین آپدیت : ۱۰/۲۳/۲۰۱۹ )

لینک افزونه

۳. VS Color Picker

با نصب این افزونه یک Picker رنگ به Visual Studio Code شما اضافه میشه.کارش هم خیلی راحته. وقتی شما کلید #  رو فشار میدید و میخواید شروع به نوشتن کنید ، یه صفحه کوچک انتخاب رنگ روی صفحه نمایش برای شما به نمایش در میاد. (آخرین آپدیت : ۱/۲/۲۰۱۹)

لینک افزونه

افزونه‌های مشابه :

Color Picker  (آخرین آپدیت : ۸/۴/۲۰۱۷)

Color Pick  (آخرین آپدیت : ۶/۶/۲۰۱۹)

Color Manager  (آخرین آپدیت : ۴/۱۱/۲۰۲۰)

۴. CSS Peek

این افزونه هم خیلی برای من جالب بود.با استفاده از اون میتونید ، به شکل درون خطی یا inline کدهای css مد نظرتون رو ویرایش کنید. (آخرین آپدیت : ۷/۴/۲۰۱۹)

لینک افزونه

افزونه مشابه :

IntelliSense for CSS class names in HTML (آخرین آپدیت : ۵/۱۹/۲۰۱۹)

۵. ES۵/ ES۶ و CSS Minifier

اگر هم قصد کوچیک کردن حجم فایل‌های CSS و جاوا اسکریپت رو دارید ، این کار از طریق این افزونه به راحتی انجام میشه. (آخرین آپدیت : ۱/۹/۲۰۲۰)

لینک افزونه

افزونه‌های مشابه :

css-minify  (آخرین آپدیت : ۲/۲۳/۲۰۲۰)

CSS Compressor  (آخرین آپدیت : ۱/۱۴/۲۰۱۸)

۶. Front Awesome Codes for HTML

اگر در طراحیتون میخواید از آیکون‌های Font Awesome استفاده کنید ، این افزونه رو حتما نصب کنید.بعد از اینکه این افزونه رو نصب کنید ، به محض وارد کردن کلاس مد نظرتون یه لیست از کلاس‌های مربوط به   Font Awesome ظاهر میشه . (آخرین آپدیت : ۴/۲۰/۲۰۱۷)

لینک افزونه

افزونه‌های مشابه :

Bootstrap ۴, Font awesome ۴, Font Awesome ۵ Free & Pro snippets  (آخرین آپدیت : ۳/۱۱/۲۰۱۹)

۷. Open-In-Browser

با توجه به اینکه محیط VSCode به شکل مستقیم فایل‌ها را در مرورگر باز نمیکنه ، این افزونه به شما در این کار کمک میکنه. (آخرین آپدیت : ۸/۱۲/۲۰۱۸)

لینک افزونه

۸. GitLens

این افزونه جزو محبوب‌ترین افزونه‌های این محیط توسعت. با توجه به اینکه گزینه‌های موجود مربوط به گیت محدوده ، این افزونه پشتیبانی کامل‌تری رو از گیت برای شما دوستان فراهم میکنه. افزونه GitLens می‌تونه با تفکیک خط کدها به شما نشون بده که توسعه‌دهنده یک قسمت خاص از کد چه کسیه! (آخرین آپدیت : ۲/۱۱/۲۰۲۰)

لینک افزونه

۹. Live server

این افزونه یک راه حل برای نمایش صفحات استاتیک و داینامیک در محیط توسعه VSCode هستش که از قابلیت بارگذاری مجدد هم پشتیبانی می‌کنه. اگه یه ریزه با مفاهیم سرور آشنایی دارید احتمال زیاد این افزونه میتونه بهتون خیلی کمک کنه. (آخرین آپدیت : ۴/۱۷/۲۰۱۹)

لینک افزونه

۱۰. Debugger for Chrome

حتما تا حالا گوشتون به اشکال زدایی در مرورگر کروم خورده. با استفاده از console.log() میتونستید این کار رو انجام بدید.اما شاید برای بعضیا این روش خوبی نباشه! حالا جالبه که بگم این افزونه به شکل مستقیم داخل محیط توسعه VSCode کار اشکال زدایی رو انجام میده. (آخرین آپدیت : ۱/۲۴/۲۰۲۰)

لینک افزونه

۱۱. REST Client

این افزونه امکان مشاهده درخواست HTTPو مشاهده پاسخ سرور را در محیط توسعه VSCode فراهم میکنه. (آخرین آپدیت : ۳/۹/۲۰۲۰)

لینک افزونه