استفاده از اشتراک زنده با کد ویژوال استودیو

Live Share افزونه ای برای کد VS (ویژوال استودیو) است که امکان همکاری زمان واقعی بین توسعه دهندگان را فراهم می کند. این امکان را به کاربران می دهد تا یک جلسه را با شخص دیگری به اشتراک بگذارند ، به آنها امکان می دهد کدها را ویرایش کنند و همچنین سرور مجازی و بخش اشکال زدایی را به اشتراک بگذارند.
شروع
1- افزونه Live Share (اشتراک گذاری زنده) را نصب کنید
2- پالت فرمان را باز کنید
3- اشتراک گذاری زنده را شروع کنید
4- پیوند به اشتراک بگذارید
با پیش رفتن در طول این مقاله ، اسکرین شات دو رایانه مختلف را مشاهده می کنید تا نمونه ای از عملکرد Live Share به شما نشان داده شود. برای اهداف شفاف سازی ، این آموزش به ترتیب به شخصی اشاره دارد که دعوت جلسه را ارسال می کند و شخصی که دعوت نامه را میپذیرد یعنی دعوت کننده و دعوت شونده.
مرحله 1 – دانلود افزونه
اولین قدم برای استفاده از Live Share نصب آن به عنوان افزونه است. در VS Code می توانید سربرگ افزونه ها را باز کنید ، Live Share را جستجو کنید، روی نصب کلیک کنید و بعد از اتمام نصب مجدد لود کنید.

پس از آن ، باید وارد سیستم شوید. از همین حالا ، می توانید وارد حساب کاربری Microsoft یا Github شوید.
برای ورود به سیستم ، از دکمه sign in در پایین نوار وضعیت با آیکون شخصی استفاده کنید.
مرحله 2 – اشتراک گذاری و پیوستن به یک جلسه
پس از ورود به سیستم ، آماده ایجاد جلسه برای به اشتراک گذاشتن با دیگران هستید. مطمئن شوید که فقط جلسات زنده را با افرادی که به آنها اعتماد دارید به اشتراک بگذارید. همانطور که خواهید دید ، شما دسترسی خاصی را به کاربران اعطا می کنید که در صورت استفاده نادرست می توانند مخرب باشند.
با کلیک کردن روی نام کاربری خود در نوار وضعیت پایین شروع کرده و از گزینه های موجود Start Collaboration Session را انتخاب کنید. از طرف دیگر ، می توانید پالت فرمان (CMD + SHIFT + P را در Mac ، CTRL + SHIFT + P در ویندوز) را باز کنید و Start Collaboration Session را تایپ کنید.

به شما اطلاع داده می شود که لینک دعوت شما در کلیپ بورد کپی شده است.

این لینک را با شخصی به اشتراک بگذارید تا آنها را به جلسه خود دعوت کنید.
به عنوان دعوت شونده ، برای پذیرش دعوت نامه ، روی نام کاربری خود در نوار وضعیت پایین کلیک کنید و Join Collaborative Session را انتخاب کنید. روش دیگر ، مانند بالا ، می توانید پالت فرمان را باز کرده و Join Collaborative Session را تایپ کنید.

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

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

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

مرحله 3 – محدود کردن همکاری
به طور پیش فرض ، هنگام به اشتراک گذاشتن یک جلسه با شخصی ، آنها قادر به ویرایش کلیه فایل ها در فضای کاری خواهند بود. این یکی از دلایلی است که باید به شخصی که ممکن است چند فایل را ویرایش کند اعتماد داشته باشید ، اما باز کردن کل فضای کاری تان برای آنها توصیه نمیشود. خوشبختانه ، Live Share این امکان را به شما می دهد تا فایل هایی که می توانند مشاهده و ویرایش کنند را محدود کنید.
برای محدود کردن همکاری ، یک فایل .vsls.json ایجاد کنید. پیکربندی اصلی چیزی شبیه به این خواهد بود:
.vsls.json
{
“$schema”: “http://json.schemastore.org/vsls”,
“gitignore”: “none”,
“excludeFiles”: [],
“hideFiles”: []
}

دو کلید که بیشتر به آنها اهمیت می دهیم عبارتند از: excludeFiles و hideFiles. excludFiles مجموعه ای از نام فایل ها است که نمی خواهید کاربران به آنها دسترسی داشته باشند. hideFiles بسیار مشابه است به جز اینکه همکاران در شرایط خاصی قادر به دیدن فایل های مخفی خواهند بود. برای اطلاعات بیشتر درباره امنیت ، اینجا کلیک کنید.
مرحله 4 – به اشتراک گذاری سرور مجازی
به اشتراک گذاشتن با دیگران هنگام کار در یک برنامه محلی می تواند چالش برانگیز باشد. می توانید کد را در GitHub بررسی کرده و شخص دیگری آن را کلون کند، اما هنوز هم آنها باید متعلقات را نصب کرده و خودشان سرور مجازی را راه اندازی کنند. با Live Share می توانید سرور مجازی را بصورت محلی شروع کنید و شخص دیگر می تواند به همان برنامه در حال اجرا دسترسی پیدا کند.
به عنوان دعوت کننده ، سرور مجازی خود را به طور عادی شروع کنید. سپس بر روی نام کاربری در نوار وضعیت پایین کلیک کرده و Share Server را انتخاب کنید. روش دیگر این است که پالت فرمان را باز کرده و Share Server را تایپ کنید.

به عنوان دعوت شونده ، می توانید برای دیدن سرور مجازی بهlocalhost در پورت مناسب بروید.

مرحله 5 – به اشتراک گذاری ترمینال
ممکن است دلیلی وجود داشته باشد که بخواهید دستورات ترمینال را به فردی آموزش دهید ، مانند نحوه پیمایش فایل سیستم ، کار با npm ، راه اندازی سرور مجازی dev خود و غیره. همانند ویژگی های فوق ، ممکن است این کار از راه دور پیچیده باشد. Live Share همچنین یک ویژگی اشتراک گذاری پایانه برای حل این مشکل دارد.
اشتراک گذاری ترمینال شبیه به اشتراک گذاری سرور مجازی شماست. مشابه سایر ویژگی ها ، گزینه Share Terminal را انتخاب کنید. پس از آن ، بین مجوز read only یا read/write برای همکاران یکی را انتخاب کنید.

پس از به اشتراک گذاری ترمینال ، همکاران می توانند ترمینال را مشاهده کرده و ویرایش کنند. تصویر زیر چیزی است که دعوت شونده بعد از ارسال پیام به نمایشگر توسط دعوت کننده، میبیند.

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

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade