Visual Studio Live Share 可以做到這一點嗎？

已發表: 2022-03-10

快速總結↬協作處理辦公文檔是一個已解決的問題。在代碼上進行協作仍然是一件相當困難的事情。那是因為僅共享代碼是不夠的。為了真正進行協作，開發人員需要能夠共享他們的整個環境。 VS Live Share 是一項新服務，可讓您完全做到這一點，您可能會驚訝於您實際上可以進行多少共享。

幾個月前，微軟發布了免費的 Visual Studio (VS) Live Share 服務。 VS Live Share 是代碼的 Google Docs 級協作。多個開發人員可以同時在同一個文件上進行協作，而無需離開他們自己的編輯器。

在 Live Share 發布後，我意識到我們中的許多人已經放棄了在我們的代碼中被孤立，我們甚至不知道有更好的方法來使用像 VS Live Share 這樣的服務。這部分是因為我們陷入了舊習慣，部分是因為我們只是不知道所有 VS Live Share 可以做什麼。最後一部分我可以幫忙！

在本文中，我們將介紹 VS Live Share 的功能和最佳實踐，這些功能和最佳實踐使開發人員協作變得像“匿名河馬”一樣簡單。

Google Docs 中的匿名動物列表 — Google Docs 有一種處理匿名參與者的有趣方式（大預覽）

分享您的代碼

Live Share 作為 Visual Studio 和 Visual Studio Code (VS Code) 的擴展提供。在本文中，我們將重點關注 VS Code。

您也可以通過 VS Live Share 擴展包安裝它，其中包括以下擴展，我們將在本文中介紹所有這些......

與實時共享
VS 實時共享音頻
鬆弛聊天擴展

跳躍後更多！繼續往下看↓

安裝擴展後，您需要登錄 VS Live Share 服務。您可以通過打開命令面板Ctrl/Cmd + Shift + P並選擇“使用瀏覽器登錄”來做到這一點。如果您未登錄並嘗試開始新的共享會話，系統將在那時提示您登錄。

vs code 命令面板顯示使用瀏覽器登錄的選項 — 使用 VS Code 命令面板啟動新的 Live Share 會話（大預覽）

有幾種方法可以啟動 VS Live Share 會話。您可以從命令面板執行此操作，可以單擊底部工具欄中的“共享”按鈕，也可以使用側邊欄中的 VS Live Share 資源管理器視圖。

帶有圍繞 UI 不同部分繪製的框的 vs 代碼，可用於啟動實時共享會話 — 有多種方法可以開始新的 VS Live Share 會話（大預覽）

一個鏈接被複製到您的剪貼板。然後，您可以將該鏈接發送給其他人，他們可以加入您的 Live Share 會話——前提是他們也使用 VS Code。哪個，我們不是嗎？

現在您可以像處理普通的舊 Word 文檔一樣進行協作：

其他人不僅可以看到您的代碼，還可以對其進行編輯、保存、執行甚至調試。對您而言，它們顯示為帶有名稱的光標。你以同樣的方式出現在他們的編輯器中。

VS Live Share Explorer

VS Live Share 資源管理器在操作欄中顯示為一個新圖標 - 這是我屏幕最右側的圖標欄（默認操作欄放置在您的最左側）。對於 VS Live Share 而言，這是一種“零基礎”。從這裡，您可以開始、結束會話、共享終端、服務器以及查看連接的用戶。

與實時共享視圖 — VS Live Share Explorer 是 Live Share 所有內容的平視視圖（大預覽）

最好將鍵盤快捷鍵綁定到此 VS Live Share Explorer 視圖，以便您可以在該視圖和文件之間快速切換。您可以通過按Ctrl/Cmd + K （或Ctrl/Cmd + S ）然後搜索“顯示實時共享”來執行此操作。我將我的綁定到Ctrl/Cmd + L ，這似乎沒有綁定到其他任何東西。我發現這個快捷方式很直觀（ L表示 Live Share）並且很容易在鍵盤上敲擊。

vs 代碼中的鍵盤綁定屏幕，其中包含為 vs live share viewlet 創建的綁定 — 您可以為 VS Live Share Explorer 視圖創建綁定（大預覽）

共享代碼只讀

當您開始新的共享會話時，您將收到通知並詢問您是否要以只讀方式共享您的工作區。如果您選擇只讀，人們將能夠看到您的代碼並跟隨您的動作，但他們將無法進行交互。

vs 代碼通知提示用戶選擇只讀共享 — 共享會話默認為讀寫，但您可以將它們設為只讀（大預覽）

