۱۰ افزونه کد نویسی عالی برای VSCode

تیم ویراوردپرس تصمیم بر آن دارد که پیرو مقاله آموزشی ” ویژوال استدیو کُد چیست؟ مراحل نصب  VSCode ” به معرفی و بررسی ۱۰ افزونه کد نویسی عالی برای این  ویرایشگر بسیار محبوب در بین وبمستران بپردازد. کاربران و برنامه‌نویسان از این ویرایشگر به دلیل رایگان بودن، متن باز بودن و تطابق آن با پلتفرم‌های مختلف، کار با آن را دوست دارند؛ به همین دلیل توسعه‌دهندگان ویژوال استدیو کد، به طور مرتب در حال انتشار نسخه‌هایی با ویژگی‌های به‌روز و کارا تر از این پلتفرم هستند.

افزونه‌هایی در محیط ویژوال استدیو کد راه‌اندازی می‌شوند کههر کدام قابلیت و ویژگی‌های خاص خود را دارند تا کار برنامه نویسی را منسجم تر و راحت‌تر کنند. ما در ادامه به بررسی ۱۰ افزونه کد نویسی عالی در محیط  VSCode خواهیم پرداخت و هر کدام را معرفی و ویژگی‌های ممتاز آن‌ها را شرح خواهیم داد.

1.      افزونه Better Comments

افزونه کد نویسی Better Comments یک افزونه برای محیط توسعه VSCode است که به شما امکان می‌دهد کامنت‌های خود را با رنگ‌بندی و فرمت‌بندی بهتر نمایش دهید. این افزونه قابلیت‌های مختلفی را برای بهبود قابلیت خواندن کامنت‌ها در کد ارائه می‌دهد.

با استفاده از افزونه Better Comments می‌توانید کامنت‌ها را با استفاده از برچسب‌های مختلف به چند دسته‌بندی مختلف تقسیم کنید و هر دسته را با رنگی خاص نشان دهید. برخی از برچسب‌های استفاده شده در این افزونه عبارتند از:

• برای برجسته کردن نکته‌های مهم یا اطلاعات اساسی.
• برای نشان دادن سوالاتی که برای بررسی و توضیح بیشتر نیاز است.
• برای نشان دادن بخش‌هایی از کد که باید در آینده به آن‌ها برگردید و کار روی آن‌ها را انجام دهید.
• برای برجسته کردن بخش‌هایی از کد که قابل توجه هستند.
• برای کامنت‌های معمولی.

با استفاده از این افزونه، کامنت‌های شما با رنگ‌های متفاوت نمایش داده می‌شوند و به شما کمک می‌کنند که به سرعت بخش‌های مختلف کد را شناسایی کنید و بخش‌های مهم را از بخش‌های غیرضروری تمیزتر جدا کنید.

بنابراین، افزونه Better Comments در VSCode به شما کمک می‌کند که کامنت‌های خود را به صورت بهتر و سازمان‌یافته‌تر نمایش دهید و بخش‌های مهم کد را بهتر بشناسید.

2.      افزونه Code Time

افزونه Code Time یک افزونه برای محیط توسعه ویژوال استدیو کد (VSCode) است که به شما امکان می‌دهد زمانی که در حال توسعه پروژه‌های نرم‌افزاری هستید، اطلاعات مربوط به زمان مصرف شده، آمار کد و تحلیل عادات توسعه‌دهندگان را دریافت کنید.

با استفاده از افزونه Code Time می‌توانید به صورت دقیق مشاهده کنید که چه مقدار زمان را برای هر پروژه یا فایل مصرف کرده‌اید. همچنین، می‌توانید معلوماتی مانند زمان شروع و پایان کار در هر پروژه و همچنین تعداد کلیک‌ها، تغییرات، حجم کد نوشته شده و غیره را دریافت کنید. افزونه کد نویسی Code Time به صورت خودکار و به‌طور مداوم این اطلاعات را جمع‌آوری می‌کند و به شما گزارشاتی بر اساس آنها ارائه می‌دهد.

