如何在VisualStudioCode中使用LiveShare

介绍

Live Share 是 Visual Studio Code 的扩展，可实现开发人员之间的实时协作。它使用户能够与其他人共享会话，允许他们编辑代码以及共享服务器和调试会话。

随着您继续阅读本文，您将看到来自两台不同计算机的屏幕截图，以演示 Live Share 如何工作的工作示例。

为了清楚起见，本教程将发送会话邀请的人称为 inviter，将接受邀请的人称为 invitee。

先决条件

在开始本指南之前，您需要以下内容：

Microsoft 或 GitHub 帐户。
下载并安装最新版本的 Visual Studio Code。

第 1 步 — 下载扩展

注意： Visual Studio Code 的现代版本现在默认包含 Live Share。还有一个 Live Share Extension Pack 结合了 Live Share 和 Live Share Audio 扩展。本教程将重点介绍 Live Share 扩展。

利用 Live Share 的第一步是将其安装为扩展。在VS Code中，可以打开extensions选项卡，搜索Live Share，点击安装，安装完成后重新加载。

之后，您需要登录。截至目前，您可以选择使用 Microsoft 或 GitHub 帐户登录。

要登录，请使用底部状态栏中的 Sign In 按钮和人形图标。

第 2 步 — 共享和加入会话

全部登录后，您就可以创建会话以与他人共享。请务必仅与您信任的人共享实时会话。正如您将看到的，您将授予用户某些访问权限，如果使用不当可能会造成不利影响。

首先单击底部状态栏中的用户名，然后从可用选项中选择 Start Collaboration Session。或者，您可以打开命令面板（Mac 上为 CMD+SHIFT+P，Windows 上为 CTRL+SHIFT+P）并输入 Start Collaboration Session

您将收到通知，您的邀请链接已复制到剪贴板。

与他人共享此链接以邀请他们参加您的会议。

从被邀请人的角度来看，要接受邀请，请在底部状态栏中单击您的用户名，然后选择加入协作会话。或者，您可以打开命令面板并键入 Join Collabation Session。

出现提示时，输入 邀请者 发送给您的协作会话链接。当有人加入会话时，inviter 将收到通知。

默认情况下，加入会话将自动让 invitee 在导航代码时跟随 inviter。这将在 被邀请人 自己采取行动之前发生。从那里，双方都可以自由浏览和编辑他们认为合适的内容。此外，双方都会看到一个标记，显示其他编辑器的位置，如此处所示。

您还可以选择一段代码，使其在其他用户的计算机上突出显示。例如，您可以使用它来引起他们对一段代码的注意。

第三步——限制合作者

默认情况下，与某人共享会话时，他们将有权编辑工作区中的所有文件。信任某人编辑特定文件是一回事，但向他们开放整个工作区可能不是首选。

值得庆幸的是，Live Share 使您能够限制协作者可以查看和编辑的文件。

创建一个 .vsls.json 文件以限制协作者。基本配置如下所示：

.vsls.json

{
    "$schema": "http://json.schemastore.org/vsls",
    "gitignore": "none",
    "excludeFiles": [],
    "hideFiles": []
}

我们最关心的两个键是excludeFiles和hideFiles。 excludeFiles 是您不希望用户访问的文件名数组。 hideFiles 类似，只是协作者在某些情况下能够看到隐藏文件。阅读有关控制文件访问和可见性的文档以了解有关安全性的更多详细信息。

第 4 步 — 共享服务器

在本地处理应用程序时，与他人共享可能具有挑战性。您可以将代码签入 GitHub 并让其他人克隆，但他们仍然必须安装依赖项并自己启动服务器。使用 Live Share，您可以在本地启动服务器，并且其他人可以访问同一个正在运行的应用程序。

作为邀请者，正常启动你的服务器。然后，点击底部状态栏中的用户名，选择共享服务器。或者，打开命令面板并输入 Share Server。

作为 受邀者，您可以导航到正确端口上的 localhost 以查看服务器。

第 5 步 — 共享终端

可能存在您想在终端中教某人命令的情况，例如如何导航文件系统、使用 npm、启动您的开发服务器等。与早期的功能一样，远程执行此操作可能很复杂。 Live Share 还包括一个终端共享功能来解决这个问题。

共享终端类似于共享您的服务器。与其他功能类似，选择共享终端选项。之后，为协作者选择 read only 或 read/write 权限。

共享终端后，协作者将能够查看（和编辑，如果适用）终端。此屏幕截图显示 inviter 向屏幕回显消息后终端的 invitees 视图：

从这里，您可以向 受邀者 展示如何启动开发服务器、构建系统或其他任何可能相关的内容。

结论

此扩展中包含许多有用的功能。随着 Visual Studio Code 迅速成为 Web 开发人员最喜欢的编辑器，此扩展可能会改变我们处理教学、指导、协作、调试等的方式。