این ده تا افزونه رو نداشته باشی از ما نیستی!

سلام بچه هاااااا✋✋✋✋ چطورید جون دلا؟؟؟؟ سر کیفید؟؟؟

قراره با خوندن این پست محیطی خفن و سریع داشته باشید. پس بی مقدمه میریم سراغ مقدمه?

مقدمه

افزونه چیست؟ بچه ها چیز ساده و بدیهیی باشه ولی نیاز دونستم بگم. افزونه در لغت به معنی چیزی اضافه بر چیز دیگه ای هست. خب پس یعنی مثلا افزونه های vs code که میگیم یعنی یه سری مواردی که اضافه بر خود vs code هستن و قاعدتا مربوط به اون هم هستن

انگلیسی افزونه میشه extension (اکستنشن) که واقعا به صورت عجیبی بعضیاشون فوق العادن. بنظرم چیزی که vs code رو از بقیه ویرایشگرها مثل اتم متمایز میکنه یکی رابط کاربری خفنشه و یکی افزونه هاشه که البته اتم خیلی کم نداره ولی محیط کاربری وی اس کد یه سر و گردن بنظرم بالاتر از بقیه هست و همین حتی به افزونه ها تا حدی بر میگرده

ما هین قضیه افزونه رو در کروم و ... هم داریم (تو یه پست کامل دربارشون صحبت میکنم)

راستی نحوه نصب یا استفاده از افزونه هارو تو این پست گفتم ... برید حتما بخونید و لایک کنید

Live Server

همین اول کار با یکی از بهترین افزونه های تاریخ بشریت شروع میکنم?? جناب لایو سرور

با این افزونه وقتی تو یه کد html برید تو اون نوار پایین صفحه یه بخشی اضافه میکنه به نام Go Live و وقتی بزنید روش یه لوکال هاست براتون میسازه و هر تغییری توی کدهاتون ایجاد کنید به صورت فوق لحظه ای نشون میده!!! و این خیلی خفنه. دیگه از شر رفرش راحت میشید و مثل بعضیا سندروم رفرش بی قرار نمیگیرید

خلاصه من عاشق این افزونه هستم

نکته منفی: یه وقتیه ما میخوایم یه سری تغییرات ایجاد کنیم و میزان تغییر نسبت به حالت قبلو ببینیم. خب این هر لحظه به روز میکنه و نمیشه!

Visual Studio IntelliCode

این افزونه که توسط شرکت مایکروسافت ارائه شده خیلی باعث میشه سرعت کدزنی شما بالا بره. مثلا تو پایتون شما وقتی بنویسید pr خودش براتون print رو میاره که به این ویژگی auto complete میگن که خب مثلا توی پایتون وقتی افزونه پایتون رو نصب کنید این قابلیت هست ولی این افزونه خیلی بهتر عمل میکنه

برای اینکه بیشتر باهاش آشنا بشید بزنید روی این لینک

Auto Rename Tag

این افزونه به قول بچه ها خدااااس!! اصلا گاده. خیلی کاربردیه! (برای تگ های html هست)

تا حالا شده شما مثلا میخواستید تگ header بنویسید بعد اشتباهی نوشتید head! قطعا شده بعد اون موقع باید فرض کنید برید اول بخش head تبدیلش کنید به header بعد بیاید جایی که تک بسه میشه و ...

یا مثلا یه تگ div ساختید و خواستید بکنیدش span! خیلی دردسر داره. ولی وقتی این افزونه باشه شما راحت میتونید بخش شروع یا بسته شدن تگ رو (فرقی نداره) عوض کنید و اون سر تگ خودکار عوض میشه

نکته مثبتش اینه که همچنان حالت اتوکامپلیت رو داره! دیگه چی میخواید از یه اکستنشن؟؟ جهت کسب اطلاعات بیشتر روی این تارنما کلیک کنید!?

Code Time

اگه auto rename tag خدا باشه این الهه هست! یه چی میگم یه چی میشنوید

