live share

Live Share for Visual Studio Code is HOT OFF THE PRESS and publically available as of May 7th 2018! What? You've been living under a rock and haven't heard of it? Don't worry, let me fill you in.

Visual Studio Code的Live Share现已热销，并于2018年5月7日公开可用！ 什么？ 您一直生活在岩石下，没有听说过吗？ 不用担心，让我填写您的信息。

Live Share is an extension for VS Code that enables real-time collaboration between developers.

Live Share是VS Code的扩展，可实现开发人员之间的实时协作。

Live Share is an extension for VS Code that enables real-time collaboration between developers. As you'll see in a second, you'll have the ability to share a "session" with someone else, allowing them to edit code as well as share a sever and debugging session. I've seen real-time collaboration in action with Cloud 9 before, but to have this now be a part of my favorite text editor is extremely exciting! So, let's go ahead and take a look at how it works.

Live Share是VS Code的扩展，可实现开发人员之间的实时协作。 正如您稍后将看到的那样，您将能够与其他人共享“会话”，从而允许他们编辑代码以及共享服务器和调试会话。 我以前曾经看到过与Cloud 9进行实时协作的过程，但是现在将其作为我最喜欢的文本编辑器的一部分是非常令人兴奋的！ 因此，让我们继续来看一下它是如何工作的。

TLDR：如何通过4个步骤设置实时共享？ (TLDR: How do I set up Live Share in 4 steps?)

1. Install the Live Share extension安装实时共享扩展
2. Open the command palette打开命令面板
3. Start Live Share开始实时共享
4. Share Link分享链接

Keep in mind that 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, I'll refer to person who sends the session invite and the person who accepts the invite as the the inviter and invitee respectively.

请记住，在阅读本文的过程中，您将看到两台不同计算机的屏幕快照，以演示Live Share的工作方式示例。 为了澄清起见，我将发送会话邀请的人和接受邀请的人分别称为邀请者和被邀请者。

Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development for only $10!

查看“ 学习Visual Studio Code” ，仅需10美元，即可了解有关Web开发中最热的编辑器所需的所有知识！

下载扩展 ( Downloading the Extension )

The very first step to taking advantage of Live Share is to install it just like any other extension. In VS Code, you can open up the extensions tab, 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 login with a Microsoft account or Github. Because I needed two computers, I logged in with Microsoft on one and Github on the other.

之后，您需要登录。截至目前，您可以选择使用Microsoft帐户或Github登录。 因为我需要两台计算机，所以我在一台计算机上登录了Microsoft，而另一台计算机则登录了Github。

To sign in, use the "Sign In" button in the bottom status bar with the person icon.

要登录，请使用带有状态图标的底部状态栏中的“登录”按钮。

@media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }} @media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }}

共享和参加会议 ( Sharing and Joining a Session )

After you're all signed in, you're ready to create a session to share with others. One thing to keep in mind when doing so is 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.

登录全部后，您就可以创建一个会话以与他人共享。 这样做时要记住的一件事是只与您信任的人共享实时会话。 如您将看到的，您将授予用户某些访问权限，如果使用不当，那么这将是有害的。

Only share live sessions with people you trust!

只与您信任的人分享实时会话！

Start by clicking your username in the bottom status bar and choose "Start Collaboration Session" from the available options. Alternatively, you can open the Command Palette ( CMD + SHIFT + P on Mac, CTRL + SHIFT + P on Windows) and type "Start Collaboration Session"

首先，单击底部状态栏中的用户名，然后从可用选项中选择“启动协作会话”。 或者，您可以打开命令面板（在Mac上为CMD + SHIFT + P，在Windows上为CTRL + SHIFT + P），然后键入“开始协作会话”

You'll be notified that your invite link has been copied to the clipboard.

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

To invite someone to your session, all you need to do is share this link with them. You can text, email, or read it verbatim over the phone... whatever works for you.

要邀请某人参加您的会议，您需要做的就是与他们共享此链接。 您可以通过电话发短信，电子邮件或逐字阅读...适合您的任何方式。

From the invitee point of you, to accept an invite, click your username in the bottom status bar and choose "Join Collaborative Session". Alternatively, as above, you can open the Command Palette ( CMD + SHIFT + P on Mac, CTRL + SHIFT + P on Windows) and type "Join Collaborative Session".

