15 پلاگین کاربردی برای VS Code

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 28 تیر 1397
دسته بندی ها : آموزشی

Visual Studio Code یک ادیتور متن رایگان و چند سکویه است که توسط مایکروسافت توسعه داده شده. به کمک ویژگی‌های متعدد و کارایی بالایی که ارائه می‌دهد، این ادیتور متن به سرعت به یکی از پرطرفدارترین ابزارهای موجود تبدیل شد. ما در راکت همچنین دوره آموزشی کاملی برای استفاده از این ادیتور را تولید کرده‌ایم. 

مانند تمام IDEهای دیگر، VS Code نیز مجموعه بزرگی از پلاگین‌ها را با کیفیت بالا ارائه می‌دهد. می‌توانید از طریق Marketplace به این موارد دسترسی پیدا کنید. برای اینکه بتوانید تنها موارد بسیار مهم را دانلود کنید ما مجموعه‌ای از آن‌ها را برای شما جمع‌آوری کرده‌ایم.

Open-In-Browser

ویژوال استدیو کد هیچ گزینه‌ای را برای باز کردن مستقیم فایل‌ها در مرورگر را ارائه نمی‌دهد. این افزونه یک گزینه Open with Default Browser را به منوهای contextual اضافه می‌کند. همچنین می‌توانید از طریق command palette مرورگر مورد نظرتان برای باز شدن را انتخاب کنید. 

Quokka

Quokka یک ابزار رفع عیب است که در زمان نوشتن کد به شما خروجی زنده را نشان می‌دهد. این دستور مقدار برگشتی از یک تابع و یا متغیر را قبل از اجرای پروژه به شما نشان می‌دهد. پیکربندی اپلیکیشن بسیار ساده است و به صورت پیشفرض از JSX و TypeScript پشتیبانی می‌کند.

Faker

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

CSS Peek

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

HTML Boilerplate

افزونه HTML boilerplate شما را از نوشتن تگ‌های Head و body در ابتدای هر سند نجات می‌دهد. تنها کافی‌ست HTML را در یک فایل خالی نوشته و بعد کلید Tab را فشار دهید، بعد از آن یک ساختار واضح و ساده از HTML برای شما ساخته می‌شود.

Prettier

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

Color Info

پلاگین کوچکی که به شما اطلاعات لازم برای استفاده از رنگ‌ها در CSS را می‌دهد. با هاور کردن ماوس روی کد رنگ‌ها می‌توانید رنگ را به صورت زنده و در نمای بزرگ‌تری مشاهده کنید. کد رنگ را می‌توانید در فرمت‌های مختلف (hex, rgb, hsl و cmyk) نیز مشاهده کنید.

SVG Viewer

این افزونه قابلیت‌ها و امکانات مربوط به SVG را به Visual Studio Code اضافه می‌کند. این افزونه قابلیت رندر فایل‌های SVG و مشاهده شکل آن‌ها بدون ترک کردن ادیتور را می‌دهد. همچنین گزینه‌ای برای تبدیل به PNG و ایجاد طرح داده‌ای URI وجود دارد.

TODO Highlight

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

Icon Fonts

این مورد حاوی قطعه کدهای کوچکی است که فونت آیکون‌ها را از طریق CDN به پروژه شما اضافه کرده و بعد خود آیکون‌ها اضافه می‌کند. این افزونه بیشتر از ۲۰ مجموعه آیکون را پشتیبانی می‌کند که شامل Font Awesome، Ionicons، Glyphicons و Material Design Icon می‌شود.

Minify

Minify افزونه‌ای است که برای کوچک‌سازی کدهای‌تان بکار برده می‌شود. در این افزونه تنظیمات سفارشی‌سازی و گزینه‌های مختلفی برای کوچک‌سازی خودکار و ذخیره و خروجی دادن فایل .min پیاده‌سازی شده است. Minify می‌تواند با Javascript, CSS و HTML کار کند.

Change Case

VSCode به صورت پیشفرض تنظیمات محدودی برای تبدیل متن در اختیار دارد. این افزونه می‌تواند گزینه‌های بیشتری را برای مدیریت و تبدیل متون ارائه دهد.

Regex Previewer

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

Language and Framework Packs

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

Themes

به نظر می‌رسد که مهمترین قسمت افزونه‌های VSCode پوسته‌های‌ آن باشد. شما هر روز با ادیتورتان کار می‌کنید، چرا نباید آن را زیبا کنید؟ پلاگین‌های بسیار زیادی برای سفارشی‌سازی طرح رنگی، آیکون‌ها و... در نظر گرفته شده است که می‌توانید از آن‌ها استفاده کنید. تعدادی از موارد که می‌توانید استفاده کنید عبارت است از موارد زیر:

One Monokai

منبع

مقالات پیشنهادی

بررسی VSCode برای توسعه‌دهندگان Front-End

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

پیکربندی VS Code برای توسعه Vue.js

در حال حاضر ویژوال استدیو کد یکی از ادیتورهای بسیار محبوب در جهان است. برای ادیتور محبوبی، مردم پلاگین‌های زیادی نوشته‌اند. یکی از این پلاگین‌ها ابزار...

برترین افزونه‌های VSCode برای JavaScript، در جهت توسعه سریع‌تر

VSCode یک ویرایشگر اوپن سورس و میان پلتفرمی است، که تبدیل به ویرایشگر مورد علاقه بسیاری از توسعه دهندگان، به خصوص در جامعه توسعه وب شده است. این ویرای...

نکاتی حرفه‌ای برای کار با VSCode

در چند سال گذشته VSCode توانسته که در جامعه IDEهای متن باز به میزان محبوبیت بسیار قابل توجهی دست پیدا کند. VSCode در سال ۲۰۱۵ منتشر شد و حال براساس آم...