X
هاستینگ - ۱۰ اکستنشن Visual Studio Code برای توسعه‌دهندگان Frontend s

هاستینگ - ۱۰ اکستنشن Visual Studio Code برای توسعه‌دهندگان Frontend

موضوعات
Category

ارشیو وبلاک
Archived blog

کدهای اختصاصی
Code

کدهای اختصاصی
Site Statistics

» بازديد امروز : 2
» بازديد ديروز : 1
» افراد آنلاين : 1
» بازديد ماه : 23
» بازديد سال : 23
» بازديد کل : 47
» اعضا : 0
» مطالب : 5

۱۰ اکستنشن Visual Studio Code برای توسعه‌دهندگان Frontend


تاریخ انتشار پست : 1398/12/25 بازدید : 0

کد اسنیپت‌های جاوا اسکریپت

این اکستنشن توسط Charalampos Karypidis ارائه شده است و بیش از ۲ میلیون بار دانلود شده است. این اکستنشن کد اسنیپت‌های جاوا اسکریپت در سنتکس ECMAscript ٦ ارائه می‌دهد و از فایل‌های جاوا اسکریپت و فایل‌های دیگر مانند Typesript، Javascript React، Typescript React استفاده می‌کند.

NPM

این اکستنشن، مجموعه اصلی ساپورت Node Package Manager برای کد ویژوال استودیو است. این اکستنشن به شما در مدیریت فایل package.json به روش‌های خارق‌العاده کمک می‌کند. این اکستنشن وابستگی‌هایی که در packge.json تعریف شده اما نصب نشده‌اند و یا آن‌هایی که نصب شده‌اند اما تعریف نشده‌اند را با علامت هشدار نشان می‌دهد. همچنین اختلاف‌های موجود در بررسی نسخه پکیج‌ها را نشان می‌دهد. علاوه بر این، با ارائه میانبرهای ساده، امکان اجرای سریع دستورات npm را فراهم می‌کند.

ESlint

این اکستنشن به شما در لینت کردن یا همان زخم‌بندی جاوا اسکریپت و jsx کمک می‌کند. به‌راحتی اجرا می‌شود و شما را ملزم می‌کند که از فرمان‌های استاندارد مانند توگذاری (indent) و جایگذاری و بسیاری دیگر استفاده می‌کنید. این اکستنشن با ۱۲ میلیون دانلود، یکی از بیشترین آمار دانلود را بین کدهای ویژوال استودیو داشته است.

Prettier

این اکستنشن بسیار محبوب توسط Esben Petersen ارائه شده است. در حال حاضر بیش از ۴ میلیون بار دانلود شده است. این اکستنشن به فرمت کردن کد جاوا اسکریپت کمک می‌کند و کلیدواژه‌ها را با رنگ دیگری نشان می‌دهد تا کد مورد نظر به‌راحتی خوانده شود. اکستنشن‌های مشابه دیگری هم وجود دارند که ازجمله محبوب‌ترین آن‌ها می‌توان به beautify اشاره کرد که آن هم در بازار موجود است.

CSS Peek

این اکستنشن بسیار کاربردی توسط Pranay Prakash ارائه شده است و هنگام کار با زبان نوشتار و ID ها بسیار کاربرد دارد. این اکستنشن قالب‌ها و سبک‌های مختلفی که هم‌اکنون روی یک عنصر مورد نظر اعمال ‌شده‌اند را شناسایی و شمارش می‌کند. بدون این اکستنشن مجبور خواهید بود چندین بار بین فایل‌های html و css جستجو کنید و می‌تواند از هدر رفتن وقت جلوگیری کند. همچنین برای توسعه‌دهندگانی که از داشتن چند نمایشگر خوشحال نیستند بسیار جذاب خواهد بود.

اسنیپت‌های Angular ٦

این اکستنشن، اسنیپت‌های رسمی Angular ٦ برای کد ویژوال استودیو هستند و همان استایل Angular را دنبال می‌کند و کار با Angular را بسیار ساده‌تر می‌کند. از ویژگی پیش‌بینی کد به همراه عملکرد تکمیل خودکار برخوردار است که با نسخه ۶ هماهنگ هستند. همچنین از typescript، service worker، RxJS، ngRX و حتی Angular Material پشتیبانی می‌کند. اگر از Angular استفاده می‌کنید اما هنوز این اکستنشن را ندارید، حتماً باید آن را امتحان کنید.

Vetur

