10 پلاگین برتر vscode
در سال 2020 خیلی ادیتور (ide) های زیاد و متوعی وجود دارد که محبوب ترین آن ها در بازار برنامه نویسان ادیتور VS Code نام دارد ، یکی از دلایلی که باعث شده شده این ادیتور به محبوبیت بالایی برسد متن باز بودن و رایگان بودنش هست .
تا به حال با افراد زیادی معاشرت و گفت و گو کرده ام و میتونم به جرات بگم 70 درصد برنامه نویسان وب از این ادیتور قدرتمند استفاده میکنن یکی از دلایلی که باعث شده همه به سمت این ide هجوم ببرند سبک بودن و انعتاف پذیر بودنش است ، اگر حجم VS Code را با ادیتور های دیگری مانند php Storm مقایسه کنیم VS Code تقریبا 5 برابر سبک تر است .
توی این مقاله قصد دارم 10 پلاگین یا همون افزونه ضروری رو به شما دوستان عزیز یوزرکد معرفی کنم خب بریم برای معرفی کردن این پلاگین ها .
Auto Rename Tag – 1
برای مثال فرض کنید که یک تگ h1 توی صفحه دارید و میخواید اون رو به h2 تغییر بدید فقط کافیه تگ باز شده h1 رو تغییر بدید و خود ویژوال کد به طور اتوماتیک براتون تگ بسته شده هم تغییر میده و دیگه نیاز نیست که خودتون بین کد هاتون دنبال تگ بسته شده بگردید
شاید توی نگاه اول به نظرتون این افزونه به درد نخور و غیر کاربردی بیاد ولی وقتی شما کد های زیادی توی یک صفحه داشته باشید اگر بخواید اون تگ رو همانند مثال بالا که من زدم تغییر بدید واقعا براتون سخت میشه پیدا کردن تگ بسته شده ، و اینجاست که VS Code قدرت خودش رو نشون میده و باعث راحتی کار شما و بقیه برنامه نویسان میشه و اینجا میتونید متوجه بشید که چرا بیشتر برنامه نویسان و کد نویسان از این ادیتور قدرتمند استفاده می کنند .
Open in Browser – 2
پلاگین بعدی که میخوام بهتون معرفی کنم Open in Browser نام داره این پلاگین شاید زیاد به کارتون نیاد ولی خب در عین ساده بودن میتونه بهتون کمک کنه که خروجی کد هایی که زدید رو مشاهده کنید برای خروجی گرفتن و مشاهده اون توی مرورگرتون کافیه کلید های ترکیبی Alt + B رو روی کیبردتون فشار بدید و خروجی اون رو توی مرورگرتون مشاهده کنید.
اگر میخواید خروجی کد هایی که میزنید رو به صورت زنده توی ویژوال کد خودتون مشاهده کنید کافیه پلاگین بعدی که بهتون معرفی میکنم رو نصب کنید و کارهای خودتون رو زودتر انجام بدید ، پس با من همراه باشید تا بریم سراغ راهی ساده تر برای خروجی گرفتن از کد هامون.
HTML Preview – 3
همون طور که توی پاراگراف قبلی گفتم شاید شما نخواید کد هاتون رو توی مرورگر ببینید و بخواید به طور زنده هر تغییراتی روی کدتون میدید به طور زنده به شما خروجی رو توی ویژوال کد نشون بده برای اینکار فقط کافیه از منو Extension پلاگین HTML Preview رو سرچ کنید و روی Install کلیک کنید بعد از اینکه نصب شد کافیه یکبار ویژوال کد خودتون رو ببندید و دوباره اون رو باز کنید و حالا میتونید با فشار دادن کلید های ترکیبی Ctrl + k ادیتور زنده را فعال کنید و در پنجره ای که سمت راست باز می شود خروجی کد های خود را به صورت زنده مشاهده کنید .
اگر کلید های ترکیبی Ctrl + k برای شما کار نکرد میتواندی مطابق تصویر زیر پنجره ادیتور زنده رو باز کنید .
نکته : این پلاگین میتونه کد نویسی شمارو تسریع بده پس حتما پیشنهاد میکنم اون رو نصب کنید.
Color Highlight – 4
این پلاگین هم در ظاهر خیلی ساده و به درد نخور به نظر میاد اما در واقعیت این افزونه هم برای استفاده شما ضروری است ، صبر کنید یک مثال برای شما بزنم تا به قدرت و مهم بودن این افزونه توی ادیتور ویژوال کد پی ببرید ، تقریبا میشه گفت 70 درصد برنامه نویسان و کد نویسان مثل خود من کد رنگ هارو حفظ نیستیم و نمیتونم تشخیص بدیم کد رنگی که توی کد هامون نوشته شده چه رنگیه خب اگر بخوایم یک رنگ رو بین هزاران خط کد تغییر بدیم داستان چیه ؟ همون طور که از اسم این افزونه معلومه این افزونه رو وقتی نصب می کنید این مشکل رو با هایلایت کردن کد های رنگ حل میکنه .
اگر به تصویر زیر دقت کنید میبینید که کد های هگزا دسیمال رو به صورت رنگی نوشته و این باعث میشه هم محیط کد زنی قشنگ و آرامش بخشی رو برای خودتون درست کنید هم موقع پیدا کردن و تغییر دادن یک رنگ بین هزاران خط کد سر در گم نشید.
IntelliSense for CSS class names in HTML -5
اگر به گیف بالا کمی دقت کنید متوجه میشید کاربرد این افزونه چیه این افزونه در واقع به شما کمک میکنه تا با نوشتن فقط چند کاراکتر از یک تگ یا کلاس های بوتسترپ و یا css اون رو تکمیل کنید . برای مثال برای نوشتن کلاس btn-primary فقط کافیهbtn رو تایپ کنید و این افزونه یک سری پیشنهاد هارو به شما میده که میتونید یکی از اون هارو با کلید های جهت روی کیبرد انتخاب کنید .
js snippets – 6
میشه گفت چند سالی هست که همه برنامه نویسان به دنبال یادگیری جاوا اسکریپت و فریمورک های این زبان هستن و سعی میکنن قدرت و سرعت کد نویسی خودشون رو توی این زبان بهبود ببخشن اگر شما هم درحال یادگیری جاوا اسکریپت هستید و یا به اون مسلط هستید این افزونه قدرتمند و ضروری کمک بسزایی در بهبود بخشیدن به سرعت کد نویسیتون توی این زبان رو میده .
اگر هم هنوز شروع نکردید میتوانید از آموزش رایگان جاوا اسکریپت سایت یوزرکد آموزش ببینید
اگر به عکس بالا توجه کنید میتونید متوجه بشید دقیقا این افزونه چطوری میتونه به سرعت کد نویسی شما کمک کنه برای مثال اگر میخواهید دستور Console.log() را تایپ کنید فقط کافیست cl را بنویسید و اینتر بزنید این افزونه به طور اتوماتیک برای شما عبارت Cosole.log را تایپ می کند پس بهتون توصیه میکنم همین الان افزونه قدرتمند رو نصب کنید.
برگرفته از (https://usercode.ir)
