An easy "how-to".
In the past collaboration meant being in the same office. Nowadays, due to increasingly popular remote work, it seems that it may have become a real challenge. What if you want to work remotely and work with your team at the same time? The answer is: Pair programming with VS Live Share.
What is Pair programming?
Pair programming is a type of programming technique in which two programmers work together on one workstation. This is a great way to make your code better and to work faster. It allows team members to share problems and solutions quickly. They can come up with better ideas and complement each other. In most cases, such cooperation increases productivity when compared to working alone. To enable pair and remote programming VS Live Share was created.
What is VS Live Share?
Live Share is a free extension for Visual Studio Code that allows you to work on the code by editing and debugging with others in real time, regardless of the programming languages used and the types of applications you create.
What do you need to start?
To start working with Live Share you need to:
1. Install Visual Studio Code or make sure that you have the correct version of VSC installed (Visual Studio Code 1.22.0 or higher - Windows (7+), macOS (Sierra+), or Linux ).
2. Install the Live Share extension pack and reload VSC.
How to sign in?
1. After successful installation, the Live Share button should be visible on the status bar. To log in click on the "Live Share" status bar item
or press Ctrl+Shift+P / Cmd+Shift+P and select the "Live Share: Sign In With
Browser" command.
A browser window should appear to complete the sign-in process.
2. Then you need to log in with your GitHub or Microsoft account.
That allows team members to easily identify you.
How to share a project?
1. Open project Open the project that you want to share with your team members.
2. Hide files / Exclude files If there are files in the project that you want to hide, you need to update the .gitignore files. By default, Live Share hides all files and folders defined there so that they do not appear in the participants' file tree. In addition, there is an option to exclude files. It prevents participants from opening them. Files also cannot be open while debugging or tracking the owner. To apply this option, you need to add the .vsls.json file with these options to your project.
3. Start sharing project Click on the "Live Share" status bar item
or press Ctrl+Shift+P / Cmd+Shift+P and select the "Live Share: Start a collaboration session (Share)"
4. Send invitation link to the guests
The invitation link will be automatically copied to the clipboard. You need to send it to the team member you want to work with.
5. If you lose your invitation link, you can copy it again by clicking on the username in the status bar and select the "Invite Others (Copy Link)".
6. Wait for the guests
By default, anyone with the invitation link can join a session. When they are ready to work, you will get the notification.
If you are afraid that an unwanted guest joins the session, you can change the settings in the settings.json file by adding a line: "liveshare.guestApprovalRequired": true Then you will be able to decide whether to allow the guest to join or not.
7. Stop collaborating As a host, you can stop sharing a project at any time. You can do it by clicking on the username in the status bar and select the “Stop Collaboration Session”
or by opening the Live Share tab and selecting the "Stop collaboration session" icon.
When you finish the session, all guests will lose access to the project.
How to join a session?
There are two ways to join a session. The first one is via the browser, the second one via the Live Share view tab in VSC.
1. Join via the browser If you have already downloaded the LiveShare extension pack and you are logged in, all you need to do is to open the invitation link in a browser. You'll be notified that the browser wants to launch the Live Share tool. If you accept it, you'll be connected to the collaboration session in VSC. Once you join in, you'll be taken to the file the host is currently editing.
2. Join by Live Share view tab in VSC If you have already downloaded the LiveShare extension pack and you are logged in, just open the Live Share view tab in VSC and select “Join collaboration session”.
Then you will be asked to paste the invitation URL.
3. Stop collaborating As a guest you can leave the shared session at any time. This will not affect other users. You can also reconnect if the session is still shared.
How to work with other members?
When all session participants are ready, you can start working on the project together.
1. List of participants If you want to view the list with all participants or check who is present, you can do it on the Live Share view tab in the Participants section.
You can also check the number of participants on the status bar.
2. Change permissions If the guests are given read-only access, they can only participate in the session passively. The host can change the permission and give the ability to edit files by updating it in the LiveShare view tab.
3. Follow When the host or a participant works on the code, it is worth following him from place to place. To enable this, click on their name in the participants' list in the Live Share view tab. The circle next to their username will fill and that will indicate that you are following them.
Also you can stop at any time by clicking the circle next to the username once again.
4. Co-edit files If participants have the read-write access, they can edit files in real-time. Both the host and the guests will see the changes being made. You and other participants can go to any file in the shared project. You can edit files together or independently. All changes made are visible to others.
5. Commit changes
All changes are saved to the host machine. There is no need to synchronize changes when participants finish their work. But you need to be aware of the fact that only the host can commit changed files. (By default, the commit message indicates who contributed to the changes.)
Participants have no possibility to commit, but they can see the Source Control tab with the file changes.
6. Focus
If you want to focus the attention of all participants, you can click the Focus Participants icon in the Live Share view tab.They will start following you and will be moved to the place where your cursor is.
7. Comments
If you need to comment on some part of the code, you can do it by clicking on the white line next to the line of the code that you want to comment on. You can then start a discussion.
That information will be visible for other members. They can see it in the Live Share view tab and in the Comments view next to the terminal.
8. Co-debug
Co-debugging in Live Share gives the possibility of collaboration in solving problems. Participants do not have to create their own environments and can work on specific environmental issues that arise during the debug session on the host machine.
When a host debugger is connected, all guests are automatically included. Although there is one debug "session" on the host computer, all participants are connected to it and have their own view.
Each collaborator can insert different variables and inspect them, check different files and also add or remove breakpoints.
If the guest has left the debug session and wants to rejoin later, they can do so by clicking Ctrl + Shift + P / Cmd + Shift + P and selecting "Join shared debug session".
9. Share terminal
In Visual Studio Live Share, the host can share the terminal with their guests. They can be given read-only access, as well as run commands when given the read/write access.
As a host, you need to click on the ‘Share Terminals’ button on the Life Share view tab
and choose the type of access you want to give to your guests.
10. Share server
Visual Studio Live Share allows users to specify a local port and make it available to all guests.
Guests can get access to the shared server on their own computer at the same port number as the shared server. (If you have a web server running on port 8000, a guest can access the same working web server on their own computer at http: // localhost: 8000).
You need to click on the ‘Share Severs’ button on the Life Share view tab
and enter the number of the port that you are going to share with your guests.
Then the users will gain access to the server. By clicking on the tab with the name of the shared server, you will open it in the browser. You can also right-click and copy the server link to the clipboard and paste it into your browser.
Now every user will have the opportunity to make changes to the code and check the effects after refreshing the server page.
If you are interested in the topic and want to know more, check out the documentation here: vsliveshare!