介绍
Live Share是Visual Studio Code的扩展,允许开发人员之间实时协作,允许用户与其他人共享 session,允许他们编辑代码以及共享服务器和调试会话。
随着您通过本文的进展,您将看到来自两个不同的计算机的屏幕截图,以展示如何工作Live Share。
为了澄清,本教程将参考发送会话邀请的人作为 inviter 和接受邀请的人作为 invitee。
前提条件
在您开始本指南之前,您将需要以下内容:
- Microsoft 或 GitHub 帐户.
- 下载并安装 Visual Studio Code的最新版本。
步骤 1 – 下载扩展
<$>[注] **注:**现代版本的Visual Studio Code现在默认包含Live Share。还有一个(https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)将Live Share和Live Share音频扩展组合在一起的(Live Share Extension Pack)。
在 VS Code 中,您可以打开 ** extensions** 选项卡,搜索 Live Share,点击安装,然后在安装完成后重新加载。
从现在开始,您可以选择使用 Microsoft 或 GitHub 帐户登录。
要登录,请使用 ** Sign In** 按钮,在状态栏的底部与人符号。
步骤 2 – 共享和加入会议
一旦您全部登录,您将准备创建一个会话以与他人共享. 请确保只与您信任的人共享现场会话. 正如您所看到的那样,您将授予用户某些访问权限,如果使用不当,可能会有害。
首先,点击您的用户名在状态栏的底部,并从可用的选项中选择 开始协作会话. 或者,您可以打开命令盘(在 Mac 上‘CMD+SHIFT+P’,在 Windows 上‘CTRL+SHIFT+P’),然后键入‘开始协作会话’。
您将被通知您的邀请链接已被复制到剪辑板。
与某人分享此链接,邀请他们参加您的会议。
从 invitee 观点来看,要接受邀请,请点击您的用户名在状态栏的底部,然后选择 Join Collaboration Session. 或者,您可以打开命令板并键入Join Collabation Session。
当被提示时,输入由 inviter 发送给您的协作会话链接.当有人加入会话时, inviter 将被通知。
默认情况下,加入会话将自动让 invitee 跟随 inviter 当他们导航代码. 这将发生,直到 invitee 自己移动. 从那里,双方可以自由导航和编辑,因为他们认为合适。
您还可以选择一个代码,以便在其他用户的计算机上突出显示。
步骤三:限制合作伙伴
默认情况下,当与某人共享会话时,他们将可以访问编辑工作区内的所有文件。
幸运的是,Live Share 允许您限制合作者可以查看和编辑的文件。
创建一个 .vsls.json 文件来限制协作者. 基本配置将看起来像这样:
1[label .vsls.json]
2{
3 "$schema": "http://json.schemastore.org/vsls",
4 "gitignore": "none",
5 "excludeFiles": [],
6 "hideFiles": []
7}
我们最关心的两个密钥是excludeFiles和hideFiles。excludeFiles是您不希望用户能够访问的文件名组。
步骤 4 – 共享服务器
當您在本地工作時與他人分享,這可能是一個挑戰。你可以檢查代碼到GitHub,並讓其他人克隆,但然後他們仍然必須安裝依賴,並自行啟動伺服器。
作为 inviter,以正常方式启动您的服务器,然后单击状态栏的用户名,然后选择 Share Server。
作为 invitee,您可以在适当的端口导航到本地主机,以查看服务器。
步骤 5 – 共享终端
可能有一个场景,您想教某人终端中的命令,例如如何导航文件系统,使用npm,启动您的开发服务器等。
共享终端类似于共享您的服务器。类似于其他功能,选择 共享终端选项。
终端已共享后,协作者将能够查看(并在适用情况下编辑)终端. 此屏幕截图显示了终端的 invitees 视图,当 inviter 回响到屏幕上的消息后:
从这里,您可以展示 invitee 如何启动开发服务器、构建系统或任何其他可能相关的内容。
结论
随着Visual Studio Code迅速成为Web开发人员最喜欢的编辑器,这个扩展可能会改变我们如何接近教学,指导,协作,调试等。