Live Share یک اکستنشن برای VS Code میباشد که همکاری real-time (بلا درنگ) را برای توسعه دهندگان فراهم می کند با استفاده از آن شما قادر خواهید بود که یک session را با فرد دیگری به اشتراک بگذارید ، به آن ها اجازه دهید تا کد را ویرایش کنند و همچنین سرور را به اشتراک بگذارید و debugging session کنید

کد زدن لایو در VS Code

Live Share  برای ویژوال استودیو کد  خبر داغ این روزها میباشد و از 7 می 2018 در دسترس عموم قرار خواهد گرفت ! اگر هنوز چیزی درباره ی آن نشنیده اید !؟ نگران نباشید ، آن را در این مقاله به شما معرفی خواهیم کرد

Live Share یک اکستنشن برای VS Code میباشد که همکاری real-time (بلا درنگ) را برای توسعه دهندگان فراهم می کند

با استفاده از آن شما قادر خواهید بود که یک session را با فرد دیگری به اشتراک بگذارید ، به آن ها اجازه دهید تا کد را ویرایش کنند و همچنین سرور را به اشتراک بگذارید و کد خود را دیباگ کنید

قبل از LiveShare  امکان همکاری real-time در cloud 9 وجود داشت ، اما داشتن این ویژگی  در یک ویرایشگر محبوبی مثل VS Code بسیار خوب و هیجان انگیز است

نصب liveshare در 4 مرحله :

1 – نصب اکستنشن liveshare

2 – باز کردن command palette

3-راه اندازی liveshare

4 –به اشتراک گذاری لینک

در این مقاله شما اسکرین شات هایی از دو کامپیوتر متفاوت میبینید تا بهتر متوجه شوید که چگونه LiveShare کار میکند. برای شفاف سازی کار  ، به فردی که دعوتنامه session را میفرستد inviter و به فردی که دعوت را میپذیرد invitee میگوییم

دانلود اکستنشن

اولین قدم برای استفاده از liveshare ، نصب اکستنشن آن میباشد . در VS Code ، تب اکستنشن را باز کنید ، LiveShare را جست و جو کنید ، install را بزنید و زمانی که نصب آن تمام شد Reload را بزنید

سپس ، شما باید sign in  کنید . الان شما میتوانید با اکانت مایکروسافت یا github لاگین کنید . از آنجایی که به دو کامپیوتر نیاز داریم ،( به منظور آموزش بهتر در این مقاله )  در یک کامپیوتر با اکانت مایکروسافت  و در دیگری با github وارد میشویم

برای sign in کردن ، از دکمه ی “Sign In” که در پایین استاتوس بار است استفاده کنید

به اشتراک گذاری و ملحق شدن به Session

بعد از این که sign in کردید ،شما آماده ی ایجاد session به منظور به اشتراک گذاری آن با دیگران هستید.یک نکته ای که بهتر است آن را بدانید این است که Session را فقط با افرادی که به آن ها اعتماد دارید به اشتراک بگذارید . همان طور که در ادامه خواهیم گفت ، شما می توانید به کاربران دسترسی خاصی بدهید و اگر بصورت درست این کار را انجام ندهید میتواند زیان بار باشد

با کلیک کردن روی username خود که در پایین استاتوس بار قرار دارد و انتخاب "Start Collaboration Session" از قسمت available options کار خود را شروع کنید یا شما میتوانید Command Palette ( CMD + SHIFT + P on Mac, CTRL + SHIFT + P on Windows)  را باز کنید و "Start Collaboration Session" را تایپ کنید

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

برای دعوت کردن فردی به این session ، باید این لینک را به آن ها بدهید.

در سمت invitee ( به فردی که دعوت را میپذیرد) برای پذیرش دعوت باید روی username خود که در پایین استاتوس بار قرار دارد کلیک کنید و "Join Collaborative Session"  را بزنید . مانند هان چیزی که در بالا گفتیم راه دیگری هم برای این کار وجود دارد ، شما میتوانید Command Palette ( CMD + SHIFT + P on Mac, CTRL + SHIFT + P on Windows)  را باز کنید و "join Collaboration Session" را تایپ کنید

پس از انجام این کار ،  collaborative session link sent to you by the inviterرا بزنید

هرزمانی که فردی به session ملحق شود  به inviter  اطلاع داده خواهد شد

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

