DEV Community

Cover image for VSCode on Google Colab
Amit Chaudhary
Amit Chaudhary

Posted on • Updated on • Originally published at amitness.com

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

Connect

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

Top comments (3)

Collapse
 
cwb4 profile image
cwb4

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

Collapse
 
ruancomelli profile image
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).
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
ayanb profile image
Ayan Banerjee

Wow! Really cool!