حالا این افزونه چه گلی به سر ما میزنه؟ به طور کامل میاد میزان کدزنی شمارو مدیریت میکنه. مثلا میگه چند ساعت کلا امروز کد زدید. نسبتش به کل هفته... بیشترین زبان هایی که کد زدید... چمیدونم بیشترین زبان هایی که تو دنیا امروز کد زده شده... اصلا میگم که: الهه هستن ایشون

Auto Close Tag

یه افزونه دیگه برای دوست داران html. این افزونه مثل intellicode عمل میکنه; یعنی سرعت کار شما رو میبره بالا. این افزونه این قابلیت رو به شما میده که بدون گذاشتن <> و فقط نوشتن اسم تگ، تگ تون رو بسازید که این به صورت فوق العاده روی سرعت کدزنی شما تاثیر داره

Better Comments

وقتی این افزونه رو نصب کنید میتونید کامنت هاتون رو زیباسازی و بخش بندی کنید

این عکس رو ببینید کامل متوجه میشید چکار میکنه

Debugger for Chrome

این افزونه از اون افزونه هاس که بدون اون نمیشه سایت زد! یعنی اگه این افزونه رو ندارید باید بی خیال استفاده از js تو سایتتون بشید(خود js کارها میفهن حرفمو) ولی خب... جاهای دیگه بدرد نمیخوره!

بچه ها اینم بگم اگه کروم استفاده نمیکنید debugger for firefox هستا

افزونه مربوط به کروم توسط مایکروسافت و فایرفاکس توسط Firefox DevTools ساخته شده

GitLens — Git supercharged

محاله گیت بلد باشید و وی اس کد داشته باشید و gitlens رو نداشته باشید. گیت لنز اطلاعات ریز و کاملی از وضعیت پروژه شما روی برنچ های گیت میده! مثلا شما اگه یه کد رو 5 دقیقه پیش برده باشید روی گیت، روی خط اون کد که برید به صورت کم رنگ مینویسه اخرین بار کی (5 دقیقه پیش) سیو شده

البته خیلی قابلیت های دیگه هم داره که خودتون باید امتحان کنید

Bracket Pair Colorizer 2

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

از اونجایی که انچنان افزونه مهمی نبود دوتا افزونه هم کنارش میگم که اونا هم برای زیبا سازی هستن

Prettier - Code formatter

از اسمش معلومه و خیلی ناز به توضیح نداره

Material Icon Theme

اگه از اون لوگو هر فایلتون (مثلا پایتون) خسته شدید میتونید از این افزونه برای زیباتر کردن ایکون اون فایلتون استفاده کنید

بچه ها این افزونه برای هر نوع فایلی یه آیکون داره و تو توضیحات افزونه خودش یه لیست گذاشته و میتونید برید ببینید

شد 12 تا افزونه ولی یه سریش نمیشد 1 افزونه حساب کرد

بچه ها دوتا افزونه دیگم هستن که خیلی جالبن : ESLint و Git Project Manger ولی گفتم شاید بشناسید

یه سری افزونه ها هم مثل python یا docker یا C++ یا C# بودن که قطعا کسی که این کاره هست این افزونه هارو داره چون بدون اونا عملا نمیتونه کار کنه

نکته پایانی: اگه خواستید تم یا فونت vs code رو عوض کنید یه سری افزونه ها هستن که با یه سرچ ساده گیر میارید ولی خیلی مهم نبودن و منم نگفتم

بچه ها حتما لایک کنید و کامنت <دمت گرم> بذارید و از همه مهم تر: منو فالو کنید ❤❤ دمتون گرم

یه بار دیگه یاداوری میکنم: وقتی تو اپارات 20 تایی بشیم آموزش هارو شروع میکنم - نگید نگفتی! آموزش های مربوط به html css و فتوشاپ و js و ایشالا پریمیر هم قراره اضافه کنم. پس حمایت یادتون نره

اگرم مشکلی داشتید یادتون نره: بایا کن! چیز ببخشید کامنت بذار جواب میدم

گر نداری رم بالا و خواهی کد بی خطر(چه ربطی داشت -_-) / بریز ویژوال و حالشو ببر XD (سوس ماست)