افزودنی های پیشنهادی من برای Visual Studio Code برای طراحان وب(قسمت 1)

سلام

این پست صرفا بر اساس تجربه خودم نوشتم و اگه افزونه دیگه ای میشناسید که میتونه مفید باشه خیلی عالی میشه معرفی کنید د:

از اونجایی که خودم هم وردپرس کارم در آخر چندتا افزونه برای وردپرس هم معرفی می کنم.

تم ها

برای یه ویرایشگر کد تمی که انتخاب میشه خیلی مهمه چون قراره ساعت ها باهاش ور برید و خیلی مهمه که چشمتون اذیت نشه.

Atom One Dark Theme

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

Tokyo Night

این تم زیاد معروف نیست. اما خب به نظرم زیبا بود به خاطر همین توی این پست قرارش دادم. این افزونه خودش شامل دو تم میشه: Tokyo Night و Tokyo Night Storm که هر دو زیبان. تصویری هم که قرار دادم مربوط به نسخه Storm هست.

آیکون ها

Material Icon Theme

پک آیکون های متریال از محبوب ترین پک های آیکونی هست که توی مارکت VSCode موجوده. این پک به تعداد خیلی زیاد آیکون داره و علاوه بر آیکونی که برای فایل ها قرار میده، آیکون برای پوشه هم داره که تشخیصشون توی قسمت فایل منیجر VSCode راحتتر باشه.(عکسی که قرار دادم نصف اصل عکسی که توی صفحه خود افزونه هست هم نیست)

vscode-icons

این پک آیکون هم یکی از محبوب ترین های VSCode هست. این پک توسط تیم سازنده VSCode طراحی شده اما به شخصه پک متریال رو ترجیح میدم.

افزودنی های HTML

Auto Close Tag

شاید یکی از مفیدترین و ضروری ترین افزونه های VSCode برای HTML همین باشه. همونطور که از اسمش معلومه، تگ ها رو بصورت خودکار تشخیص میده و میبنده.

این افزونه یه قابلیت هم داره که اگه یه تگ رو باز کنید اما نبندینش وقتی کارتون تموم شد با نوشتن /> خودش بصورت خودکار تگ رو میبنده اما بصورت پیشفرض غیرفعاله و باید از منو File > Preferences > Settings > Extensions > Auto Close Tag configuration گزینه Sublime Text3 mode رو تیک بزنید.

Auto Rename Tag

این افزونه هم ساخت همون کسی هست که افزونه Auto Close Tag رو ساخته و این هم افزونه خیلی خوب و جالبی هست. Auto Rename Tag همونطور که از اسمش پیداست و از تصویری که قرارداده، وقتی اسم یه تگ رو عوض میکنید، اگه تگ بسته داشته باشه بصورت خودکار تغییر میکنه که دیگه نیاز نباشه دوباره تغییرش بدید.

HTML Snippets

خب این یکی تصویر خاصی نداره و توضیح خاصی هم نداره. میاد بعضی از تگ ها و خاصیت هایی که توی HTML5 هست رو به VSCode اضافه میکنه و بعضی از مشکلاتی که VSCode با HTML5 داره رو رفع میکنه.

تا اینجا برای فعلا کافیه و به زودی یه مقاله دیگه برای CSS و PHP ارسال میکنم.

قسمت دوم - افزونه های CSS و PHP و Wordpress

قسمت آخر - افزودنی های عمومی

خوش باشید د: