Lesson Monday

In this lesson, we'll cover setting up a VS Code Live Share session. You'll take part in an icebreaker with your pair, learn good pairing etiquette, and get an opportunity to practice hosting a VS Code Live Share session.

Goal: We have several goals in this lesson:

  • Practice using VS Code Live Share.
  • Learn pairing communication techniques.
  • Get to know your pair better!
  • Communicate with your dev team and help out others as needed.

Note: If you have technical difficulties during this exercise and you aren't able to cover the icebreaker questions in much depth (or at all) that is completely fine. Some students will spend the entire time debugging VS Code Live Share. While that is frustrating, getting you and your pair up and running on VS Code Live Share is the #1 goal of this lesson.

Remember, this ice breaker is a group exercise. If you haven't found a pair to work with from your dev team, find one now. If there is an odd number of people in your dev team, there will be one group of three. If you have not set up a direct message with your dev team or your pair, please do so now. As necessary, revisit this lesson on Direct Messages in Discord for review.

Set Up VS Code Live Share

Once you have a pair (or a group of three if necessary), you're ready to start using VS Code Live Share. Choose one person to host the first session. Don't worry - everyone will get a chance to practice hosting a session so it doesn't matter who goes first. Make sure you've opened VS Code (regardless of whether or not you are hosting). You should also have a Discord voice channel (or a video call if preferred) with your pair. This is not a silent exercise and you'll generally be using Discord to communicate while you use VS Code Live Share to write code together.

Next, both pairs should do the following steps regardless of whether you are hosting - don't forget, even if you're not hosting yet, you will be in just a few minutes.

  • Navigate to your desktop from the terminal (using commands you learned in Interacting with the Command Line). If you are on a Mac, the command will likely be $ cd ~/Desktop. If you are on a PC, the path might be different, though you can still use the cd command to navigate to the desktop.

  • Create a directory on your desktop called icebreaker by typing $ mkdir icebreaker in the terminal.

  • Navigate inside the icebreaker directory ($ cd icebreaker) and create a file called hi.txt. This is just a text file - we are keeping things very simple here because we're focused on practicing VS Code Live Share, not worrying about code yet. A quick reminder: you can create the file with the following command: $ touch hi.txt.

  • Type $ code . in the terminal (from inside the icebreaker directory) to open VS Code. Remember, you need to run code . in the directory of the project you are working on - not a directory higher up in the file tree. You will be sharing access (including write access) of all these files with your pair. For instance, if you were to run code . in the root directory of your computer, you'd be giving your pair both read and write access to every file on your computer - not just the files in your project. This is a security risk!

  • Make sure that hi.txt is showing in the left-hand pane of VS Code. If the file tree isn't showing, click the top left Explorer icon that shows two overlapping squares to show the file tree. See the image below.

File tree is showing - and the icon for the Explorer is circled.

In the image, the file tree is showing (we can see hi.txt). The Explorer icon in the upper left corner is also circled. You can click on this icon any time to toggle the file tree. If the file still isn't showing, you're probably not in the right directory or the file wasn't properly created. Make sure you are in the icebreaker directory, type $ ls to see a list of files in the directory (which should show hi.txt) and then type in $ code ..

  • Once you've ensured that the project you want to share is open in VS Code, you're ready to use Live Share! Click the square with an arrow on the left side of your screen to access Live Share. That is the bottom icon on the left in the image below. (This icon will be added after you've installed Live Share.)

Image of tab with square with arrow on left side.

Make sure the file you're working on is saved. (Live Share won't work on new, unsaved files.) Then click Start collaboration session. In the image above, that is the second option. Only the first two words are showing because that pane hasn't been widened. If you are confused about which option to select, use your mouse to widen the left-side pane in VS Code.

When you click on Start collaboration session, a link will be copied to your clipboard that you can share with pairs. If you need to get the link again, just click on Invite participants, which is highlighted in the image below.

 Click on the "Invite participants link" on left side of screen.

Once you get that link, share it with your pair. Your pair will now be able to see and work in any file in the icebreaker project.

Icebreaker - and Good Pairing Etiquette

Now that you've started a VS Code Live Share session, it's time for an icebreaker. You'll both get a chance to answer a few questions via VS Code Live Share.

Before we do that, though, let's cover some basic remote pairing etiquette. You both have the ability to type and edit VS Code files in the project right now. It's kind of like being in a car together and you both have steering wheels. Obviously, it wouldn't be good if you both tried to steer at the same time!

One person should answer one question at a time. When they are finished, let your pair know.

First, the host will copy the following questions into icebreaker.txt and save the file.

Note: There are five questions below. You are not required to answer them all! We've provided additional questions so you can choose not to answer a few of them if you'd prefer not to. This is supposed to be a fun exercise, not to put anyone on the spot.

What is your favorite time of the day and why?

What is your dream job?

What are three of your favorite foods?

What would be the most exciting scientific discovery ever? (Examples: time travel, recreating dinosaurs, flying cars, etc.)

Would you rather travel back in time to meet your ancestors or to the future to meet your descendants? Why?

Next, you and your pair will alternate answering each question by typing your answer in VS Code and then saving the file. Answer one question at a time and then alternate. This is similar to how we conduct pair programming when we are actually coding - the difference is we generally expect pairs to switch driving (typing and controlling the keyboard) every 20 minutes or so when coding.

You may want to review the pointers in Remote Pairing Etiquette. Here are a few key points to follow in this icebreaker exercise.

When you are driving (typing):

  • Vocalize what you are thinking and doing. So as you answer the question in VS Code, vocalize your process as well.

  • Be proactive about turn-taking. When you are done answering a question, communicate clearly that you are ready for your pair to drive.

  • Make sure to actively switch after you answer a question!

When you are not driving:

  • Don't take over the keyboard without checking in first.

  • Don't give someone a hard time about the speed of their typing or typos. Once you are coding, you will want to point out typos in the code - but remember, you should always endeavor to do so in a constructive manner.

  • Listen with the intent of listening, not responding. This means focusing on active listening skills. These skills will be essential for you in your next job - even more so than your coding skills.

Alternate Hosting

Once you are done, it's time for your pair to do the same thing! End the remote sharing session. It's time for your pair to host. Follow the same steps to host a session as your pair just did.

This time, you'll answer the following questions. Once again, you don't need to answer every single question - we've added a few extra if there are a few you'd prefer not to answer.

What was the best piece of advice you ever received? (Or a generally good piece of advice...)

What was the worst and/or best job you ever had?

Would you rather be able to fly or teleport? Why?

What is your favorite place in the world?

What is your favorite TV show, movie, or book?

Note: We've included more questions below for a group of three. Remember, each person (whether that's two or three people) should get a chance to host a live-sharing session on VS Code. If you are pair programming (only two people), you can skip the questions below.

What is your favorite animal or plant? Why?

What is your favorite color?

What is your favorite band or your favorite type of music or your favorite lyric?

If you were a character in a movie, television show, or book, which would you be?

Would you rather take a sight-seeing trip in a hot air balloon or a submarine? Why?

By this point, you and your pair should have both successfully hosted a VS Code Live Share session. If you have any technical difficulties, first reach out to members your dev team and then reach out to your instructors.

We're almost ready to start coding! In the next lesson, you'll start learning about Git and the terminal, plus practice sharing your screen.

Lesson 4 of 64
Last updated October 14, 2021