علاوه بر آمار و اطلاعات زمانی، افزونه Code Time قابلیت‌های بیشتری را نیز داراست. برخی از ویژگی‌های این افزونه عبارتند از:

• ارزیابی کیفیت کد:

Code Time می‌تواند به شما کمک کند تا کیفیت کد خود را ارزیابی کنید و معیارهایی مانند تعداد خطاها، پیچیدگی کد و سایر موارد را بررسی کنید.

• پیشنهادات بهبود کد:

با تحلیل روند توسعه‌ی خود، این افزونه کد نویسی می‌تواند به شما پیشنهادهایی برای بهبود کد و افزایش بهره‌وری را ارائه دهد.

• ادغام با سیستم‌های مدیریت پروژه:

قابلیت اتصال به سیستم‌های مدیریت پروژه مانند GitHub و GitLab را داراست تا بتوانید اطلاعات زمانی را با دیگر اعضای تیم به اشتراک بگذارید و با همکاران خود رقابت کنید.

• هشدارها و اعلان‌ها: Code Time

می‌تواند هشدارها و اعلان‌هایی را به شما ارسال کند که به شما کمک می‌کند زمان را بهینه‌تر مدیریت کنید و به اهداف زمانبندی خود پایبند باشید.

با استفاده از افزونه کدنویسی Code Time در VSCode، شما می‌توانید بهبودهایی در فرآیند توسعه پروژه‌های خود داشته باشید، زمان را بهینه‌تر مدیریت کنید. می‌بایست افزونه Code Time را از بازار افزونه‌های VSCode دریافت کنید. پس از نصب، برای فعالسازی آن، به قسمت تنظیمات VSCode بروید و در قسمت تنظیمات افزونه‌ها، گزینه Code Time را پیدا کنید و تنظیمات مربوطه را پیکربندی کنید.

در نهایت، شما می‌توانید از بخش داشبورد Code Time به آمار و گزارشات زمانی دسترسی پیدا کنید. این گزارشات شامل اطلاعاتی مانند زمان صرف شده در پروژه‌ها، نمودارهای فعالیت روزانه و هفتگی، پروژه‌های پراستفاده و غیره است. همچنین، می‌توانید با استفاده از برچسب‌ها و فیلترها، اطلاعات مورد نیاز خود را به صورت دلخواه تنظیم کنید.

از آنجایی که افزونه Code Time با استفاده از اتصال به سرورهای خود، اطلاعات را جمع‌آوری می‌کند، برای استفاده از این افزونه نیاز به ایجاد یک حساب کاربری در Code Time دارید. اما برای استفاده از امکانات اصلی افزونه، ایجاد حساب کاربری اجباری نیست و می‌توانید بدون آن از بخش‌های کاربردی Code Time استفاده کنید.

3.      افزونه HTML and CSS autocompletion

افزونه‌های HTML و CSS autocompletion یا تکمیل خودکار HTML و CSS در محیط توسعه ویژوال استدیو کد (VSCode) ابزارهایی هستند که به شما کمک می‌کنند در حین کدنویسی HTML و CSS، کدهای خود را به‌صورت خودکار تکمیل کنید و پیشنهادهای مربوط به نامه‌ها، ویژگی‌ها و خصوصیات را دریافت کنید. این افزونه‌ها به کاربران کمک می‌کنند تا با سرعت بیشتری کد بنویسند و از اشتباهات نحوی جلوگیری کنند.

به طور کلی، افزونه‌های HTML و CSS autocompletion قابلیت‌های زیر را داراست:

با استفاده از این افزونه‌ها، می‌توانید در حین نوشتن کد HTML و CSS، از پیشنهادها و تکمیل‌های خودکار استفاده کنید. این پیشنهادها می‌توانند شامل تگ‌های HTML، ویژگی‌ها، مقادیر پیشفرض، نامها و سایر عناصر مربوط به زبان‌های برنامه‌نویسی باشند.

