در حال حاضر ویژوال استدیو کد مهمترین و قدرتمندترین ادیتوری‌ست که توسط کاربران و توسعه دهندگان بسیار زیادی مورد استفاده قرار می‌گیرد. VSCode ابزاری است که توسط مایکروسافت توسعه یافته و در زمینه‌های بسیار زیادی کاربردهای مختلفی داشته و توانسته اثبات کند که برای بیشتر زمینه‌های کدنویسی ابزار مفیدی‌ست. یکی از بهترین ویژگی‌های این ویرایشگر، وجود تعداد بسیار زیاد افزونه‌هاست که هر کدام آن‌ها به صورت بلقوه می‌توانند کاربردهای ویژوال استدیو کد را گسترش دهند.
برخی از این افزونه‌ها، افزونه‌هایی هستند که بسیار مهم بوده و توسط بیشتر کدنویس‌ها مورد استفاده قرار می‌گیرد. به همین دلیل امروز قصد داریم شما را با 8 مورد از افزونه‌هایی آشنا کنیم که برای توسعه دهندگان وب می تواند بسیار کاربردی و ضروری باشد. در نهایت بسیار خوشحال خواهیم شد که شما نیز لیستی از افزونه‌های مورد استفاده خود را از طریق بخش نظرات با ما به اشتراک بگذارید.
افزونه CSS Peek
به وسیله این افزونه می‌توانید تعاریف و آی دی های کلاس های CSS را در فایل‌های استایل خود دنبال کنید. وقتی بر روی یک سلکتور در فایل HTML خود راست کلیک می‌کنید، انتخاب گزینه‌ی go to Definition و Peek definition شمارا به کد CSS ای که طراحی کرده‌اید خواهد برد. به همین دلیل پیدا کردن استایل‌های مربوط به یک المان در یک فایل بزرگ به این صورت بسیار راحت می‌شود.
افزونه Live Server
معمولا هنگام ایجاد تغییر در کد، باید مرورگر خود را به صورت دستی رفرش کرده تا تغییرات را مشاهده کنید، درست است؟ به عبارت دیگر اگر 100 تغییر در کد خود ایجاد کنید، باید 100 بار مرورگر خود را رفرش کنید که امری خسته کننده و بسیار وقت گیر است.
Live Server یک افزونه جالب موجود در VSCode است که این کار را برای شما خودکار می‌کند. هر زمان که می‌خواهید تغییرات ظاهری خود را ببینید، در صرفه جویی وقت به شما بسیار کمک می‌کند.
Live Reload هم یک ویژگی همراه با Live Server است و اطمینان حاصل می‌کند که تغییرات شما بلافاصله پس از ذخیره کار اجرا می‌شود. اگر ویژگی ذخیره خودکار VSCode را نیز فعال کنید، این امر هیجان انگیزتر می‌شود. در واقع این افزونه یک سرور توسعه‌ی محلی در Visual Studio Code به وجود می‌آورد تا به سایت‌های استایتک و پویای شما سرویس دهی کند.
افزونه Prettier
Prettier محبوب‌ترین قالب‌دهنده کدها در دنیای ویژوال استدیو کد و توسعه وب، است. مهم نیست کدام عضو گروه قسمتی از کد را می نویسد، Prettier به شما اجازه می‌دهد کدهای گروهی مشابهی داشته باشید. این افزونه به شما امکان می‌دهد که به صورت اتوماتیک آن را اجرا کرده و سریعا تمام پوشه‌های جاوااسکریپت و CSS را قالب‌بندی کنید. اگر قصد دارید ESLine را هم اضافه کنید می‌توانید از prettier ESLine هم استفاده کنید.
این افزونه به شما در قالب‌بندی کدهای‌تان کمک می‌کند و کلمات کلیدی رنگی را برای خواناتر شدن به شما ارائه می‌دهد.
این یک افزونه VSCode مرسوم و محبوب در میان توسعه دهندگان فرانت-اند است که با 11 میلیون بارگیری خیالتان را از استفاده آن راحت می‌کند. شما فقط لازم است یک کلید را فشار دهید و تمام، کد قالب بندی می‌شود. از جمله قابلیت‌های آن عبارتند از:
وقتی استایل کد تغییر می‌کند، Prettier می‌تواند آن را به طور خودکار در کل برنامه اعمال کند.
هیچ کار اضافه‌ای در اصلاح قالب بندی وجود ندارد.
هیچ زمانی برای استایل دهی در درخواست‌های pull تلف نمی‌شود.
نیازی به جستجوی قوانین در راهنمای استایل‌ها نیست.
این ابزار نه تنها از جاوااسکریپت بلکه از سینتکس‌های مختلف مانند TypeScript ، CSS ، JSON ، JSX ، GraphQL و بسیاری دیگر پشتیبانی می‌کند.
افزونه GitLens
چه برای افراد مبتدی و چه برای افرادی که حرفه ای هستند، افزونه Git Lens یک مورد مناسب به شمار می‌رود. این ابزار کارهای مدیریتی در گیت را بسیار ساده‌تر و آسان‌تر می‌کند. استفاده از این ابزار برای من بسیار فرح‌بخش‌تر از دستورات ترمینال و حتی رابط‌های گرافیکی Git است.
تقریبا تمام گزینه‌های موجود در این ابزار قابلیت شخصی‌سازی دارند. با استفاده از Git Lens می‌توانید در زمان کدنویسی به صورت بلادرنگ از سیستم گیت فییدبک دریافت کنید. می‌خواهید بدانید که چه کسی آن تابع که کار نمی‌کند را نوشته است؟ می‌خواهید بدانید که در کامیت‌های آخر چه میزان کدها تغییر داشته اند؟ از اینکه چقدر در یک پروژه یا (خراب‌کاری) مشارکت داشته اید خبر ندارید؟ Git Lens تمام این موارد را برای شما مدیریت می‌کند.
افزونه ESLint
Code linting یک تجزیه و تحلیل استاتیک است که برای بررسی خطاهای برنامه یا کد استفاده می‌شود و به دستورالعمل‌های سبک خاصی پایبند نیست .ابزارهای لینتینگ از جمله ESLint به توسعه‌دهندگان این امکان را می‌دهند تا بدون استفاده از جاوااسکریپت، مشکلات کد خود را کشف کنند.
خیلی از مردم لینتینگ را دوست دارند و برخی دیگر نیز چنین حسی به آن ندارند. اما این امر برای کد تمیز بسیار مفید است و جای هیچ بحثی در آن نیست. اگر شما یک توسعه‌‌دهنده جاوا اسکریپت هستید، این برنامه با دانلود 24 میلیونی خود بهترین ابزار برای شما خواهد بود.
افزونه Color Highlight
یک پلاگین کوچک است که به شما اطلاعات متنوعی درباره ی رنگ هایی که در CSS از آن ها استفاده کرده‌اید، می‌دهد. با مکث برروی یک رنگ می‌توانید یک نمایش بزرگتر از آن و همچنین کد آن در فرمت‌های رنگی دیگر مانند RGB، HSL و HEX را ببینید.
افزونه Path IntelliSense for CSS, HTML, and JavaScript
درست است که به صورت پیشفرض در ویژوال استدیو کد لیست پیشنهادات کامل کردن خودکار کدها ارائه می‌شود اما اگر به دنبال یک گزینه هوشمندتر و البته مفیدتر برای کدهای HTML – CSS – Javascript هستید این افزونه می‌تواند بسیار کاربردی باشد. در این افزونه شما می‌توانید پیشنهادات هوشمندی براساس کاری که قصد انجام آن را دارید دریافت کنید که در نمونه خود کم نظیر و جذاب است.
افزونه Rainbow Brackets
مدیریت پرانتز و کروشه‌هایی که باز و بسته کرده‌اید گاهی اوقات بسیار سخت و گیج کننده می‌شود به همین دلیل است که استفاده از افزونه‌ای مانند Rainbow Brackets می‌تواند کاربردی باشد. با استفاده از رنگ بندی‌های مختلف این افزونه شما می‌توانید به سادگی پرانتزهای باز و بسته شده مرتبط با همدیگر را کشف کرده و دچار سردرگمی نشوید.
در پایان
ویژوال استدیو کد حاوی افزونه‌های بسیار زیادی است که هر کدام کاربرد متفاوتی دارند کشف کردن هر کدام از این موارد نیز کار جذاب و مفرحی است بنابراین با جستجو در بین این افزونه‌ها مطمئنا می‌توانید کاربردهای متنوعی را کشف کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید