Getting Started with Remote Pair Programming using VSCode

Getting ready to sit down and write code with people all around the world is an important part of The Bit. Really, it’s the meat and potatoes of what we’re building. Once you’ve made a listing, been matched to a group, and have all agreed on a time to do the tutorial you selected, the real fun begins: working together on code.

But before we can do that, we should make sure we have some preliminary stuff in order, like having a proper text editor, and knowing how to code with someone who could be hundreds or thousands of miles away. We’ll tell you how we tend to do it, but you’re welcome to use whatever tools you’re most comfortable with.

Imagine that these women are thousands of miles apart, instead of next to each other. Otherwise this image doesn’t make much sense for the article :)

Choosing a Text Editor

Ideally, you’re going to be spending a lot of time in your text editor of choice, so it makes sense to pick something powerful, but easy to use. We recommend installing VSCode because it comes with some very powerful tooling to make remote pair programming a breeze, which together are all called Live Share. We’ll focus on getting setup with VSCode + Live Share for this article, but it’s worth mentioning some other options for remote pair programming as well, in case VSCode + Live Share doesn’t float your boat for whatever reason.

1. VSCode + Live Share (what we’ll be using)
2. Teletype for Atom
3. RemoteCollab for SublimeText
4. CodeSandbox Live

If you decide to use VSCode, like us, you can start by installing it to your machine here.

Adding Live Share to VSCode

By this point, you should have VSCode installed to your machine, which is really about 90% of the work we need to do to get ready for remote pair programming. Let’s go ahead and add the Live Share plugins we’ll need to work with others.

In order to take advantage of Live Share properly, you need a Github account. Since you either already are, or soon will be, a software engineer, you should probably have one anyway if you don’t already. If you haven’t made one yet, you can do so here.

VSCode comes with a handy plugin system built-in, so, luckily for us, adding Live Share is as easy as searching the available plugins, and selecting the Live Share Extension Pack.

Note: To search extensions, like I have in the screenshot above, you’ll need to navigate to the Plugins tab on the left-hand side of the text editor. It’s the fifth icon from the top in the image, of the 4 small boxes.

The suite of tools we just installed allows us to actually do more than just connect to someone else’s text editor. It also adds a chat feature, and live audio! What a world we live in, eh? Let’s play around with these features, so we’re ready to use them in The Bit when we have a match with someone.

Creating and Joining Collaboration Sessions

Live Share is organized around the concept of “sessions”. I find that thinking about them as rooms is a helpful metaphor; we can create new rooms, and invite whoever we want to join us with a link that Live Share generates for us. Let’s go ahead and create a session now.

By navigating to our new Live Share on the left-hand side of VSCode (the icon of a box with an arrow and circle), we can find a few simple options for creating or joining sessions. Unsurprisingly, we’ll want to select “Start collaboration session…” now.

If the session was created correctly, you’ll see a small popup like the one below.

It looks like we have our link ready to go! We share this with whoever we want to join us, or post it on our Match in The Bit, so our partners can join us. If someone else had made the session, and shared the session link with you, you can use it join them by selecting “Join collaboration session…” rather than “Create collaboration session…” when first navigating to the Live Share tab.