ویژوال استودیو یک ویرایشگر متنی cross-platform است که توسط مایکروسافت توسعه یافته است. این برنامه به خاطر کارایی خوب و ویژگی های بسیاری که ارائه می‌دهد، به سرعت مورد توجه مخاطبان قرار می‌گیرد.ویژوال استودیو مانند بسیاری از IDE‌ها، پلاگین‌های زیادی دارد که بسیار متنوع هستند. در این مقاله بهترین و جالب‌ترین پلاگین‌ها معرفی می‌شوند.

Open-In-Browser

ویژوال استودیو هیچ اینترفیس داخلی برای باز کردن مستقیم فایل‌ها در مرورگر ندارد. این افزونه به منوی متنی یک Open With Default Browser اضافه می‌کند، همچنین گزینه‌هایی در command palette هم وجود دارد، برای اینکه موارد دیگری مثل (فایرفاکس، کروم، اکسپلورر) را انتخاب کنید.

Quokka

Quokka ابزاری برای دیباگ کردن است که می‌توانید همزمان که کد را می‌نویسید نتیجه را ببینید. این پلاگین نتایج توابع و مقادیر محاسباتی را نشان می‌دهد.

Faker

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

CSS Peek

با استفاده از این افزونه می‌توانید تعاریف کلاس‌های CSS و idها را در stylesheetهای خود دنبال کنید. وقتی روی selector فایل‌های HTML خود کلیک راست می‌کنید، گزینه Go to Definition را انتخاب کنید، به جایی که کد CSS خودتان را در آنجا نوشته‌اید هدایت می‌شوید.

HTML Boilerplate

با این افزونه دیگر نیازی نیست تا تگ‌های head و body سند جدید HTML را به صورت دستی بنویسید. فقط html را در یک فایل خالی بنویسید و کلید Tab را بزنید، سند HTML ایجاد می‌شود.

Prettier

در حال حاضر Prettier محبوب‌ترین قالب کد در توسعه وب است. این افزونه به طور خودکار تمام سندهای JS و CSS را سریع قالب‌بندی می‌کند. همچنین اگر بخواهید از ESLint استفاده کنید، Prettier – Eslint برای این کار وجود دارد.

Color Info

پلاگین کوچکی است که اطلاعات متنوعی در مورد رنگ‌هایی که در CSS استفاده می‌کنید را به شما می‌دهد. وقتی موس را روی رنگ موردنظر نگه می‌دارید، می‌توانید پیش‌نمایش بزرگ‌تری از نحوه نمایش آن و همچنین اطلاعاتی درباره تبدیل آن به همه فرمت‌ها (hex, rgb, hsl, and cmyk) را ببینید.

SVG Viewer

این افزونه تعدادی ابزار مفید برای کار با SVG‌ها در ویژوال استودیو اضافه می‌کند که فایل‌های SVG را رندر کرده و بدون نیاز به ویرایشگر کار می‌کند. همچنین گزینه‌هایی برای تبدیل به PNG و ساخت شمای داده‌های URI هم دارد.

TODO Highlight

این ابزار تمام کامنت‌های موجود در کد شما که شامل TODO هستند را های‌لایت می‌کند تا آسان‌تر آن‌ها را پیدا کنید. به‌ طور پیش‌فرض برای کلمات کلیدی TODO و FIXME است ولی می‌توانید عبارات سفارشی خودتان را به آن‌ اضافه کنید.

Icon Fonts

بخشی از فونت آیکون موردنظرتان را تایپ کنید، سپس به پروژه‌تان اضافه می‌شود. این افزونه بیش از 20 آیکون محبوب را پشتیبانی می‌کند، ازجمله Awesome، Ionicons، Glyphicons و آیکون‌های Material Design.

Minify

کار این افزونه کم کردن حجم کد شماست و به صورت خودکار ذخیره‌سازی و اکسپورت فایل‌های .min را انجام می‌دهد. Minify با JavaScript، CSS و HTML هم کار می‌کند که می‌توانید از طریق لینک‌های uglify-js، clean-css و html-minifier از آن‌ها استفاده کنید.

Change Case

ویژوال استودیو گزینه‌های محدودی برای تغییر متن دارد و فقط می‌تواند lowercase و uppercase را انجام دهد. این پلاگین دستورات زیادی را برای تغییر رشته‌ها اضافه می‌کند، مثل camelCase، kebab-case، snake_case، CONST_CASE و بسیاری موارد دیگر.

Regex Previewer

این پلاگین ابزار مفیدی برای تست regular expression (عبارات باقاعده) است، درست در همان لحظه‌ای که آن را تایپ می‌کنید، می‌توانید آن را تست کنید. Kinda شبیه RegExr است، اما درون ویرایشگرتان کار می‌کند!

پکیج‌های فریم‌ورک و زبان

ویژوال استودیو از زبان‌های زیادی پشتیبانی می‌کند. اگر به دلایلی زبان برنامه‌نویسی انتخابی شما شامل آن نباشد، می‌توانید پکیجی را دانلود کنید که امکانات لازم را اضافه می‌کند. بعضی از فریم‌ورک‌های وب مثل react native و vue هم پکیج‌های زبان را ارائه می‌دهند.

تم‌ها

شما هر روز به برنامه ویژوال استودیو خودتان نگاه می‌کنید، چرا آن را زیباتر نمی‌کنید؟ پلاگین‌های سفارشی زیادی وجود دارند که رنگ و آیکون‌های برنامه را تغییر می‌دهند. برخی از محبوب‌ترین آن‌ها عبارتند از:

One Monokai

Aglia

One Dark

Material Icon