當您與不一定信任的人（可能是供應商、合作夥伴或疏遠的前任）共享時，此模式很有用。

它對教師也特別有用。請注意，在撰寫本文時，VS Live Share 被鎖定為 5 個並髮用戶。由於在只讀模式下您可能想要的更多，特別是如果您正在教一個小組，您可以通過在您的用戶設置文件中添加以下行來將限制增加到 30： Ctrl/Cmd + , .

 "liveshare.features": "experimental"

更改默認聯接行為

知道該鏈接的任何人都可以加入您的 Live Share 會話。當他們加入時，您會看到一個彈出窗口，讓您知道。同樣，當他們斷開連接時，您會收到通知。這是 VS Live Share 的默認行為。

帶有已加入實時共享會話的人員姓名的 vs 代碼通知 — 每當有人加入您的會話時，VS Code 都會提醒您（大預覽）

更改此設置是個好主意，這樣您必須手動批准某人才能加入您的會話。這是為了在您去吃午飯並忘記斷開會話的情況下保護您。您的同事無法重新登錄，更改數據庫連接字符串中的一個字母，然後在您花費接下來的四個小時試圖弄清楚您的生活如何變得如此可怕的錯誤時大笑。

要啟用此功能，請將以下行添加到您的用戶設置文件Ctrl/Cmd + , 。

 "liveshare.guestApprovalRequired": true

現在，當有人想加入時，系統會提示您。如果您阻止某人，他們將在會話期間被阻止。如果他們再次嘗試加入，您將不會收到通知，並且他們將被 VS Live Share 毫不客氣地拒絕。

去享受你的午餐吧。您的計算機是安全的。

焦點追隨者

默認情況下，任何加入您的 Live Share 會話的人都會“關注”您。這意味著他們的編輯器將加載您所在的任何文件並在您滾動時滾動。即使您切換文件，參與者也會看到您所看到的內容。

某人對文件進行更改的那一刻，他們就不再關注您了。因此，如果你倆一起處理一個文件，然後你轉到另一個文件，他們不會自動與你一起工作。當您談論您所在的文件中的代碼而其他人正在查看完全不同的內容時，這可能會導致很多混亂。

除了告訴對方你在哪裡（順便說一句，這很有效），命令面板中還有一個名為“Focus Participants”的方便命令Ctrl/Cmd + Shift + P 。

顯示實時共享焦點命令的 vs 代碼命令面板 — 從 VS Code 命令面板訪問“focus”命令（大預覽）

您還可以在 VS Live Share Explorer 視圖中以圖標的形式訪問它。

vs Code 實時共享資源管理器焦點圖標 — 通過單擊 VS Live Share Explorer 視圖中的關注圖標發送關注請求（大預覽）

這將使您的參與者專注於您單擊或滾動到的下一件事。默認情況下，隱式接受 VS Live Share 焦點請求。如果您不希望人們能夠專注於您，您可以將以下行添加到您的用戶設置文件中。

 "liveshare.focusBehavior": "prompt"

另請注意，您可以關注參與者。如果您在 VS Live Share Explorer 視圖中單擊他們的名字，您將開始關注他們。

因為一旦其他人開始編輯代碼，關注就會關閉，因此很難準確地知道人們何時關注你，何時不關注你。您可以查看的一個地方是 VS Live Share Explorer 視圖。它會告訴您某人所在的文件，但不會告訴您他們是否在關注您。

一個好的做法是記住焦點總是在變化，因此人們可能會或可能不會看到您在任何特定時間看到的內容。

團隊調試

參與者可以共享您運行的任何調試會話。如果您啟動調試會話，他們將獲得與您完全相同的體驗。如果它在您這邊中斷，它在他們這邊中斷，並且他們可以在您的所有代碼中獲得完整的調試視圖。

他們可以在調試控制台中進入、退出、結束、添加監視、評估；你能做的任何調試，他們也能做，而且他們能控制它。

調試也可以由參與者啟動。但是，默認情況下，VS Code 不允許遠程啟動您的調試器。要啟用此功能，請將以下行添加到您的用戶設置文件Ctrl/Cmd + , ：

 "liveshare.allowGuestDebugControl": true

共享您的終端

我們作為開發人員所做的很多工作都不在我們的代碼中。它在終端中。有時候，我在終端上花費的時間似乎與在編輯器上花費的時間差不多。這意味著，如果您的終端出現錯誤或需要輸入一些命令，那麼如果您的 VS Live Share 參與者除了您的代碼之外還可以看到您的終端，那就太好了。

