Visual Studio Code 如何實時協作(VSLS)?

本經驗介紹在Visual Studio Code 的使用當中,如何使用VS Live Share插件實時協作(VSLS)。

工具/原料

Visual Studio Code

方法/步驟

首先,在VSCode的插件搜尋,查找VS Live Share,然後安裝即可。

安裝好之後,等待vscode下載依賴項,然後等左下角出現Live Share標誌,即可開始使用。

首先要登錄,點擊左下角會蹦出菜單提示登錄,或者打開歡迎頁面,然後點擊signing in。

這裡應該會打開瀏覽器,如果沒有打開,手動打開瀏覽器,在瀏覽器選擇使用github帳號登錄,或者使用微軟帳號登錄.

如果登錄成功,左下角會顯示帳號名稱,此時可以按點擊左下Live Share標誌,打開命令菜單,點擊Start Collaboration Session,開啟協作。

完成後即可複製共享連結,點擊左邊的live share圖標,可以打開面板,也可以直接在歡迎頁面複製url.

當對方也連線後即可看到對方的光標。多個人可以同時進行編輯,可以在相同的文件,也可以在不同的文件,一個人可以跟蹤對方,也可以不跟蹤對方。

注意事項

這是一個p2p工具,如果在相同的網絡下,性能會比較好,

相關文章

  1. Visual Studio Code 使用Chrome Debug 調試代碼

    Visual Studio Code 使用Chrome Debug 調試js代碼 工具/原料 Visual Studio Code Chrome 方法/步驟 一.添加插件 Debugger for C ...
  2. Windows7下如何安裝Visual Studio Code?

    Visual Studio Code是一個輕量級但功能強大的原始碼編輯器,可在您的桌面上運行,適用於Windows,Mac和Linux.它內置對JavaScript,TypeScript和Node.j ...
  3. Visual Studio Code如何安裝擴展?

    Visual Studio Code安裝之後還只是一個簡單的編輯器,很多語言是不支持的,需要通過安裝擴展來支持:有關Visual Studio Code的安裝已經在另一篇"Windows7下 ...
  4. Visual studio code如何設置語言

    Visual studio code是微軟出的一款代碼編輯器,很好用,支持多種語言,還有一個就是插件查找安裝更新比較方便,速度很快不用翻牆,而且是在微軟的維護下,一直在不斷改進,我覺得用這個不管是寫前 ...
  5. visual studio code教程:基礎使用和自定義設置

    本經驗主要基於基礎web前端開發,visual studio code教程--基礎使用.擴展插件安裝使用以及少許自定義配置,推薦了幾個自認為比較好的要求配置項目比較低的VS code擴展插件: Htm ...
  6. 微軟Visual Studio Code Windows版簡單使用幫助

    Visual Studio Code 是微軟在2015年4月29號 Build 2015 大會上發布的免費跨平台代碼編輯器 支持 Win/Mac/Linux 多平台開發的小夥伴們 一定會開心 Visu ...
  7. Linux中安裝 Visual Studio Code的 步驟

    Visual Studio Code 是基於 Electron 優化代碼後的編輯器,後者是基於 Chromium 的一款軟體,用於為桌面系統發布 io.js 應用.Visual Studio Code ...
  8. Visual Studio Code Python開發環境設置

    Visual Studio Code支持多種程式語言,筆者使用後發現確實很酷,值得推薦.於是配置了Python的開發環境,筆者準備用它作為主要文本編輯器了! 工具/原料 Visual Studio C ...
  9. 微軟Visual Studio Code 如何下載

    Visual Studio Code 是微軟在2015年4月29號 Build 2015 大會上發布的免費跨平台代碼編輯器 支持 Win/Mac/Linux 多平台開發的小夥伴們 一定會開心 Visu ...
  10. Visual Studio Code 插件管理

    新版本Visual Studio Code插件管理成為一大亮點. 工具/原料 1.3.0 方法/步驟 之前的插件管理一直為人詬病.幸好,最近更新的版本終於解決了這個問題. 點擊檢查更新菜單,嘗試下載最 ...
  11. visual studio code 任務控制器(Task Master)

    使用gulp的同學都知道gulp有.task()任務,所有的事情都要交給gulp.task()來完成.一般情況下都是要從gulpfile.js裡面去看相關的task名稱,然後通過gulp taskNa ...
  12. ubuntu下visual studio code和.net core調試C#

    .net core 的到來,是微軟.net framework 跨平台開發的新紀元.目前同已有的Mono相比,.net core 有自己的不足,但是不久的未來.net core勢必追趕上前者,讓微軟從 ...
  13. Visual Studio Code 怎麼設置文件圖標主題?

    Visual Studio Code 不斷更新,帶來了新功能的同時,在編輯器美化方面也推出了[文件圖標]功能.比起通過[文件後綴]找文件,通過[文件圖標]能更快鎖定文件類型,進而更快找到所需文件.先來 ...
  14. Visual Studio Code Mac怎麼運行JavaScript

    Visual Studio Code又更新,喜大普奔~ 工具/原料 node.js Visual Studio Code 1.7 方法/步驟 要運行JavaScript,首先要先安裝node.js.下 ...
  15. Visual Studio Code如何按文件名搜尋文件?

    Visual Studio Code按文件名搜尋文件的快捷鍵是Ctrl + P.下面詳細介紹操作方法.修改搜尋文件的快捷鍵的方法和需要注意的地方. 基本操作 按快捷鍵ctrl+p可以彈出一個小窗,在上 ...
  16. Visual Studio Code如何全局搜尋

    Visual Studio Code可以按ctrl+f搜尋本頁,按ctrl+shift+f全局搜尋,還可以修改默認的快捷鍵,下沒詳細介紹. 方法/步驟 左邊第二個按鍵就是全局搜尋的按鍵 滑鼠懸浮在上面 ...
  17. Visual Studio Code 如何切換大小寫?

    Visual Studio Code有切換大小寫的功能,不過默認沒有綁定任何快捷鍵,想使用這個功能,我們需要先修改快捷鍵設置,增加切換大小寫的快捷鍵,再使用它. 方法/步驟 先打開快捷鍵修改的界面,在 ...
  18. Visual Studio Code 如何同時編輯多處

    Visual Studio Code有多種同時編輯多處的操作,熟練掌握的話,可以提高寫代碼的速度,下面詳細介紹. 重命名變量 首先看看自己需要同時修改多處的代碼是不是要重命名一個變量,如果是的話,有現 ...
  19. Visual Studio Code for Mac如何修改顏色主題

    Visual Studio Code的操作界面中有修改字體風格的功能,也展示了這個軟體的合理度,根據每個人的視覺喜好可以去靈活設置,那麼在mac中如何操作呢? 工具/原料 Mac電腦 Visual S ...
  20. Visual Studio Code 如何更新版本?

    vscode自從發布以來,用過的人都讚不絕口,占用空間小,速度快,功能強大.一般的編輯器都不能兼具"輕快小"與"功能強大"的優點,但vscode做到了.同時vs ...