این اکستنشن رسمی Vue js برای کد ویژوال استودیو است و بیش از ۵ میلیون دانلود داشته است. Vetur اینجاست تا توسعه Vue js ساده‌تر از همیشه انجام شود. دارای قابلیت بررسی خطا و تکمیل خودکار کدها بوده و استفاده از اسنیپت‌ها را هم پشتیبانی می‌کند. توسعه‌دهندگان Vue می‌توانند آخرین به‌روزرسانی‌های موجود را در کنفرانس و گفتگوهای موجود در سایت پیدا کنند. این اکستنشن واقعاً فوق‌العاده است.

Debugger برای کروم

این اکستنشن رسمی ارائه شده توسط کروم برای اشکال‌زدایی (Debugging) کدهای ویژوال استودیو است. در حال حاضر این اکستنشن یکی از پراستفاده‌ترین اکستنشن‌های کد ویژوال استودیو در بازار است. به شما کمک می‌کند فایل‌های جاوا اسکریپت خود را که در مرورگر کروم در حال اجرا هستند را مستقیماً در کد ویژوال استودیو اصلاح کنید. آیا معرکه نیست؟ همچنین دارای یک هاست برای شرکت‌کنندگان ویژه است و گام‌های بزرگی برای ساده‌سازی کار توسعه‌دهندگان Frontend برمی‌دارد.

چطور این اکستنشن‌ها را دریافت کنم؟

  • ابتدا کد ویژوال استودیو را از این لینک دانلود کنید:

ببینید چه کارهای شگفت‌انگیزی می‌توانید با کد ویژوال استودیو انجام دهید.

  • سپس از نوار جستجو در بخش اکستنشن استفاده کنید تا اکستنشن مورد نظر خود را بیابید.

 

جمع‌بندی

این‌ها تنها تعداد محدودی از هزاران هزار اکستنشن موجود هستند. اکستنشن‌های فراوان دیگری هم وجود دارند و لیست معرفی شده، لزوماً بهترین نیستند؛ اما داشتن اکثر آن‌ها برای توسعه‌دهندگان Frontend وب ضروری است. خوشحال می‌شویم اگر نظرتان را در مورد اکستنشن محبوب خود با ما در میان بگذارید.

معرفی Visual Studio Code

برنامه Visual Studio Code بهترین برنامه ویرایش کدی است که می‌توانید از آن استفاده کنید. این برنامه دارای اکستنشن‌های بسیاری است که در یک مجموعه اکستنشن (مشابه اپ استور برای اپلیکیشن‌های موبایل) به نام Market place قرار دارند. اکستنشن‌های مختلفی برای حذف باگ کدها، فرمت کردن کدها، نقشه‌های کلیدی، فناوری‌های توسعه (مانند heroku، github، docker و azure)، تم‌های IDE، code linters، اسنیپت‌ها و بسیاری انواع دیگر هستند.

اشتراک‌گذاری سریع‌تر کد به کمک Bit

شما و تیم همراهتان با کمک پلتفرم Bit راحت‌تر می‌توانید کدهایی که می‌توان دوباره بکار برد را در بخش‌های دیگر پروژه هم استفاده و به‌راحتی مدیریت کنید. کافی است این کدها را بنویسید، آن را در بخش‌های مختلف به اشتراک بگذارید و بتوانید در لحظه تغییرات را بین آن‌ها هماهنگ کنید. حتماً آن را امتحان کنید.

خبر خوش برای توسعه‌دهندگان Frontend

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

Live server

این یکی از اکستنشن‌های جالب است که توسط Ritwick Dey ارائه شده است و یک سرور محلی برای صفحه‌های ثابت و دینامیک شما ایجاد می‌کند. یک دکمه “Go-live” در نوار ابزار شما نشان داده خواهد شد و توسط آن می‌توانید همچون یک سرور توسعه، کدهای خود را اجرا کنید. همچنین یک ویژگی مخصوص هم دارد: Live Reload. این ویژگی به‌محض اینکه کارتان را ذخیره کنید، صفحه را دوباره بارگذاری می‌کند و ویژگی بسیار کاربردی است.

 Live Sass

این اکستنشن توسط Ritwick Rey ارائه شده و فایل‌های scss شما را در فایل‌های css گردآوری می‌کند و این کار را به‌سرعت و راحتی node-sass انجام می‌دهد. گزینه‌ای با نام watch-my-sass در نوار ابزار قرار دارد که می‌تواند پیش‌نمایشی زنده از قالب‌های گردآوری شده را در مرورگر دلخواه شما نشان دهد. همچنین از ویژگی بارگذاری زنده (Live Reload) هم بهره‌مند است.

دسته :
برچست ها :
نظرات
نظرات مرتبط با این پست
نام :
ایمیل :
وب سايت :
کد تاييد :        
متن دیدگاه :

تمامی حقوق برای نویسنده محفوظ میباشد