این افزونه های کدنویسی قادرند در هنگام تایپ نامها و ویژگی‌ها، پیشنهادهایی را ارائه دهند. به‌عنوان مثال، هنگام تایپ نام یک تگ HTML، افزونه می‌تواند لیستی از تگ‌های موجود را نشان دهد و در هنگام تایپ نام یک ویژگی CSS، می‌تواند پیشنهادهای مربوط به آن ویژگی را ارائه کند.

بسیاری از افزونه‌های HTML و CSS autocompletion دارای قابلیت داکیومنتاسیون هستند. این به این معنی است که با استفاده از این افزونه‌ها، می‌توانید بر روی یک عنصر یا ویژگی کلیک کنید و اطلاعات مربوط به آن را مشاهده کنید، از جمله توضیحات، مثال‌ها و مستندات مربوطه.

بسیاری از افزونه‌های HTML و CSS autocompletion امکاناتی برای سفارشی‌سازی دارند. شما می‌توانید تنظیمات مربوط به نمایش پیشنهادها، فرمت کدها، ترجمه‌ها و سایر جزئیات را تغییر دهید تا بهترین تجربه را در حین توسعه‌ی کد HTML و CSS داشته باشید.

4.      افزونه Paste JSON as Code

افزونه “Paste JSON as Code” یک افزونه بسیار مفید برای محیط توسعه ویژوال استدیو کد (VSCode) است که به شما امکان می‌دهد یک بلاک JSON را به شکل کد قابل اجرا در زبان‌های برنامه‌نویسی مختلف، مانند JavaScript، TypeScript، C#, Swift و… تبدیل کنید.

با استفاده از این افزونه، شما می‌توانید یک بلاک JSON را کپی کنید و با استفاده از یک دستور میانبر، آن را به صورت کدی در زبان برنامه‌نویسی مورد نظر خود تبدیل کنید. افزونه به‌صورت خودکار کدی ایجاد می‌کند که شامل تعریف متغیرها و ساختار داده‌های مورد نیاز برای تجسم داده‌های JSON است.

نصب و استفاده از افزونه “Paste JSON as Code” به شرح زیر است:

1. بازکردن مرورگر VSCode و رفتن به بخش افزونه‌ها.
2. جستجوی “Paste JSON as Code”.
3. یافتن افزونه و کلیک بر روی “نصب” برای نصب آن.
4. پس از نصب، بستن صفحه افزونه و برگشت به صفحه اصلی VSCode.
5. کپی کردن یک بلاک JSON.
6. استفاده از دستور میانبر “Ctrl+Shift+P” (برای ویندوز یا لینوکس) یا “Cmd+Shift+P” (برای مک) برای بازکردن پنجره فرمان.
7. تایپ “Paste JSON as Code” در پنجره فرمان و انتخاب دستور مربوطه.
8. افزونه بلاک JSON را به صورت کد قابل اجرا در زبان برنامه‌نویسی مورد نظر شما تبدیل خواهد کرد.
9. کد تولید شده را در فایل مناسب خود در پروژه VSCode خود قرار دهید.

توجه داشته باشید که برای استفاده از این افزونه، شما باید یک بلاک JSON معتبر را قبل از استفاده کپی کنید. همچنین، این افزونه قابلیت‌هایی برای سفارشی‌سازی و تنظیمات اضافی نیز دارد که می‌توانید آن‌ها را در تنظیمات VSCode تغییر دهید.

5.      افزونه Pretty TypeScript Errors

افزونه “Pretty TypeScript Errors” یک افزونه بسیار مفید برای محیط توسعه ویژوال استدیو کد (VSCode) است که به شما کمک می‌کند خطاها و اطلاعات خطاهای نمایش داده شده توسط کامپایلر TypeScript را به صورت زیبا و خوانا نمایش دهید.

وقتی که با استفاده از افزونه “Pretty TypeScript Errors” کار می‌کنید، به جای نمایش خطاها در قالب پیغام‌های متنی ساده، خطاها و اطلاعات مربوطه به شکل گرافیکی و رنگارنگ نمایش داده می‌شوند. این افزونه برای تجمیع و نمایش اطلاعات خطاهای TypeScript از افزونه‌های دیگری مانند “ts-node” و “tsc” استفاده می‌کند.

برای نصب و استفاده از افزونه “Pretty TypeScript Errors” به شرح زیر عمل کنید:

1. بازکردن مرورگر VSCode و رفتن به بخش افزونه‌ها.
2. جستجوی “Pretty TypeScript Errors”.
3. یافتن افزونه و کلیک بر روی “نصب” برای نصب آن.
4. پس از نصب، بستن صفحه افزونه و برگشت به صفحه اصلی VSCode.
5. اطمینان حاصل کنید که پروژه شما از تایپ اسکریپت استفاده می‌کند و فایل‌های آن دارای خطاهایی هستند.
6. وقتی که کامپایلر TypeScript خطاها را نشان می‌دهد، افزونه “Pretty TypeScript Errors” خطاها را به صورت زیبا و گرافیکی نمایش خواهد داد.

6.      افزونه Thunder Client / Postman

افزونه‌های Thunder Client و Postman برای اجرا و تست درخواست‌های HTTP در محیط توسعه ویژوال استدیو کد (VSCode) استفاده می‌شوند. این افزونه‌ها به شما امکان می‌دهند تا درخواست‌های API را ارسال کنید و پاسخ‌ها را دریافت کنید، برای توسعه، تست و اشتراک‌گذاری API‌ها و سرویس‌های وب.

در زیر به توضیح کاربردهای این دو افزونه کد نویسی می‌پردازیم:

1. Thunder Client:

افزونه Thunder Client یک ابزار سبک و سریع برای اجرای درخواست‌های API در VSCode است. با استفاده از این افزونه، شما می‌توانید درخواست‌های GET، POST، PUT، DELETE و… را به سادگی ارسال کنید و پاسخ‌ها را دریافت کنید. برخی از کاربردهای این افزونه عبارتند از:

• تست و اشتراک‌گذاری API‌ها و سرویس‌های وب.
• اجرای درخواست‌های API برای توسعه و پیشرفت پروژه.
• نمایش و بررسی پاسخ‌های دریافتی از سرور.
• اجرای درخواست‌های مکرر و تکراری برای تست عملکرد و بهبود عملکرد سیستم.

2. Postman:

Postman یکی از ابزارهای محبوب و قدرتمند برای توسعه، تست و اشتراک‌گذاری API‌ها است. این ابزار قابلیت ارسال درخواست‌های مختلف HTTP را داراست و به شما امکان می‌دهد پاسخ‌ها را بررسی کنید. برخی از کاربردهای Postman عبارتند از:

• طراحی و توسعه درخواست‌های مختلف و تنظیم متغیرها و پارامترهای آن‌ها.
• تست و اعتبارسنجی واکنش سرور به درخواست‌ها.
• تنظیم و اشتراک‌گذاری محیط‌های تست و توسعه API بین اعضای تیم.
• ایجاد مستندات API و محیط‌های تست آن.

هر دو افزونه Thunder Client و Postman قابلیت‌های مشابهی دارند و به کاربران کمک می‌کنند تا درخواست‌های API را در محیط VSCode اجرا و مدیریت کنند. انتخاب بین این دو با توجه به تجربه و سلیقه شخصی شماست.

7.      افزونه MERN Stack Snippets

