vs code بیشتر از چیزی که فکرش رو بکنید قابلیت شخصی سازی داره!

vs code بیشتر از چیزی که فکرش رو بکنید قابلیت شخصی سازی داره!

بهترین ویژگی vs code که اون رو برام از ویم متمایز میکنه قابلیت شخصی سازی اونه. شما میتونید همه چیز رو تغییر بدید. از رنگ cursor (نشانگر ماوس. نمیدونم چی معنیش کنم 🙂 ) گرفته تا میانبر های اختصاصی پلاگین های دیوانه کننده که کار هایی که فکرشو نمی کنید انجام میدن. یکی از چیز هایی که خیلی دوستش دارم و باعث میشه به جای ویم از vs code استفاده کنم اینه که میتونیم یه تابلو نقاشی ازش بیرون بیاریم. امیدوارم تا حالا متوجه عشق بی اندازه ام به ویم شده باشید :)تم ها 90٪ کار خوشگل شدن vs code رو به عهده دارن. تم مورد علاقه من چیزی نیست جز gruvbox :javascriptpythonولی اگر بخوام چیز دیگه ای انتخاب کنم این ها انتخاب های اول من هستن:Night owlHorizonOne Dark ProDraculaCelestialعنوان حماسی مقاله درست میگه! همه چیز رو میتونید شخصی سازی کنید. حتی نشانگر ماوس یا همون cursor. مثلا به vs code میگم یه cursor نارنجی میخوام که با عشوه چشمک بزنه. اونم میگه چشم.روی چرخ دنده گوشه پایین و چپ صفحه کلیک کنید و از اونجا گزینه settings رو انتخاب کنید. توی قسمت سرچ دنبال cursor blinking بگردید. چند تا گزینه داره که خودتون میتونید امتحان کنید ولی اگه بخواید با عشوه چشمک بزنه smooth رو انتخاب کنید.اگر بخوایم رنگش رو عوض کنیم باید از راه دیگه ای بریم. وقتی وارد صفحه settings شدید از گوشه بالا سمت راست ایکون زیر رو انتخاب کنید.یک فایل json برای شما باز میشه که تنظیمات vs code داخلش ذخیره شده. باید این رو بهش اضافه کنید: &quotworkbench.colorCustomizations&quot: {
&quoteditorCursor.foreground&quot: &quot#fa7000&quot,
}به جای قسمت پر رنگ شده کد رنگ مورد نظر خودتون رو بگذارید. اگر با json آشنایی ندارید در نهایت فایل تون چیزی شبیه به این میشه: (اگر بعضی چیز ها رو نداشت نگران نباشید. فقط تنظیماتیه که خودم بعدا اضافه کردم)خب. به خط 18 عکس بالا نگاه کنید. فونت vs code رو به همین راحتی به Fira code تغییر دادم. البته راه بهتری هم هست. توی قسمت سرچ دنبال font Family بگردید.اینجا من فونت رو به Fira Code که فونت مورد علاقم هست تغییر دادم. ممکنه روی سیستم شما نصب نباشه. از اینجا دانلودش کنید و نصبش کنید. بعد میتونید ازش استفاده کنید.بدون این پلاگین ها زندگی من درست نمی چرخه. بگذاریم پلاگین ویم رو اول بگم خودمو راحت کنم :)Vim : با این پلاگین میتونید از کلید ها و میانبر های مخصوص ویم و تقریبا همه چیز ویم رو تو vs code استفاده کنید.Auto rename tag: شده که یه تگ h1 داشته باشید و بخواین به h3 تبدیلش کنید؟ اگه به وب سر و کار داشته باشید میدونید که کار اعصاب خورد کنیه چوب باید یک بار اول تگ و یک بار هم آخر تگ اون رو تغییر بدید که احتمال خطا رو هم بالا میبره. با این پلاگین کافیه اسم یکی از تگ ها رو (باز یا بسته)تغییر بدید تا اون یکی خودش تغییر کنه.Better comments: بعضی وقتا به کامنت هایی نیاز داریم که به جای اون رنگ خاکستری زشت یه رنگ متفاوت داشته باشه. با این پلاگین میتونید کامنت هایی با چهار رنگ مختلف داشته باشید و اون ها رو از هم متمایز کنید.CSS peek: با نگهداشتن ماوس روی یک اسم کلاس میتونید کد css اون رو ببینید. حتی کلاس های bootstrap و tailwind که من خیلی دوستشون دارم.Import cost: اگر در شرایطی هستید که حجم سایت خیلی براتون مهمه این پلاگین بار بزرگی رو از دوشتون بر میداره و حجم همه import ها رو محاسبهمیکنه و جلوش مینویسه. میتونید ماژول ها رو به شیوه های مختلف import کنید و با هم مقایسه بکنید.REST Client: این پلاگین زیبا کار همون postman رو انجام میده. میتونید به سرور هاتون ریکوئست بفرستید و جوابش رو همونجا ببینید. میتونید انواع مختلف ریکوئست بفرستید، هدر هاش رو تغییر بدید و همراهش دیتا ارسال کنید.Highlight matching tags: اسمش روشه. تگ هایی که با هم جفت هستن رو هایلایت میکنه تا پیدا کردن و تمایز اونها آسون تر باشه.Material icon theme: مجموعه بزرگی از آیکون ها که زینت بخش فایل های شما خواهد بود :)Prettier: عده کمی هنوز دوست دارن خودشون کد هاشون رو فرمت کنند و بقیه این وظیفه رو به پلاگین هایی مثل Prettier میسپارند. البته برای اینکه کار کنه باید رو چرخ دنده گوشه پایین چپ صفحه کلیک کنید و settings رو انتخاب کنید. توی قسمت سرچ format on save رو جست و جو کنید و تیکش رو بزنید تا هر وقت فایل ذخیره شد به صورت خودکار کد ها فرمت شوند.Tabnine Autocomplete AI: این پلاگین کد هایی رو که میزنید به خاطر میسپاره و با کمی جادوی هوش مصنوعی سعی میکنه ذهن شما رو بخونه و چیز هایی که فکر میکنه قصد دارید تایپ کنید رو بهتون نشون میده و میتونید از بین اون ها انتخاب کنید. البته باید مدتی با این پلاگین کار کنید تا با نحوه کد نویسی شما آشنا بشه.Live Server: وقتی تازه داشتم html و css یاد میگرفتم این پلاگین خیلی بهم کمک کرد. کافیه توی فایل html خودتون راست کلیک کنید و گزینه open with live server رو انتخاب کنید. این پلاگین یه سرور داخلی براتون میسازه و اون رو خودکار توی مرورگر باز میکنه. از این به بعد هر وقت فایل html یا فایل css مربوط به اون تغییر کرد صفحه ای که تو مرورگر براتون باز کرده خودش refresh میشه و نیاز نیست دستی صفحه رو ری-لود کنید.indent-rainbow: واقعیتش این پلاگین بیشتر از اینکه به زیبایی کمک کنه به تشخیص میزان فرو رفتگی کد هام کمک میکنه. درجه های فرورفتگی مختلف با رنگ های مختلف نشون داده میشه و اگر فرو رفتگی کم یا زیاد بود اون رو قرمز میکنه که کمک بزرگی برای پایتون کار هاست.Bracket pair colorizer: پرانتز ها، کروشه ها و براکت های فرفری 🙂 رو با رنگ های مختلف قابل تمایز نشون میده. اگه با پرانتز های زیاد سر و کار دارید این پلاگین بهتون کمک میکنه که جفت پرانتز ها رو راحت تر پیدا کنید.بعضی ها دوست دارند میانبر های شخصی خودشون رو داشته باشند. هر چند من حوصله این کار رو ندارم ولی اگر شما دارید اینطوری این کار رو انجام بدید.روی چرخ دنده گوشه پایین و چپ صفحه کلیک کنید و گزینه keyboard shortcuts رو انتخاب کنید. توی صفحه ای که باز شد همه میانبر های vs code رو میبینید. میتونید اون ها رو به راحتی تغییر بدید. وقتی صفحه رو یکم پایین ببرید متوجه میشید که خیلی از کامند ها اصلا کلید میانبر براشون تعریف نشده. خیلی هاش مربوط به پلاگین هایی هست که نصب کردید. مثلا میخوام یک میانبر جدید به پلاگین ویم اضافه کنم. دنبال vim:show command line بگردید. وقتی ماوس رو روش نگه دارید که علامت به علاوه کنار اون دیده میشه. اون رو بزنید و هر کلیدی که دوست دارید رو فشار بدید. vs code به صورت خودکار اون ها رو تشخیص میده. از این به بعد هروقت اون کلید ها رو با هم فشار بدید صفحه command line ویم براتون به نمایش در میاد. البته به شرط اینکه پلاگین ویم رو نصب کرده باشید :)به همین ترتیب میتونید بقیه میانبر ها رو به راحتی تغییر بدید. اگر از این مطلب خوشتون اومد دکمه لایک رو بفشارید تا بقیه راحت تر به این مطلب برسند.

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *