Visual Studio Code یک ادیتور متن رایگان و چند سکویه است که توسط مایکروسافت توسعه داده شده. به کمک ویژگیهای متعدد و کارایی بالایی که ارائه میدهد، این ادیتور متن به سرعت به یکی از پرطرفدارترین ابزارهای موجود تبدیل شد. ما در راکت همچنین دوره آموزشی کاملی برای استفاده از این ادیتور را تولید کردهایم.
مانند تمام IDEهای دیگر، VS Code نیز مجموعه بزرگی از پلاگینها را با کیفیت بالا ارائه میدهد. میتوانید از طریق Marketplace به این موارد دسترسی پیدا کنید. برای اینکه بتوانید تنها موارد بسیار مهم را دانلود کنید ما مجموعهای از آنها را برای شما جمعآوری کردهایم.
ویژوال استدیو کد هیچ گزینهای را برای باز کردن مستقیم فایلها در مرورگر را ارائه نمیدهد. این افزونه یک گزینه Open with Default Browser را به منوهای contextual اضافه میکند. همچنین میتوانید از طریق command palette مرورگر مورد نظرتان برای باز شدن را انتخاب کنید.
Quokka یک ابزار رفع عیب است که در زمان نوشتن کد به شما خروجی زنده را نشان میدهد. این دستور مقدار برگشتی از یک تابع و یا متغیر را قبل از اجرای پروژه به شما نشان میدهد. پیکربندی اپلیکیشن بسیار ساده است و به صورت پیشفرض از JSX و TypeScript پشتیبانی میکند.
با استفاده از این کتابخانه محبوب جاوااسکریپت میتوانید اطلاعات و دادههایی را به صورت سریع در پروژههایتان به کار ببرید. میتوانید نامها، آدرسها، تصاویر، شمارههای تماس تصادفی و یا یک پاراگراف ساده لورم ایپسوم را با استفاده از این پلاگین وارد کنید. هر کدام از دستهبندیهای قرار گرفته شده، شامل زیردستههای مختلفی هستند که میتوانند براساس نیازتان دادههایی را قرار دهند.
با استفاده از این افزونه میتوانید به مکان تعریف کلاسها و آیدیهای CSS در فایل استایلشیت مراجعه کنید. وقتی روی یک سلکتور در HTML کلیک راست کردید، گزینه Go to Definition را انتخاب کنید تا به قسمت کدهای CSS مربوط به استایل برگه بروید.
افزونه HTML boilerplate شما را از نوشتن تگهای Head و body در ابتدای هر سند نجات میدهد. تنها کافیست HTML را در یک فایل خالی نوشته و بعد کلید Tab را فشار دهید، بعد از آن یک ساختار واضح و ساده از HTML برای شما ساخته میشود.
Prettier در حال حاضر محبوبترین ابزار برای قالبدهی به کدها است. این افزونه به شما اجازه میدهد که کدهای نوشته شده را مرتب و یکسان کنید، مهم نیست که چه کسی این کدها را نوشته است. استفاده از این افزونه برای سندهای JS و CSS امکان پذیر است. اگر میخواهید این کار را از طریق ESLint انجام دهید ابزار Prettier - Eslint را میتوانید به کار ببرید.
پلاگین کوچکی که به شما اطلاعات لازم برای استفاده از رنگها در CSS را میدهد. با هاور کردن ماوس روی کد رنگها میتوانید رنگ را به صورت زنده و در نمای بزرگتری مشاهده کنید. کد رنگ را میتوانید در فرمتهای مختلف (hex, rgb, hsl و cmyk) نیز مشاهده کنید.
این افزونه قابلیتها و امکانات مربوط به SVG را به Visual Studio Code اضافه میکند. این افزونه قابلیت رندر فایلهای SVG و مشاهده شکل آنها بدون ترک کردن ادیتور را میدهد. همچنین گزینهای برای تبدیل به PNG و ایجاد طرح دادهای URI وجود دارد.
این ابزار تمام کامنتهای مربوط به لیست TODO را هایلایت میکند. به همین دلیل میتوانید آسانتر کارهایی که نیاز به تمام کردن دارند را مشاهده کنید. به صورت پیشفرض این ابزار به دنبال کلمات کلیدی TODO و FIXME میگردد اما شما میتوانید عبارات سفارشی را نیز به آن اضافه کنید.
این مورد حاوی قطعه کدهای کوچکی است که فونت آیکونها را از طریق CDN به پروژه شما اضافه کرده و بعد خود آیکونها اضافه میکند. این افزونه بیشتر از ۲۰ مجموعه آیکون را پشتیبانی میکند که شامل Font Awesome، Ionicons، Glyphicons و Material Design Icon میشود.
Minify افزونهای است که برای کوچکسازی کدهایتان بکار برده میشود. در این افزونه تنظیمات سفارشیسازی و گزینههای مختلفی برای کوچکسازی خودکار و ذخیره و خروجی دادن فایل .min پیادهسازی شده است. Minify میتواند با Javascript, CSS و HTML کار کند.
VSCode به صورت پیشفرض تنظیمات محدودی برای تبدیل متن در اختیار دارد. این افزونه میتواند گزینههای بیشتری را برای مدیریت و تبدیل متون ارائه دهد.
ابزار مفیدی برای تست کردن به صورت زنده برای عبارات باقاعده است. این ابزار به خوبی با الگوی عبارات باقاعده روی متنی که در آن طرف ادیتور باز شده است کار میکند.
VSCode در حال تلاش برای پشتیبانی بیشتر از ابزارها و زبانهای مختلف است. اگر زبانی که شما از آن برای برنامهنویسی استفاده میکنید در VSCode قرار نگرفته است میتوانید این پک افزودنی را نصب کنید. در آن ابزارهایی برای پشتیبانی از ویو، ریاکت نیتیو و... فراهم شده است.
به نظر میرسد که مهمترین قسمت افزونههای VSCode پوستههای آن باشد. شما هر روز با ادیتورتان کار میکنید، چرا نباید آن را زیبا کنید؟ پلاگینهای بسیار زیادی برای سفارشیسازی طرح رنگی، آیکونها و... در نظر گرفته شده است که میتوانید از آنها استفاده کنید. تعدادی از موارد که میتوانید استفاده کنید عبارت است از موارد زیر:
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید