Collaborative live coding with VSCode

What if we had a Google Docs user experience but with coding? Where everyone can write together in the same folder structure while you see their cursors and chat with them through audio?

What if?


(From https://visualstudio.microsoft.com/services/live-share/)


Recently, we discovered that VSCode delivers that through the Live Share extension, and a beauty about it is that you have all the usual possibilities of integrations with other extensions. For instance, there is a Discord extension which makes VSCode mocking itself as if it were a videogame. Instead of you playing FPS maps, you will play code files :slight_smile: (by the way, there are implementations for the usual gaming features like spectator joining and screen sharing)


In order to use it, just follow those steps:

  1. Install VSCode (https://code.visualstudio.com/download)
  2. Install the Live Share extensions. In order to do that, Press Control-P and use the following commands:
    • ext install ms-python.python (this is needed to run Python blocks without crashing the live share)
    • ext install MS-vsliveshare.vsliveshare-pack
  • (optional) Install some extensions on VSCode. Recommended ones: Pylance, Markdown All In One and GitLens
    • (super optional) Install the Discord Presence extension so that you integrate the VSCode with it. There are options for enabling other people to be spectators and/or join your server :wink:
  1. Go to the Live Share button on the left tab of VSCode. From there, you can share your environment or join another one. Another possibility is to create a pllaned sesion so that you have a link before hosting it.

When you share your environment, the users will have access to all files on the current workspace, and they can edit it on real time.

For coding through Jupyter Notebooks, there are some pitfalls. First, there is no support for live coding on .ipynb files, although it is possible to run it as usual - VSCode will download it and run locally on your machine.

If doing live coding on notebooks is a must, then what is possible is to use ‘.py’ notebooks in the percent format, which looks like that:

# %% [markdown]
# # Notebook title
# Example of a markdown cell

# %%
print('First code cell')

# %%
print('Second code cell')

Experience when using .py files as notebooks


Additionally, there are several other features which can be worthy exploring into. Live Share allows you to have audio calls while coding, to share terminals on the host machine, to have shared whiteboards (https://marketplace.visualstudio.com/items?itemName=lostintangent.vsls-whiteboard) and to have Discord presence (https://marketplace.visualstudio.com/items?itemName=icrawl.discord-vscode).

VSCode integration with Discord

2 Likes

Yes please!! Can’t wait to try this out!

…Can we also get it on VR? :laughing:

1 Like