VSCode on Google Colab

I recently discovered a way to setup VSCode on Google Colab and use it as an editor to write code and run experiments on the Colab VM.

With this setup, you can still prototype in the Colab Notebook while also using VSCode for all the advantages of an full-fledged code editor. Here is how you can replicate my setup.

Steps

I have described the steps in details below. After going through all the steps, please use this colab notebook to try it out directly.

1. First, we will install the code-server package to run VSCode editor as a web app. Copy and run the following command on colab to install code-server.
   

   !curl -fsSL https://code-server.dev/install.sh | sh
   

2. After the installation is complete, we will expose a random port 9000 to an external URL we can access using the pyngrok package. To install pyngrok, run
   

   !pip install -qqq pyngrok
   

3. Then, run the following following command to get a public ngrok URL. This will be the URL we will use to access VSCode.
   

   from pyngrok import ngrok
   url = ngrok.connect(port=9000)
   print(url)
   

4. Now, we will start the VSCode server in the background at port 9000 without any authentication using the following command.
   

   !nohup code-server --port 9000 --auth none &
   

5. Now, you can access the VSCode interface at the URL you got from step 3. The interface and functionality is same as the desktop version of VSCode.

Tips

• All the keyword shortcuts of regular VSCode works with this. For example, you can use Ctrl + Shift + P to open a popup for various actions.

• To open a terminal, you can use the shortcut Ctrl + Shift + `.

• To get python code completions, you can install the Python(ms-python) extension from the extensions page on the left sidebar.

• The Colab interface is still usable as a notebook and regular functions to upload and download files and mount with Google Drive. Thus, you get the benefits of both a notebook and a code editor.

References

• Code-Server FAQs
• pyngrok - a Python wrapper for ngrok

Connect

If you enjoyed the blog post, feel free to connect with me on Twitter where I share new blog posts every week.

Comments

[cwb4]

Great article. One question: what does ‘-qqq’ option do in ‘pip install -qqq’ ?

[Ruan Comelli]

In pip 20.3.3, pip install --help shows:

-q, --quiet Give less output. Option is additive, and can be used up to 3 times (corresponding to WARNING, ERROR, and CRITICAL logging levels).

So the -qqq option tells pip to log critical messages only, suppressing warnings and errors.

[Ayan Banerjee]

Wow! Really cool!