介绍 (Introduction)
Live Share is an extension for VS Code that enables real-time collaboration between developers. It gives users the ability to share asessionwith someone else, allowing them to edit code as well as share a sever and debugging session.
Live Share是VS Code的扩展，可实现开发人员之间的实时协作。 它使用户能够与其他人共享会话，从而允许他们编辑代码以及共享服务器和调试会话。
入门 (Getting Started)
Install the Live Share extension
安装实时共享扩展
Open the command palette打开命令面板 Start Live Share开始实时共享 Share Link分享链接
As you progress through this article you will see screenshots from two different computers to demonstrate a working example of how Live Share works. For clarification purposes, this tutorial will refer to person who sends the session invite and the person who accepts the invite as the theinviterandinvitee, respectively.
在阅读本文的过程中，您将看到两台不同计算机的屏幕快照，以演示Live Share的工作方式示例。 为了澄清起见，本教程将分别引用发送会话邀请的人和接受邀请的人作为邀请者和被邀请者。
第1步-下载扩展 (Step 1 — Downloading the Extension)
The very first step to taking advantage of Live Share is to install it as an extension. In VS Code, you can open up theextensionstab, search for Live Share, click install, and then reload when the install is finished.
利用Live Share的第一步是将其安装为扩展。 在VS Code中，您可以打开扩展选项卡，搜索Live Share ，单击安装，然后在安装完成后重新加载。
After that, you’ll need to sign in. As of now, you can choose to log in with a Microsoft or Github account.
之后，您需要登录。到目前为止，您可以选择使用Microsoft或Github帐户登录。
To sign in, use theSign Inbutton in the bottom status bar with the person icon.
要登录，请使用底部状态栏中带有人形图标的登录按钮。
第2步-共享和加入会话 (Step 2 — Sharing and Joining a Session)
After you’re all signed in, you’re ready to create a session to share with others. Be sure to only share live sessions with people you trust. As you’ll see, you will be granting users certain access that can be detrimental if used incorrectly.
登录全部后，您就可以创建一个会话以与他人共享。 确保仅与您信任的人共享实时会话。 如您所见，您将授予用户某些访问权限，如果使用不正确，那么这将是有害的。
Start by clicking your username in the bottom status bar and chooseStart Collaboration Sessionfrom the available options. Alternatively, you can open the Command Palette (CMD+SHIFT+Pon Mac,CTRL+SHIFT+Pon Windows) and typeStart Collaboration Session
首先单击底部状态栏中的用户名，然后从可用选项中选择“启动协作会话”。 或者，您可以打开命令面板(在Mac上为CMD+SHIFT+P，在Windows上为CTRL+SHIFT+P)，然后键入Start Collaboration Session
You’ll be notified that your invite link has been copied to the clipboard.
您将收到通知，邀请链接已复制到剪贴板。
Share this link with someone to invite them to your session.
与某人共享此链接，邀请他们参加您的会议。
From theinviteepoint of view, to accept an invite, click your username in the bottom status bar and chooseJoin Collaborative Session. Alternatively, as above, you can open the Command Palette and typeJoin Collaborative Session.
从被邀请者的角度来看，要接受邀请，请在底部状态栏中单击您的用户名，然后选择加入协作会话。 或者，如上所述，您可以打开“命令面板”，然后键入Join Collaborative Session。
When prompted, enter the collaborative session link sent to you by theinviter. Theinviterwill be notified when someone joins the session.
出现提示时，输入邀请者发送给您的协作会话链接。 当有人加入会话时，将通知邀请者。
By default, joining a session will automatically have theinviteefollow theinviteras they navigate code. This will happen until theinviteemakes a move themselves. From there, both sides are free to navigate and edit as they see fit. Additionally, both sides will see a marker showing where the other editor is as shown here.
默认情况下，加入一个会话都会自动被邀请跟随邀请他们浏览的代码。 这将一直发生，直到被邀请者自己采取行动为止。 双方都可以从那里随意浏览和编辑合适的内容。 此外，双方还将看到一个标记，显示另一个编辑器的位置，如下所示。
You can also select a piece of code for it to be highlighted on the other user’s computer. You can use this to draw their attention to a section of code for example.
您也可以选择一段代码，使其在其他用户的计算机上突出显示。 例如，您可以使用它来引起他们对代码段的注意。
第3步-限制协作者 (Step 3 — Limiting Collaborators)
By default, when sharing a session with someone, they will have access to edit all of the files within the workspace. It’s one thing to trust someone to edit a few files, but opening up your entire workspace to them may not be preferred. Thankfully, Live Share gives you the ability to limit what files collaborators can view and edit.
默认情况下，与某人共享会话时，他们将有权编辑工作区中的所有文件。 信任某人编辑一些文件是一回事，但是向他们开放整个工作区可能不是首选。 幸运的是， Live Share使您能够限制协作者可以查看和编辑的文件。
Create a.vsls.jsonfile to limit collaborators. The basic configuration will look something like this:
创建一个.vsls.json文件以限制协作者。 基本配置如下所示：
.vsls.json.vsls.json
{"$schema": "/vsls","gitignore": "none","excludeFiles": [],"hideFiles": []}
The two keys we care most about areexcludeFilesandhideFiles.excludeFilesis an array of file names that you don’t want users to have access to.hideFilesis very similar except collaborators will be able to see hidden files under certain circumstances. Click here for more details about security.
我们最关心的两个键是excludeFiles和hideFiles。excludeFiles是您不希望用户访问的文件名数组。hideFiles非常相似，只是在某些情况下合作者将能够看到隐藏文件。 单击此处以获取有关安全性的更多详细信息。
步骤4 —共享服务器 (Step 4 — Sharing a Server)
It can be challenging to share with others when working on an application locally. You could check the code into GitHub and have the other person clone, but then they still have to install dependencies and start the server themselves. With Live Share you can start the server locally and the other person can get access to the same running application.
在本地处理应用程序时，与他人共享可能是一个挑战。 您可以将代码检入GitHub并克隆其他人，但是他们仍然必须安装依赖项并自行启动服务器。 使用Live Share，您可以在本地启动服务器，其他人可以访问相同的正在运行的应用程序。
As theinviter, start your server as normal. Then, click the username in the bottom status bar and chooseShare Server. Alternatively, open the Command Palette and typeShare Server.
作为邀请者，正常启动服务器。 然后，单击底部状态栏中的用户名，然后选择“共享服务器”。 或者，打开“命令面板”，然后键入“Share Server。
As theinvitee, you then can navigate tolocalhoston the proper port to see the server.
作为被邀请者，您可以在正确的端口上导航到localhost以查看服务器。
第5步-共享终端 (Step 5 — Sharing a Terminal)
There may be a scenario where you’d like to teach someone commands in the terminal, such as how to navigate the file system, working withnpm, starting your dev server, etc. As with the features above, this can be complicated to do remotely. Live Share also includes a terminal sharing feature to solve this problem.
在某些情况下，您可能想在终端上教别人一些命令，例如如何导航文件系统，使用npm，启动开发服务器等。与上述功能一样，这样做可能很复杂远程地。 Live Share还包括终端共享功能来解决此问题。
Sharing a terminal is similar to sharing your server. Similar to the other features, select theShare Terminaloption. After that, choose betweenread onlyorread/writepermissions for collaborators.
共享终端类似于共享服务器。 与其他功能类似，选择“共享终端”选项。 之后，为协作者选择read only或read/write权限。
After the terminal has been shared, collaborators will be able to view (and edit, if applicable) the terminal. The screenshot below shows theinviteesview of the terminal after theinviterechoed a message to the screen.
共享终端之后，协作者将能够查看(和编辑，如果适用)终端。 下面示出了屏幕截图受邀者查看终端的邀请方呼应的消息到屏幕之后。
From here, as mentioned above, you could show theinviteehow to start a development server, build system, or anything else that might be relevant.
如上所述，您可以在此处向被邀请者展示如何启动开发服务器，构建系统或其他任何可能相关的内容。
结论 (Conclusion)
There are a lot of useful features included in this extension that. With Visual Studio Code quickly becoming a favorite editor for web developers, this extension potentially change the way we approach teaching, mentoring, collaboration, debugging, etc.
该扩展包含很多有用的功能。 随着Visual Studio CodeSwift成为Web开发人员的最爱编辑器，此扩展可能会改变我们进行教学，指导，协作，调试等的方式。
翻译自: /community/tutorials/how-to-use-live-share-with-visual-studio-code