افزونه MERN Stack Snippets یک ابزار مفید برای توسعه دهندگان است که با استفاده از استفاده از تکنولوژی های MERN (MongoDB, Express.js, React.js و Node.js) کار می‌کنند. این افزونه شامل مجموعه‌ای از قطعه‌کد‌های کوتاه و قابل استفاده می‌باشد که در فرآیند توسعه پروژه‌های MERN می‌تواند به شما کمک کند.

در زیر به توضیح کاربردهای افزونه MERN Stack Snippets می‌پردازیم:

• ایجاد قطعه‌کد سریع:

با استفاده از افزونه MERN Stack Snippets، شما می‌توانید قطعه‌کد‌های متداول در پروژه‌های MERN را به سرعت ایجاد کنید. به جای تایپ مجدد کدها، شما می‌توانید از این قطعه‌کدها استفاده کنید و زمان و تلاش خود را صرفه‌جویی کنید.

• افزایش بهره‌وری:

با استفاده از قطعه‌کدهای آماده، شما می‌توانید بهره‌وری خود را در فرآیند توسعه افزایش دهید. با داشتن قطعه‌کدهایی که توسط توسعه دهندگان ماهر ایجاد شده‌اند، می‌توانید به سرعت و با کیفیت بالا پروژه‌های MERN خود را توسعه دهید.

• آموزش و یادگیری:

این افزونه می‌تواند به عنوان یک منبع آموزشی نیز مفید باشد. با استفاده از قطعه‌کدهای آماده، شما می‌توانید نحوه استفاده از تکنولوژی‌های MERN را یاد بگیرید و به سرعت با مفاهیم و الگوهای معماری آشنا شوید.

• کاهش خطاها:

استفاده از قطعه‌کدهای استاندارد و آماده می‌تواند به شما در کاهش خطاها کمک کند. زیرا این قطعه‌کدها توسط توسعه دهندگان حرفه‌ای تست شده‌اند و بهترین روش‌ها و الگوهای برنامه‌نویسی را پیاده‌سازی می‌کنند.

• افزایش سرعت توسعه:

با استفاده از قطعه‌کدها، شما می‌توانید سرعت توسعه پروژه‌های MERN خود را افزایش دهید. زمانی که شما دسترسی سریع به قطعه‌کدهای استاندارد و متداول دارید، می‌توانید در کمترین زمان ممکن به پیاده‌سازی و توسعه پروژه بپردازید.

توصیه میکنم که قبل از استفاده از قطعه‌کدهای آماده، حتماً آن‌ها را مورد بررسی و تنظیم مجدد کنید تا به نیازهای خاص پروژه شما بخوبی پاسخ دهند. همچنین، اطمینان حاصل کنید که قطعه‌کدهای افزونه با نسخه‌های جدید تکنولوژی‌های MERN سازگاری دارند.

8.      افزونه Inline Fold

افزونه Inline Fold یک افزونه برای محیط توسعه ویرایشگر کد مانند Visual Studio Code است که امکان جمع‌بندی (Folding) خطوط کد را درون خود خطوط کد فراهم می‌کند. با استفاده از این افزونه، شما می‌توانید قسمت‌هایی از کد را که نیازی به نمایش جزئی دارند را جمع‌بندی کنید تا خوانایی بیشتری در کد خود داشته باشید.

در زیر به توضیح کاربردهای افزونه کد نویسی Inline Fold می‌پردازم:

• جمع‌بندی بخش‌های بزرگ کد:

وقتی با کدهای بزرگ و پیچیده کار می‌کنید، این افزونه به شما امکان می‌دهد بخش‌های مهم و جزئیات کمتر را جمع‌بندی کنید. به عنوان مثال، می‌توانید بخش‌هایی از کد که بهتر است در ابتدای توسعه مورد توجه قرار نگیرند را جمع‌بندی کنید تا فقط بخش‌های مورد نیاز را ببینید.

• کاهش سریع نمایش کد:

