Announcing Support for Native Editing of Jupyter Notebooks in VS Code

Jeffrey Mew

Jeffrey

With today’s October release of the Python extension, we’re excited to announce the support of native editing of Jupyter notebooks inside Visual Studio Code! You can now directly edit .ipynb files and get the interactivity of Jupyter notebooks with all of the power of VS Code. You can manage source control, open multiple files, and leverage productivity features like IntelliSense, Git integration, and multi-file management, offering a brand-new way for data scientists and developers to experiment and work with data efficiently. You can try out this experience today by downloading the latest version of the Python extension and creating/opening a Jupyter Notebook inside VS Code.

Since the initial release of our data science experience in VS Code, one of the top features that users have requested has been a more notebook-like layout to edit their Jupyter notebooks inside VS Code. In the rest of this post we’ll take a look at the new capabilities this offers.

Getting Started

Here’s how to get started with Jupyter in VS Code.

  • If you don’t already have an existing Jupyter Notebook file, open the VS Code Command Palette with the shortcut CTRL + SHIFT + P (Windows) or Command + SHIFT + P (macOS), and run the “Python: Create Blank New Jupyter Notebook” command.
  • If you already have a Jupyter Notebook file, it’s as simple as just opening that file in VS Code. It will automatically open with the new native Jupyter editor.

Once you have a Jupyter Notebook open, you can add new cells, write code in cells, run cells, and perform other notebook actions.

AI-Assisted Autocompletion

As you write code, IntelliSense will give you intelligent code complete suggestions right inside your code cells. You can further supercharge your editor experience by installing our IntelliCode extension to get AI-powered IntelliSense with smarter auto-complete suggestions based on your current code context.

Variable Explorer

Another benefit of using VS Code is that you can take advantage of the variable explorer and plot viewer by clicking the “Variables” button in the notebook toolbar. The variable explorer will help you keep track of the current state of your notebook variables at a glance, in real-time.

Now you can explore your datasets, filter your data, and even export plots! Gone are the days of having to type df.head() just to view your data.

Connecting To Remote Jupyter Servers

When a Jupyter notebook file is created or opened, VS Code automatically creates a Jupyter server for you locally by default. If you want to use a remote Jupyter server, it’s as simple as using the “Specify Jupyter server URI” command via the VS Code command palette, and entering in the server URI.

Exporting as Python Code

When you’re ready to turn experimentation into production-ready Python code, just simply press the “Convert and Save as Python File” button in the top toolbar and let the Python extension do all the work for you. You can then view that Python code in our existing Python Interactive window and keep on working with the awesome features of the Python extension to further make your code production-ready, such as the integrated debugger, refactoring, Visual Studio Live Share, and Git source control.

Debugging

VS Code supports debugging Jupyter Notebooks through using the “Exporting as Python Code” functionality outlined in the previous section. Once you have your code in the Python Interactive window, you can use VS Code’s integrated debugger to debug your code. We are working on bringing cell debugging into the Jupyter editor in a future release so stay tuned!

Try it out today!

You can check out the documentation for the full list of features available in the first release of the native Jupyter experience and learn to get started with Jupyter notebooks in VS Code. Also, if you have any suggestions or run across any issues, please file an issue in the Python extension GitHub page.

We’re excited for everyone to try out this new experience and have the Python extension in VS Code empower your notebook development!

Jeffrey Mew
Jeffrey Mew

Follow Jeffrey   

10 comments

  • Avatar
    Zach Eberhart

    This would be really great if it worked well… Unfortunately, it is painfully slow to run, even a cell of comments takes a few seconds. I hope you guys can get a working version of this soon though, would love to give it a good trial 🙂

  • Avatar
    Alan Wilson

    Look forward to giving this a shot. Is it possible to connect this to Azure Notebooks and edit my web-based notebooks from VS Code?

  • Avatar
    lostlocalhost

    Looking forward to when I get it to actually work. Seems fine for local env, but I haven’t been able to get it to connect to my remote server yet – just keep crashing the NB. Thanks for the writeup!

  • Avatar
    Teerapat Prommarak

    ModuleNotFoundError Traceback (most recent call last)
    in
    —-> 1 import pandas as pd

    ModuleNotFoundError: No module named ‘pandas’

    Is there anybody facing this problem.
    I’m sure that pandas package already installed.

    • Jeffrey Mew
      Jeffrey Mew

      I’m sorry you ran into this issue. Can you double-check to see that the environment where you installed pandas in is also the same environment that is used in VS Code to launch the notebook? You can see this through the VS Code command “Select Python Intepreter”.

  • Avatar
    Collier King

    Nice post Jeffrey,

    One of the biggest benefits I see Jupyter providing is the table of contents widget you can add and activate with the below code and developed here:

    Can you do this with VS Code? Have not been able to make it work in PyCharm.

    It would be hard to ditch traditional jupyter notebooks for me until have this feature.

    pip install jupyter_contrib_nbextensions
    pip install jupyter_nbextensions_configurator

    jupyter contrib nbextension install –system
    jupyter contrib nbextension install –user

    jupyter nbextensions_configurator enable –user
    jupyter nbextensions_configurator enable –system

    Jupyter nbextension enable toc –user
    Jupyter nbextension enable toc –system

    C:\Users\user\.jupyter\nbconfig\notebook.json

    {
    “load_extensions”: {
    “nbextensions_configurator/config_menu/main”: true,
    “jupyter-js-widgets/extension”: true,
    “toc2”: true,
    “contrib_nbextensions_help_item/main”: true,
    “toc2/main”: true
    }
    }

  • Avatar
    Suchitra Bhat

    Thanks for the useful updates Jeffrey! Trying to run a Jupyter notebook on Visual studio Code is throwing this error – “Activating Python 3.7.3 64-bit (‘base’: conda) to run Jupyter failed with Error: spawn cmd ENOENT.” What am I doing wrong? I’m running a simple Hello World program.

Leave a comment