使用 Visual Studio Live Share 來即時共同開發 — Pair programming

林鼎淵 — Mon, 21 Jun 2021 17:52:13 +0800

在遠端工作後，我們使用 Teams、Skype、Google meet 來完成日常的會議，但如果使用上述工具來討論專案中的程式碼並不方便，因為所有使用者都聚焦在同一個畫面上；但看到問題時只能用口頭表達：「去app資料架下面找出xxxController，第30行的程式邏輯有問題。」這樣的表達方式欠缺效率且容易帶有情緒；所以今天向大家介紹一款共同開發超棒的工具。

圖片來源：Visual Studio官網

一、我們現在協作時遇到了哪些困境？
二、這個工具能給我們開發帶來什麼樣的幫助？
三、安裝套件＆登入使用者
四、使用方式

一、我們現在協作時遇到了哪些困境？

使用螢幕分享做 Debug 時，需要依靠大腦來做運算邏輯，想要看哪一支檔案與程式也要靠口述，非常不方便
有些程式（Teams），不只螢幕分享來能直接控制對方的電腦做操作，但同一時間只允許一人做操作
就算團隊使用 git 版控，你切到對方有 Bug 的 branch 時可能無法順利重現問題發生（很多套件版本及環境參數設定不同）
因為無法完全模擬對方程式運作環境導致 Debug 時困難重重

二、這個工具能給我們開發帶來什麼樣的幫助？

對方能夠很清楚理解自己現在講述的程式在哪個檔案的哪個位置，不再雞同鴨講
雙方能自由瀏覽專案下的資料夾與程式，無需依靠口述
可以模擬對方的環境進行程式編譯，更清楚問題發生點
雙方的游標顏色不同，方便討論時不會產生誤會

三、安裝套件＆登入使用者

下面的步驟及操作可能會隨著 VScode 改版而有所不同，僅供參考

SETP 1：在 VScode 的 EXTENSION 分頁搜尋「Live Share」，點擊「install」即可完成安裝

SETP 2：安裝完後會在左下角多出「LIVE SHARE」的icon

SETP 3：第一次按「Share」時，會要求你登入 GitHub 或是 Microsoft 的帳號

SETP 4：這裡我選擇登入Github，基本上就是一路按接受授權的過程

SETP 5：註冊成功後，你就會看到以下畫面

四、使用方式

完成安裝＆登入的步驟後，下面提供本機模擬的操作方式

自己跟自己的連線，模擬操作

SETP 1：在本機用 VScode 開啟一個資料夾或是專案

SETP 2：點擊「Share」做分享，此時你會得到一組邀請連結

SETP 3：此時開用「New Windows」開啟一個空的 VScode，點擊「Join」加入

SETP 4：加入後加入後便可以開始共同開發嚕

當 Join 的人對檔案操作時，Share 的人可以看到他的操作

按下右上角的「圖釘」，就是「Follow Participant」觀看對方現在操作的檔案

直接在對方的環境下執行程式了解問題

Join的人可以直接在終端機下指令，了解程式執行狀況

本篇文章只是很簡略地讓大家了解如何使用「Live Share」這款套件，更多的功能就讓大家直接去官網了解吧！

Visual Studio Live Share｜林鼎淵 Dean Lin