VS Code 有一個集成的終端，你可以用 VS Live Share 來分享它。

選擇了共享終端的 vs 代碼命令面板 — 從 VS Code 命令面板訪問“共享終端”命令（大預覽）

執行此操作時，您有機會以只讀或讀寫方式共享您的終端。

vs代碼提示將終端共享為只讀或讀寫 — 始終以只讀方式共享您的終端，除非您絕對必須以寫入權限共享它（大預覽）

默認情況下，您應該以只讀方式共享您的終端。當您共享您的終端讀寫時，用戶可以直接在您的終端上執行任意命令。讓它沉入一會兒。那很重。

不言而喻，對某人的終端進行遠程寫訪問會帶來很多信任和責任。您應該只與您隱含信任的人共享您的終端讀寫。疏遠的前任可能不在討論範圍內。

安全地以只讀方式共享您的終端允許線路另一端的人實時查看您正在輸入的內容和終端輸出，但會限制他們在該終端中輸入任何內容。

如果您發現自己處於這樣一種情況，即其他人可以更快地到達您的終端，而不是試圖用大量標誌引導您完成一些古怪的命令，您可以共享您的終端讀寫。在這種模式下，其他人可以完全遠程訪問您的終端。明智地選擇你的朋友。

分享您的本地主機

在上面的視頻中，終端命令以在 https://localhost:8080 上運行的站點的鏈接結束。使用 VS Live Share，您可以共享該本地主機，以便其他人可以訪問它，就像訪問他們自己的本地主機一樣。

如果您正在運行共享調試會話，則當參與者在其端點擊該本地主機 URL 時，如果遇到斷點，它將為你們雙方中斷。更好的是，您可以共享任何 TCP 進程。這意味著您可以共享數據庫或 Redis 緩存之類的東西。例如，您可以共享本地 Mongo DB 服務器。嚴重地！這意味著不再需要更改配置文件或嘗試建立共享數據庫。只需共享本地 Mongo 數據庫實例的端口即可。

以正確的方式分享正確的文件

有時您不希望協作者看到某些文件。您的項目中可能存在未檢入源代碼控制且不適合公開查看的私鑰和密碼。在這種情況下，您可能希望對參與 Live Share 會話的任何人隱藏這些文件。

默認情況下，VS Live Share 將隱藏.gitignore中指定的任何文件。如果有要隱藏的文件，只需將其添加到.gitignore即可。但請注意，這只會在項目視圖中隱藏文件。如果您在共享調試會話中並進入.gitignore中的文件，它仍會加載到編輯器中，並且您的協作者將能夠看到它。

您可以通過創建.vsls.json文件來更精細地控制共享文件的方式。

例如，如果您想確保.gitignore中的任何文件永遠不可見，即使在調試期間，您也可以將gitignore屬性設置為exclude 。

 { "$schema": "https://json.schemastore.org/vsls", "gitignore":"exclude" }

同樣，您可以顯示.gitignore中的所有內容，並直接從.vsls.json文件控製文件可見性。為此，請將gitignore設置為none ，然後使用excludeFiles和hideFiles屬性。請記住——排除意味著永遠不可見，隱藏意味著“在文件資源管理器中不可見”。

 { "$schema": "https://json.schemastore.org/vsls", "gitignore":"none", "excludeFiles":[ "*.env" ], "hideFiles": [ "dist" ] }

共享和擴展

VS Code 對許多開發人員的部分吸引力在於其龐大的擴展市場。大多數人都會安裝多個。了解擴展在 VS Live Share 的上下文中如何工作或不工作非常重要。

VS Live Share 將同步特定於您正在共享的項目上下文的任何內容。例如，如果您安裝了 Vetur 擴展，因為您正在使用 Vue 項目，它將共享給任何參與者——無論他們是否也安裝了它。對於其他特定於上下文的事物也是如此，例如 linter、格式化程序、調試器和語言服務。

VS Live Share 不同步用戶特定的擴展。這些可能是主題、圖標、鍵盤綁定等。作為一般經驗法則，VS Live Share 共享您的上下文，而不是您的屏幕。您可以查閱有關此主題的官方文檔文章，以更深入地解釋您可以期望共享哪些擴展。

協作時進行溝通

人們在首次 VS Live Share 體驗中做的第一件事就是嘗試通過輸入代碼註釋進行交流。這看起來像是寫（明白了嗎？）的事情，但實際上並不是 VS Live Share 的設計用途。

