VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

CRPER發表於2018-05-17

前言

這貨憋了大半年.終於進入可用狀態了....體驗了一段時間後,該水文誕生了...

這貨是什麼,微軟自家出的實時協作外掛,有用過石墨文件或者騰訊文件的沒?差不多那樣了.

對標 AtomTeletype實時協作外掛,傳送門: VS Live Share 預覽版;

不說廢話直入主題,目前這個是預覽版,有些功能有些殘缺也很正常...我也只扯我用到的;


外掛提供的大體功能

  • 相容Visual Studio IDEVisual Studio Code
  • 支援微軟自家的賬號登入和 Github 帳號登入
  • 支援專案共享(協作),終端共享(協作),會話共享(協作),日誌記錄匯出

實時協作能做什麼?

這種實時協作就我個人看來能解決這麼一些痛點

  1. 補丁和 BUG 的修復

傳統的程式碼協作

  • git初始化倉庫,一堆人克隆,各種遵循 gitflow 這些,一些小小的 BUG 會讓你很痛苦的執行那麼些流程
  • 拉取->程式碼審查->合併->打補丁->單元測試->提交等待合併; 下一個重複
  • 這樣就會浪費很多的時間,也會增加一些額外的 commit

若是實時協作,就可以在團隊的研發過程直接協作幹掉.而不重複上面那麼多(找朋友幫忙也是如此)

  1. 培訓指導

帶新人的時候, 可以實現程式碼層面的培訓,一遍講解思路一邊碼..簡直手把手..


常規操作(多圖)

點選左下角小人物的其實也是呼叫全域性命令版的..只是一步到位.看個人喜歡

登入,圖圖的兩處皆可登入

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

  • Sign In With User Code 好像是呼叫VS Code裡面的配置,試了下no working..
  • Sign In With Browser 是 正常姿勢,支援MS AccountGithub

分享專案,終端等讓別人參與

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

  • Start Collaboration Session : 開始一個會話(開始共享的第一步)
    • 需要開啟一個專案的情況下(也就是目錄),不然會彈出提醒我說的
    • 正常情況下,那個 share 會轉轉轉..成了再點選小人圖表,如步驟1
  • Join Collaboration Session : 參與別人分享的會話
    • 選擇這個之後,會有一個小彈窗,輸入別人分享的參與鏈
    • 若是從瀏覽器進入別人分享的連結..就會這樣,如步驟2
  • Sign Out : 退出登入帳號

步驟1

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

  • Invite Other: 分享連結,選中回車會自動複製
  • Share Terminal : 會分享編輯器內的 terminal
  • Share Server : 分享 TCP 服務及埠,暫時能看到的是雙方的選中什麼鬼的,預覽好像看不到

步驟2

  • 分享人那邊斷開的時候,會顯示如下,說未啟用狀態,提示你自己去聯絡他(在需要連結的情況下)

    VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

  • 正常情況下,是這個樣子

那段圈起來就是分享連結,在 VSCode 彈出鍵入,或者瀏覽器提醒你自動開啟編輯器

自動開啟的會預設彈窗新的編輯器例項,開啟連結的遠端專案

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢


參與別人的專案(有意思)

參與並能給予幫助,總是能讓人有一種莫名的興奮和成就感

進入會話(結合上面)

  • 載入遠端會話中

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

  • 看到檔案目錄和檔案了

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

  • 協作效果(雙向實時)

------------------對方看到的------------------

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

------------------我們這邊的------------------

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢


進入遠端終端

進入終端這些,需要對方開放這方面的許可權.比如對方選中這些

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

之後點選小人或者全域性搜尋就能看到...

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

  • Focus Participants : 請求其他參與者跟隨你 , 對麼會看到演示1
  • Access Shared Terminal : 進入別人的終端,如演示2

演示1

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

因為我當前在.editorconfig檔案,對方也會同時開啟那個檔案並且聚焦到那個視窗

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢

演示2

同理,進入之後你也可以的終端執行相關的命令(對方的控制檯)

VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢


總結

實時程式碼協作的時代已經到來...雖然目前還或多或少有一些問題..但是用的好可以提高團隊效率的;

還有一些高階用法,沒試出來..官方几個月前用VS studio的宣傳演示視訊賊叼.debug 這些也能同步..

難道是因為VS Code不如Studio這個嬌貴,還是技術實現上有難度呢....

感覺這是個趨勢.人們創造各種各樣的工具本質上就是節省時間,目前來說普通的用法是沒什麼問題的..

可能完善個一年半載會很成熟,比如前端需要的訪問預覽什麼的(走微軟自己伺服器分享外鏈除錯)

類似**codesandbox**

感謝我的小夥伴配合我各種錄製 GIF 和截圖,灰常感謝

若是對各種小夥伴有所幫助,就是該文章最大的價值所在......感謝閱讀

相關文章