前言
這貨憋了大半年.終於進入可用狀態了....體驗了一段時間後,該水文誕生了...
這貨是什麼,微軟自家出的實時協作外掛,有用過石墨文件或者騰訊文件的沒?差不多那樣了.
對標 Atom
的Teletype
實時協作外掛,傳送門: VS Live Share 預覽版;
不說廢話直入主題,目前這個是預覽版,有些功能有些殘缺也很正常...我也只扯我用到的;
外掛提供的大體功能
- 相容
Visual Studio IDE
和Visual Studio Code
- 支援微軟自家的賬號登入和
Github
帳號登入 - 支援專案共享(協作),終端共享(協作),會話共享(協作),日誌記錄匯出
實時協作能做什麼?
這種實時協作就我個人看來能解決這麼一些痛點
- 補丁和 BUG 的修復
傳統的程式碼協作
- git初始化倉庫,一堆人克隆,各種遵循 gitflow 這些,一些小小的 BUG 會讓你很痛苦的執行那麼些流程
- 拉取->程式碼審查->合併->打補丁->單元測試->提交等待合併; 下一個重複
- 這樣就會浪費很多的時間,也會增加一些額外的 commit
若是實時協作,就可以在團隊的研發過程直接協作幹掉.而不重複上面那麼多(找朋友幫忙也是如此)
- 培訓指導
帶新人的時候, 可以實現程式碼層面的培訓,一遍講解思路一邊碼..簡直手把手..
常規操作(多圖)
點選左下角小人物的其實也是呼叫全域性命令版的..只是一步到位.看個人喜歡
登入,圖圖的兩處皆可登入
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/07f8cf6b9e9666a0d00f4b7d0904c1d94df6d1884bd67dafbd02b8148f4f34ac.jpg)
- Sign In With User Code 好像是呼叫
VS Code
裡面的配置,試了下no working
.. - Sign In With Browser 是 正常姿勢,支援
MS Account
和Github
分享專案,終端等讓別人參與
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/411aabde533c825443caab1bbc05957341d07fb08aa49ec136a049507adc594f.jpg)
- Start Collaboration Session : 開始一個會話(開始共享的第一步)
- 需要開啟一個專案的情況下(也就是目錄),不然會彈出提醒我說的
- 正常情況下,那個 share 會轉轉轉..成了再點選小人圖表,如步驟1
- Join Collaboration Session : 參與別人分享的會話
- 選擇這個之後,會有一個小彈窗,輸入別人分享的參與鏈
- 若是從瀏覽器進入別人分享的連結..就會這樣,如步驟2
- Sign Out : 退出登入帳號
步驟1
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/e297ad07cf65122a1baaba6f584feca7bd9b53a6e27d69c744510775601fe0ee.png)
- Invite Other: 分享連結,選中回車會自動複製
- Share Terminal : 會分享編輯器內的
terminal
- Share Server : 分享 TCP 服務及埠,暫時能看到的是雙方的選中什麼鬼的,預覽好像看不到
步驟2
-
分享人那邊斷開的時候,會顯示如下,說未啟用狀態,提示你自己去聯絡他(在需要連結的情況下)
-
正常情況下,是這個樣子
那段圈起來就是分享連結,在 VSCode 彈出鍵入,或者瀏覽器提醒你自動開啟編輯器
自動開啟的會預設彈窗新的編輯器例項,開啟連結的遠端專案
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/62cf912821b811c9fde911c8551ee71734c8ffa4812722c9cf47c03548337753.png)
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/e7a304e7973ee149ea9897d059f2cea7d027cb75974f0cce2303c73bc7f11be1.jpg)
參與別人的專案(有意思)
參與並能給予幫助,總是能讓人有一種莫名的興奮和成就感
進入會話(結合上面)
- 載入遠端會話中
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/cd3bfbc661e97eb4ad539a2072addff3072b82bd2cfcfbcbd5bf0c697fc1fd5e.jpg)
- 看到檔案目錄和檔案了
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/bbac2617107e1a8b239a298bd3e64cbbbe39e7108b3a7c0d7b020f93b1cdc12f.jpg)
- 協作效果(雙向實時)
------------------對方看到的------------------
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/7c6007c0e090979bbe21d6ac9e9999dd522a7fdec9dcbca1f587dc4cbf34c60f.jpg)
------------------我們這邊的------------------
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/9ac51a3fd9e54b40e4b76dedf52b7a6eac16f7cd86524e809f983105970cfe11.gif)
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/b9e47b531d27a6c7bac914c7fcee17857670fd7e1fd1bdfd0db1cd5b304e2c9c.gif)
進入遠端終端
進入終端這些,需要對方開放這方面的許可權.比如對方選中這些
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/654d350e519c512c03c32166b0277842c85f77621f4b614af5677739bfa2d54b.jpg)
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/b81249f751aba43d07eb0ad0e1a7550f562e7ade3139947908d86ef722a9c994.jpg)
之後點選小人或者全域性搜尋就能看到...
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/ae6b721a8ba06dc26637ce8e2946d71151ddf8ddf42445515aa5f4d3058e149e.png)
- Focus Participants : 請求其他參與者跟隨你 , 對麼會看到演示1
- Access Shared Terminal : 進入別人的終端,如演示2
演示1
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/286b9adf4d324bd129fa7c2d21b2ade5e32790738e7d7a126842271810df018d.jpg)
因為我當前在.editorconfig
檔案,對方也會同時開啟那個檔案並且聚焦到那個視窗
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/53f5a7e44644095947a215a6a41c4fa7ddd6404147446a6b80d408af6b6ca3b1.jpg)
演示2
同理,進入之後你也可以的終端執行相關的命令(對方的控制檯)
![VS Code 折騰記 - (13) VS Live Share (可提高效率的程式碼實時協作外掛)的使用姿勢](https://i.iter01.com/images/ea4576af613e3e967865e8e595a7b56ecd7e57b3e5e8298ebaf283569670dcb9.jpg)
總結
實時程式碼協作的時代已經到來...雖然目前還或多或少有一些問題..但是用的好可以提高團隊效率的;
還有一些高階用法,沒試出來..官方几個月前用VS studio
的宣傳演示視訊賊叼.debug 這些也能同步..
難道是因為VS Code
不如Studio
這個嬌貴,還是技術實現上有難度呢....
感覺這是個趨勢.人們創造各種各樣的工具本質上就是節省時間,目前來說普通的用法是沒什麼問題的..
可能完善個一年半載會很成熟,比如前端需要的訪問預覽什麼的(走微軟自己伺服器分享外鏈除錯)
類似**codesandbox**
感謝我的小夥伴配合我各種錄製 GIF 和截圖,灰常感謝
若是對各種小夥伴有所幫助,就是該文章最大的價值所在......感謝閱讀