VS Live Share 並不是要取代您選擇的聊天客戶端。您可能已經有一個首選的聊天機制，並且 VS Live Share 假定您將繼續使用它。

如果您已經在使用 Slack，則有一個名為 Slack Chat 的 VS Code 擴展。這個擴展仍然處於開發的早期階段，但看起來很有希望。它將 VS Code 置於拆分模式並在右側嵌入 Slack。更好的是，您可以直接從 Slack 聊天中啟動 Live Share 會話。

vs 代碼鬆弛聊天擴展 — Slack Chat 擴展將 Slack 置於您的編輯器中（大預覽）

另一個看起來很有趣的工具叫做 CodeStream。

碼流

雖然 VS Live Share 旨在從編輯器中改進協作，但 CodeStream 旨在從聊天的角度解決同樣的問題。

CodeStream 擴展允許您直接在 VS Code 中聊天，這些聊天將成為您的代碼歷史記錄的一部分。您可以突出顯示要討論的一段代碼，它會直接進入聊天室，以便您的評論有上下文。然後，這些評論將保存為您的 Git 存儲庫的一部分。它們還在您的代碼中顯示為小註釋圖標，無論您在哪個分支上，這些註釋都會顯示出來。

對於 VS Live Share，CodeStream 提供了一組免費的功能。您可以直接從聊天窗格開始新會話，也可以單擊頭像。新會話會自動創建一個相應的聊天頻道，您可以將其保留在代碼中，或者在您完成後處理掉。

如果聊天不足以完成工作，並且您需要像 1999 年那樣進行協作，那麼只需一個電話即可獲得幫助。

VS 實時共享音頻

雖然 VS Live Share 並沒有試圖重新發明聊天，但它確實重新發明了您的電話。的種類。

使用 VS Live Share Audio 擴展，您可以直接呼叫某人並在 VS Code 中進行語音聊天。

vs 代碼命令面板顯示開始音頻呼叫選項 — 使用 VS Live Share Audio 擴展從 VS Code 進行音頻通話（大預覽）

然後，對方將收到加入您通話的提示。

vs 代碼通知詢問您是否要加入音頻通話 — VS Code 將詢問您是否要加入正在進行的音頻通話（大預覽）

當您連接到呼叫時，您將在底部狀態欄中看到一個揚聲器圖標。您可以單擊該揚聲器來更改您的音頻設備、將自己靜音或斷開通話。

vs 代碼選項顯示實時共享音頻擴展的靜音和斷開連接等選項 — 在 VS Live Share 音頻通話中，您可以完全控制音頻設置（大預覽）

我給你的最後一個提示可能是最重要的，它不是你不知道存在的花哨功能或晦澀的設置。

改變你的肌肉記憶

在獲取幫助或共享代碼方面，我們已經積累了多年的習得行為。長期以來，開發人員協作工具的狀態一直很糟糕，以至於我們習慣於將代碼粘貼到 Slack 中，開始尷尬的 Skype 通話，其中主要包括“告訴我什麼時候可以看到我的屏幕”，或者擠在監視器周圍並指向過度，即股票照片風格。

要充分利用 VS Live Share，您可以做的最重要的事情是實際使用 VS Live Share。這必須是一種“有意識的”努力。

你的大腦擅長模式。你不斷地根據你已經確定的模式來識別和分類你周圍的世界，而且你非常擅長它，你甚至沒有意識到你正在這樣做。然後，您開發對這些模式的默認響應。你形成本能。這就是為什麼你會默認使用舊的協作方式，甚至不考慮你在做什麼。在不知不覺中，您將與共享您的屏幕的人進行 Skype 通話——即使您安裝了 Live Share。

我寫了很多關於 VS Code 的文章，人們會時不時地問我如何才能通過編輯器提高工作效率。我總是說同樣的話：下次你伸手去拿鼠標做某事時，停下來。你可以用鍵盤來做這件事嗎？你可能可以。查找快捷方式，然後讓自己使用它。起初它會變慢，但如果你願意故意採取不同的行為，你會驚訝於你的大腦會以多快的速度默認以更有效率的方式做事。

Live Share 也是如此。當您想到您可能正在使用 Live Share 時，您將在通話中共享您的屏幕。那一刻，停下；單擊 VS Code 底部的“共享”按鈕。

是的，另一端的人可能沒有安裝擴展程序。是的，設置它可能需要一點時間。但是如果你現在就努力建立這種行為，下次你這樣做時，它會“正常工作”，用不了多久你甚至不需要考慮它，到那時，你最終將實現“匿名河馬”級別的協作。