با استفاده از Inline Fold، می‌توانید خطوط کد غیرضروری را پنهان کنید و تنها بخش‌هایی از کد که در حال حاضر نیاز به مشاهده دارید را نمایش دهید. این کاهش نمایش کد می‌تواند به شما کمک کند تا بیشترین مقدار از فضای صفحه را به نمایش بخش‌های مهم‌تر کدی که در حال توسعه هستند، اختصاص دهید.

• افزایش خوانایی کد:

با استفاده از جمع‌بندی خطوط کد، می‌توانید خوانایی کد خود را بهبود ببخشید. وقتی کدها جمع‌بندی شوند و تنها بخش‌های مهم و ضروری نمایش داده شوند، کدتان به صورت سلسله‌مراتبی و منظم‌تر به نظر می‌رسد و قابل فهم‌تر می‌شود.

• کاهش خطاها:

با کاهش تعداد خطوط کدی که در حال نمایش هستند، احتمال برخورد با خطاها و اشتباهات کوچک نیز کاهش می‌یابد. زمانی که فقط بخش‌های مورد نیاز را مشاهده می‌کنید، احتمال دیدن و رفع خطاها و اشتباهات در کد بالاتر است.

• افزایش سرعت توسعه:

با استفاده از Inline Fold، شما می‌توانید به سرعت بخش‌های مورد نیاز کد خود را پیدا کنید وویرایش کنید. این باعث افزایش سرعت توسعه و بهبود بهره‌وری شما در فرآیند برنامه‌نویسی می‌شود.

مهم است بدانید که استفاده از Inline Fold باید به شیوه‌ای منطقی و معقولانه انجام شود. نباید بخش‌های مهم کد را جمع‌بندی کنید به طوری که خوانایی و قابل فهمی کد کاهش یابد. همچنین، توصیه می‌شود که کدهای جمع‌بندی شده را به طور منظم بازبینی کنید تا اطمینان حاصل کنید که هیچ بخش مهمی از کد پنهان نشده است و عملکرد صحیح برنامه را تحت تأثیر قرار نمی‌دهد.

9.      افزونه Code Tour

افزونه کدنویسی Code Tour یک افزونه برای محیط توسعه ویرایشگر کد مانند Visual Studio Code است که به شما امکان می‌دهد تور کد را برای توضیح و آموزش بخش‌های مختلف کد ایجاد کنید و به دیگران ارائه دهید. با استفاده از این افزونه، شما می‌توانید مراحل و فرآیندهای مختلف را در کد خود بصورت تعاملی و قدم به قدم توضیح دهید.

در ادامه به بررسی کاربردهای افزونه Code Tour خواهیم پرداخت:

• آموزش کد به دیگران:

با استفاده از Code Tour، می‌توانید توری از کد خود ایجاد کنید و به دیگران آموزش دهید. این افزونه به شما امکان می‌دهد توضیحات، توضیحات صوتی، توضیحات تصویری و برچسب‌های توضیحی را به هر بخش از کد اضافه کنید. با اجرای تور کد، می‌توانید دیگران را در کنار خودتان قرار دهید و آن‌ها را در هر مرحله از کد همراهی کنید.

• راهنمایی در کار با کد:

Code Tour به شما امکان می‌دهد به راحتی راهنمایی کاربران جدید در کار با کد را انجام دهید. با ایجاد تور کد، می‌توانید نکات کلیدی و مهم در هر بخش از کد را توضیح داده و کاربر را در فرآیند یادگیری و فهم کد همراهی کنید.

• پیمایش در کد:

با استفاده از Code Tour، شما می‌توانید کاربران را در یک مسیر مشخص در کد هدایت کنید. این افزونه به شما امکان می‌دهد تعدادی از فایل‌ها و بخش‌های کد را به ترتیبی که می‌خواهید معرفی کنید و کاربران را در طول این مسیر هدایت کنید. این می‌تواند در مواردی مفید باشد که می‌خواهید کد را به طور سلسله‌مراتبی و قدم به قدم توضیح دهید.

