How to improve your workflow with VS Code and Jupyter Notebook 💘

I love VS Code and I love Jupyter Notebooks 😍. Both excel at their own world. But to improve my workflow I had to create a bridge between their worlds.

Data Scientists love Jupyter notebooks. They are the best for creating reproducible experiments. Visual Studio Code combines the ease of use of a classic lightweight text editor with more powerful IDE-type features with very minimal configuration. It comes with a lot of awesome extensions that makes it a very powerful tool for regular usage.

Unfortunately for viewing the IPython document, every time you have to run a Jupyter instance and open the notebook in your browser. If we open an IPython notebook within VS Code we could see only a JSON document and not the beautiful rendered document.

My workflow consists of prototyping and experimenting in Jupyter Notebooks and then creating an independent Python script in VS Code. The Git versioning of Python Code streamlines my workflow.

It was a little disappointing to me that even for viewing the preview I have to launch a Jupyter instance and open my RAM hungry Chrome browser. :)

So I decided to solve this little problem of previewing the notebook without running a Jupyter instance. And to take it a step further I decided to do it within VS Code.

The result is nbpreviewer, a VS Code extension that helps you to preview rendered Jupyter notebook within VS Code. You could even interact with interactive plotly visualizations from with VS Code.

Try it out here

VS Code Jupyter Notebook Previewer - Visual Studio Marketplace

Demo

Playing with plotly 3D visualization within VS Code

Bridging two worlds 😃

If you are interested in source code of the extension head over to my GitHub Repository. Follow me for the next blog post on how I created the extension and how you could easily create yours too.

jithurjacob/vscode-nbpreviewer

Remember to give this post some 💚 if you liked it. Follow me for more content :)