یک ترفند باحال دیگر این است که یک قسمت از کد را انتخاب کنید تا آن قسمت روی کامپیوتر دیگری نیز برجسته(highlight) شود

محدود کردن همکاران (Limiting Collaborators)

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

اما نگران این موضوع نباشید چون در Live Share قابلیتی برای محدود کردن دیدن و ویرایش فایل ها وجود دارد

برای محدود کردن همکاران ، یک فایل .vsls.json بسازید . کانفیگ اولیه شبیه شکل زیر است

دو کلیدی که برای ما مهم هستند  "excludeFiles" , "hideFiles"میباشند . excludeFiles یک آرایه ای از نام فایل هایی می باشد که شما نمیخواهید دیگر کاربران به آن ها دسترسی داشته باشند و دیگر آن ها به هیچ وجه قادر به دیدن آن فایل ها نیستند. HideFiles  خیلی شبیه مورد قبلی است با این تفاوت که همکاران می توانند فایل های hidden را تحت شرایط خاصی ببینند.

به اشتراک گذاری سرور

اگرتابحال برای این کار تلاش کرده باشید میدانید که درهنگام کار بر روی یک اپلیکیشن بصورت محلی ،  به اشتراک گذاری آن با دیگران کار آسانی نیست . شاید شما github را پیشنهاد کنید ، بله شما می توانید کد را در github چک کنید  اما آن ها باید dependency  ها را نصب و خودشان سرور را استارت کنند .

خوب نبود اگر شما می توانستید سرور را به صورت محلی استارت کنید و دیگران می توانستند به همان پروژه شما دسترسی داشته باشند  ؟؟

خوب ، شما می توانید .

به عنوان  inviter ، بصورت عادی سرور را استارت کنید مثلا ( nodemon server.js) سپس روی username که در پایین استاتوس بار قرار دارد کلیک کنید و Share Server را انتخاب کنید. یا می توانید Command Palette را بار کنید  و Share Server را باز کنید

به عنوان invitee ، شما میتوانید به url لوکال هاست inviter بروید.در این مقاله ما VSC Snippets (GUI for creating Code Snippets for VS Code) را روی پورت 300 اجرا کرده ایم

به اشتراک گذاری ترمینال

سناریو این که شما می خواهید به شخصی فرمان های ترمینال را آموزش دهید را تصور کنید. شما نویگیت کردن فایل سیستم ، کار کردن با npm ، استارت کردن Dev Server و ...  را میدانید . به همراه ویژگی های بالا ، هنگامی که این کار را از راه دور انجام میدهید پیچیده تر می شود

Live Share تصمیم گرفته است که ویژگی به اشتراک گذاری ترمینال را ارائه دهد

به اشتراک گذاری ترمینال بسیار شبیه به به اشتراک گذاری سرور می باشد . برای این کار بروی Share Terminal کلیک کنید . سپس ، شما باید بین اجازه ی readonly(فقط خواندن) یا read/write (خواندن و نوشتن) برای کاربران یکی را انتخاب کنید

بعد از این که ترمینال به اشتراک گذاشته شد ، همکاران می توانند ترمینال را ببینند (و ویرایش کنند). اسکرین شات زیر دید invitee ها از ترمینال را بعد از این که inviter یک پیامی را در صفحه نوشته است ، نشان میدهد

از این جا ، همان طور که در بالا گفته شد ، شما میتوانید به invitee نحوه ی استارت dev server  ، build system یا هر چیز دیگری که مربوط باشد را نشان دهید

به اشتراک گذاشتن Debugging

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

برای به اشتراک گذاری debug session ، ابتدا شما باید Debug session را استارت کنید . در این مقاله ، ایده ی اصلی انجام این کار را پوشش خواهیم داد اما برای اطلاعات بیشتر میتوانید به

https://code.visualstudio.com/docs/editor/debugging

مراجعه کنید

الان می خواهیم یک اپلیکیشن Node را با استفاده از کانفیگ "Attach to Process Id" دیباگ کنیم . بعد از اجرای سرورم ، سپس تنظیمات دیباگ را اجرا میکنم که به برنامه موجود متصل میشود

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

یک نکته جالب درباره ی sharing debugging این است که بصورت خودکار اتفاق می افتد. بعد از این که debugging session در سمت inviter شروع میشود ، invitee بصورت خودکار بخشی از همان session میشود

خلاصه

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