• همکاری و بازبینی کد:

به تیم‌های توسعه نیز کمک می‌کند. شما می‌توانید تور کد را با سایر اعضای تیمتان به اشتراک بگذارید و آن‌ها را در بررسی و بازبینی کد همراهی کنید. این امکان به تیم‌ها کمک می‌کند تا به صورت مشارکتی کد را بررسی کنند و برخی از موارد را به طور تعاملی توضیح دهند.

• مستند ساز

افزونه Code Tour به شما امکان می‌دهد تور کد را برای مستندسازی کد خود ایجاد کنید. با استفاده از توضیحات و توضیحات تصویری، می‌توانید فرآیند اجرای کد را به صورت تعاملی و قدم به قدم مستندسازی کنید. این امکان به شما کمک می‌کند تا روش کار و منطق پشت کد خود را بهبود بخشید و برای دیگران بهبودی در فهم کد فراهم کنید.

مهم است بدانید که استفاده از Code Tour باید به شیوه‌ای منطقی و متعادل انجام شود. باید توجه داشت که تور کد برای راهنمایی و توضیح بخش‌های کد استفاده می‌شود و نباید کدهای پیچیده و غیرضروری را در تور اضافه کنید. همچنین، توصیه می‌شود که تور کد را به طور منظم بازبینی کنید تا اطمینان حاصل کنید که توضیحات به درستی آماده شده‌اند و کارایی و عملکرد صحیح برنامه را تحت تأثیر قرار نمی‌دهد.

10.   افزونه Auto Close Tag

افزونه “Auto Close Tag” در ویرایشگر کد Visual Studio Code یک افزونه مفید است که به صورت خودکار برچسب‌های بسته‌شونده را به کدهای HTML و XML اضافه می‌کند. با این افزونه، هنگام تایپ کردن یک برچسب باز، برچسب بسته‌شونده متناظر با آن به صورت خودکار ایجاد می‌شود.

با استفاده از Auto Close Tag، می‌توانید فرآیند نوشتن کدهای HTML و XML را سریعتر و کارآمدتر کنید. به طور معمول، هنگام تایپ کردن برچسب باز (مثلاً `<div>`)، افزونه به صورت خودکار برچسب بسته‌شونده متناظر (مثلاً `</div>`) را ایجاد می‌کند و مکان نمایش نشانه تایپ را درست می‌گذارد تا بتوانید به راحتی کد خود را بنویسید.

برای نصب و استفاده از افزونه Auto Close Tag در Visual Studio Code، می‌توانید مراحل زیر را دنبال کنید:

1. باز کنید Visual Studio Code.
2. روی آیکون Extensions در نوار کناری سمت چپ کلیک کنید یا از طریق منوی View -> Extensions پنجره Extensions را باز کنید.
3. در باکس جستجوی بالای صفحه، “Auto Close Tag” را تایپ کنید.
4. افزونه Auto Close Tag را در لیست نتایج پیدا کنید و بر روی دکمه Install کلیک کنید.
5. پس از نصب، دکمه Enable را فشار دهید تا افزونه فعال شود.

اکنون می‌توانید در هنگام نوشتن کدهای HTML و XML، برچسب‌های بسته‌شونده به صورت خودکار تولید شده را مشاهده کنید و فرآیند تایپ کردن کدها را سریعتر انجام دهید.

سخن نهایی

در این مقاله به بررسی 10 مورد از برترین افزونه ها کدنویسی پرداختیم که در ویژوال استدیو کد استفاده می‌شوند. کاربردها و ویژگی‌های هرکدام را به‌طور مفصل شرح دادیم، امیدوار هستیم که بتوانید افزونه موردنیاز خود را به درستی و راحتی انتخاب کنید.

برای اطلاع از سایر آموزش‌های علمی و به‌روز می‌بایست به قسمت مقالات سایت ویراوردپرس مراجعه نمایید.