It’s A-Live Share Tutorial
Pair Programming has a wealth of positives about it, but sometimes when you are working on something with other people, all of you just want to jump in the code and get your hands dirty at the same time.Programming collaboratively becomes even more complicated when your team is working virtually and you can’t just point at whatever place in the code you are talking about, and relational directions aren’t always the easiest on a screen share.
Enter the VS Code extension Live Share. What Live Share does is it allows one person to share their VS Code working environment with others and everyone will then be collaborating with editing and debugging on the same exact code. It even has a benefit over traditional pair programming because everyone can keep their Hot Keys and theming while working on something. So if you are helping Bill with his code, you don’t have to worry about having to look at the janky font he decided to use (honestly, Jokerman?). So everyone can work on debugging a certain file, or you can each be in different files updating in real-time and when you all add them to your git repository, everything’s all on the same branch.
To begin (if you are hosting), download the extension here: https://visualstudio.microsoft.com/services/live-share/ .
This will add the logo to your sidebar. Clicking on it will open up the session details menu. If you now click on “share,” an invitation link will be copied to your clipboard, and you can send it to whomever you so desire.
They can now choose to open Live Share in VS Code if they also have the extension, or if they don’t have it, they can even open it in their browser and it will simulate a vanilla VS Code environment for them to work from.
Now you can start deciding what you would like the other users to be able to access.
You can let the other users have access to your terminal, make it so they can only read it, or have read/write capabilities, or remove it and have no terminal access.
You can also share your servers! Thus letting the other users have full access to the entirety of whatever you are building. A little trick for ruby boot camp people: if your current project involves you needing to run a JSON server for a database or having a local server backend and a front end, you can run the below code in the base directory of your front end, or the base directory of the JSON server:
ruby -rwebrick -e'WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd).start'(You can change the port to be whatever you want, just have it be different than what the database server is on.) Then share this port as well and other people will be able view the index.html page the same as if it were their local machine and they opened it in their browser. Many languages have this kind of function as well. Python would be:
python3 -m http.server 8000So just find the open server in a directory for your language, and you should be able to find the right text to enter. You can also get the Live Server extension here: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
This essentially does the same thing. Either way, when you open the server Live Share will pick up the server and add it to the shared servers.
Live Share also provides a lot of helpful features once you actually start to use it. If another user highlights something, you will see it on your screen with attribution to whoever did it:
You can click on the thumbtack to jump to another user and then follow them through the code.
There is chat if you are not able to or are just not for another reason talking with one another
At any point, you can boot people, change the type of access they have, or close down the Live Share session. There’s much more functionality that I won’t touch on here and some I just haven’t even discovered yet, so check it out here: https://visualstudio.microsoft.com/services/live-share/ And happy coding?