从您的受邀者角度，要接受邀请，请在底部状态栏中单击您的用户名，然后选择“加入协作会话”。 或者，如上所述，您可以打开命令面板（在Mac上为CMD + SHIFT + P，在Windows上为CTRL + SHIFT + P），然后键入“加入协作会话”。

When prompted, enter the collaborative session link sent to you by the inviter.

出现提示时，输入邀请者发送给您的协作会话链接。

The inviter will be notified when someone joins the session.

当有人加入会话时，将通知邀请者 。

By default, on joining a session the invitee will automatically follow the inviter as he/she navigates code. This will happen until the invitee makes 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.

默认情况下，在加入会话时， 被邀请者将在导航代码时自动关注邀请者 。 这将一直发生，直到被邀请者自己采取行动为止。 双方都可以从那里随意浏览和编辑合适的内容。 此外，双方还将看到一个标记，显示另一个编辑器的位置，如下所示。

One neat trick is to select a piece of code for it to be highlighted on the other's computer as well. You can use this to draw their attention to a section of code for example.

一个巧妙的窍门是选择一段代码，使其也可以在另一台计算机上突出显示。 例如，您可以使用它来引起他们对代码段的注意。

限制合作者 ( Limiting Collaborators )

By default, when sharing a session with someone, they will have access to edit all of the files within the workspace. Obviously, this may not be ideal. It's one thing to trust someone to edit a few files, but opening up your entire workspace to them might be a little nerve-racking. Thankfully, Live Share gives you the ability to limit what files collaborators can view and edit.

默认情况下，与某人共享会话时，他们将有权编辑工作区中的所有文件。 显然，这可能不是理想的。 信任某人编辑一些文件是一回事，但是向他们开放整个工作区可能会有些令人费解。 幸运的是， Live Share使您能够限制协作者可以查看和编辑的文件。

Thankfully, Live Share gives you the ability to limit what files collaborators can view and edit.

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

To limit collaborators, create a .vsls.json file. The basic configuration will look something like this.

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

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

The two keys we care most about are "excludeFiles" and "hideFiles". EcludeFiles is an array of file names that you don't want users to ever have access too. They will not be able to view those files ever. HideFiles is very similar except collaborators will be able to see "hidden" files under certain circumstances. Click here for more details about security.

我们最关心的两个键是“ excludeFiles”和“ hideFiles”。 EcludeFiles是不希望用户访问的文件名数组。 他们将永远无法查看这些文件。 HideFiles非常相似，只是在某些情况下协作者将能够看到“隐藏”文件。 单击此处以获取有关安全性的更多详细信息。

共享服务器 ( Share a Server )

If you've ever tried, you know it's challenging to share with others when working on an application locally. Sure, 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. Wouldn't it be amazing if you could start the server locally and magically the other person gets access to the same running application?! Well, now you can.

如果您曾经尝试过，那么您将知道在本地处理应用程序时与他人共享具有挑战性。 当然，您可以将代码检入Github并克隆其他人，但随后他们仍然必须安装依赖项并自行启动服务器。 如果您可以在本地启动服务器并神奇地使另一个人访问相同的正在运行的应用程序，这不会令人惊讶吗？ 好吧，现在可以了。

As the inviter, start your server as normal (ex. nodemon server.js). Then, click the username in the bottom status bar and choose 'Share Server'. Alternatively, open the Command Palette and type 'Share Server'.

作为邀请者 ，正常启动服务器（例如nodemon server.js ）。 然后，单击底部状态栏中的用户名，然后选择“共享服务器”。 或者，打开命令面板并键入“ Share Server”。

As the invitee, you then can navigate to the correct local host url. In my case, I'm running my sample application, VSC Snippets (GUI for creating Code Snippets for VS Code), at port 3000.

作为被邀请者 ，您然后可以导航到正确的本地主机URL。 就我而言，我正在端口3000上运行示例应用程序VSC代码段 （用于为VS代码创建代码代码段的GUI）。

How incredible is that? Don't ask me how it works because, honestly, I have no idea, but it's super cool!

那有多不可思议？ 不要问我它是如何工作的，因为，老实说，我不知道，但是那太酷了！

共享一个终端 ( Share a Terminal )

Imagine a scenario where you're trying to teach someone commands in the terminal. You know, navigating the file system, working with npm, starting your dev server, etc. As with the features above, this becomes much more complicated when doing remotely. Good thing Live Share decided to throw the feature to share a terminal in for good measure.

想象一下您要在终端中教某人命令的情况。 您知道，浏览文件系统，使用npm，启动开发服务器等。与上述功能一样，在远程进行操作时，这变得更加复杂。 好消息Live Share决定将功能共享给终端。

Sharing a terminal is similar to sharing your server. We've been through this before, so just find the option "Share Terminal" and click it. Then, you'll need to choose between read only and read/write permissions for collaborators.

共享终端类似于共享服务器。 我们之前已经完成过此过程，因此只需找到“共享终端”选项并单击它即可。 然后，您需要在协作者的只读和读/写权限之间进行选择。

You can share a terminal granting either read only or read/write access to collaborators

您可以共享一个终端，以向协作者授予只读或读/写访问权限

After the terminal has been shared, collaborators will be able to view (and edit if applicable) the terminal. The screenshot below shows the invitees view of the terminal after the inviter echoed a message to the screen.

共享终端后，协作者将能够查看（和编辑，如果适用）终端。 下面示出了屏幕截图受邀者查看终端的邀请方呼应的消息到屏幕之后。

From here, as mentioned above, you could show the invitee how to start a development server, build system, or anything else that might be relevant.

如上所述，您可以在此处向被邀请者展示如何启动开发服务器，构建系统或任何其他可能相关的内容。

共享调试 ( Shared Debugging )

One last thing you can do with this awesome extension is share a debugging session, providing yet another amazing way to teach someone. Honestly, debugging is not necessarily something that can be memorized. You get just better from experience. So, the idea of walking through a debugging session with someone more junior is a great opportunity. Just talking through your thought process as you go could be invaluable to someone looking to learn.

您可以使用此出色的扩展做的最后一件事是共享一个调试会话，这提供了另一种令人惊奇的方式来教某人。 老实说，调试不一定是可以记住的东西。 从经验中您会变得更好。 因此，与初级人员一起进行调试会话的想法是一个很好的机会。 只是随便谈论您的思考过程，对于想要学习的人来说是无价的。

To share a debug session, you'll first need to start a debug session. Makes sense, right. I'll cover the basic idea but refer you to the VS Code docs for further reference.

要共享调试会话，您首先需要启动调试会话。 有道理，对。 我将介绍基本概念，但请您参考VS Code文档以获取更多参考。

I am going to be debugging a Node App using the "Attach to Process Id" configuration. This means that after running my server, I then run the debug configuration that will connect to the existing running application.

我将使用“附加到进程ID”配置来调试Node App。 这意味着在运行服务器之后，我将运行将连接到现有正在运行的应用程序的调试配置。

After starting the application and then starting the debug configuration, below you can see I hit a breakpoint in my code.

启动应用程序然后启动调试配置之后，下面您可以看到我在代码中遇到了断点。

The cool thing about sharing debugging is that it happens automatically. After the debugging session is started on the inviter side, the invitee will then automatically be a part of the same session.

共享调试的有趣之处在于它会自动发生。 在邀请者端启动调试会话后， 被邀请者将自动成为同一会话的一部分。

回顾 ( Recap )

Man, that was a lot. There's a lot of great features included in this extension that you should be really excited about. With Visual Studio Code quickly becoming the de factor editor for Web Developers, this extension potentially change the way we approach teaching, mentoring, collaboration, debugging, etc. I'm super excited to take advantage of all of these features, and I hope you are too!

伙计，很多。 此扩展中包含许多很棒的功能，您应该对此感到非常兴奋。 随着Visual Studio CodeSwift成为Web开发人员的主要编辑器，此扩展可能会改变我们进行教学，指导，协作，调试等的方式。我非常高兴能够利用所有这些功能，希望您能太！

As you get started and give it a try, let me know how you like it, cool things you are doing, etc. You can find me on twitter, @jamesqquick.

当您开始尝试时，请让我知道您的喜好，正在做的很酷的事情，等等。您可以在Twitter上找到我， @ jamesqquick 。

翻译自: https://scotch.io/tutorials/getting-started-with-live-coding-in-visual-studio-code-with-live-share

live share