{"id":252,"date":"2020-05-09T20:49:10","date_gmt":"2020-05-09T20:49:10","guid":{"rendered":"https:\/\/leedavies.dev\/?p=252"},"modified":"2020-05-09T20:49:10","modified_gmt":"2020-05-09T20:49:10","slug":"connecting-vscode-to-a-jupyter-notebook","status":"publish","type":"post","link":"https:\/\/leedavies.dev\/index.php\/2020\/05\/09\/connecting-vscode-to-a-jupyter-notebook\/","title":{"rendered":"Connecting VSCode to a Jupyter Notebook"},"content":{"rendered":"\n<p>I have been working a lot in Jupyter notebooks; however, as a coding environment, it lacks many of the bells and whistles that you get with an IDE.<\/p>\n\n\n\n<p>With the latest version of the VSCode Python plugin, you work directly with the Jupyter Notebook from within the IDE. The extension provides Intellisene support and the ability to run the Python code within the page.<\/p>\n\n\n\n<p>For example, here is the previous code I used to demonstrate RDKit running in my Jupyter environment running within VSCode.<\/p>\n\n\n\n<p>To connect you VSCode environment to Jupyter, first install VSCode, from the following URL:<\/p>\n\n\n\n<p><a href=\"https:\/\/code.visualstudio.com\/\">https:\/\/code.visualstudio.com\/<\/a><\/p>\n\n\n\n<p>Once installed, open the VSCode Extensions view and search for the Python extension (I am using the latest version, 2020.4.74986). The Python extension adds various commands to the pallet, which will allow us to connect to the Jupyter server.<\/p>\n\n\n\n<p>Ensure that the Jupyter server has started, I am reusing the Jupyter server I created for the previous example, so I start the Jupyter Notebook my-rdkit-env from my start menu shortcut.<\/p>\n\n\n\n<p>Starting the Jupyter server will open a command prompt you will need to copy the URL for the server (including the token) as we need to paste this URL into VSCode to connect to the running server.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"981\" height=\"164\" src=\"https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Jupyter-Url-From-Command-Line-2.png\" alt=\"\" class=\"wp-image-253\" srcset=\"https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Jupyter-Url-From-Command-Line-2.png 981w, https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Jupyter-Url-From-Command-Line-2-300x50.png 300w, https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Jupyter-Url-From-Command-Line-2-768x128.png 768w, https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Jupyter-Url-From-Command-Line-2-604x101.png 604w\" sizes=\"auto, (max-width: 981px) 100vw, 981px\" \/><figcaption>Copy highlighter url from Jupyter startup<\/figcaption><\/figure>\n\n\n\n<p>If the URL does not include the token or the token has expired, you will get a 403 error when you try and connect to the Jupyter server.<\/p>\n\n\n\n<p>Copy the URL from the command prompt.<\/p>\n\n\n\n<p>In the VSCode editor View &gt; Command Pallet and type the following command:<\/p>\n\n\n\n<p><strong>Python: Specify Jupyter server URI<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"608\" height=\"126\" src=\"https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Command-Pallet.png\" alt=\"\" class=\"wp-image-254\" srcset=\"https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Command-Pallet.png 608w, https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Command-Pallet-300x62.png 300w, https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Command-Pallet-604x125.png 604w\" sizes=\"auto, (max-width: 608px) 100vw, 608px\" \/><figcaption>Command Pallet option to specify Jupyter server url.<\/figcaption><\/figure>\n\n\n\n<p><strong>Paste the command into the resulting dialog box.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"93\" src=\"https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Specify-Url.jpg\" alt=\"\" class=\"wp-image-255\" srcset=\"https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Specify-Url.jpg 633w, https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Specify-Url-300x44.jpg 300w, https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Specify-Url-604x89.jpg 604w\" sizes=\"auto, (max-width: 633px) 100vw, 633px\" \/><figcaption>Paste the Jupyter server url into VS Code.<\/figcaption><\/figure>\n\n\n\n<p>VSCode connects to the Jupyter environment, if the connection fails, check that have you copied and pasted the entire token.<\/p>\n\n\n\n<p>At this point, you can create a new Notebook, or as I have an existing notebook that I want to reuse, I use the &#8220;File &gt; Open File&#8221; menu to navigate to and open the .ipynb file for the NotebookNotebook I wish to open. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"737\" height=\"785\" src=\"https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Import-Notebook-in-VSCode.jpg\" alt=\"\" class=\"wp-image-256\" srcset=\"https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Import-Notebook-in-VSCode.jpg 737w, https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Import-Notebook-in-VSCode-282x300.jpg 282w, https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/Import-Notebook-in-VSCode-253x270.jpg 253w\" sizes=\"auto, (max-width: 737px) 100vw, 737px\" \/><figcaption>Open existing Jupyter Notebook in VS Code.<\/figcaption><\/figure>\n\n\n\n<p>With the Notebook open and the connection to the Jupyter environment, I can run my RDKit example code and view the output directly within VSCode.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/VSCode-running-Jupyter-Notebook-1024x580.png\" alt=\"\" class=\"wp-image-257\" srcset=\"https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/VSCode-running-Jupyter-Notebook-1024x580.png 1024w, https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/VSCode-running-Jupyter-Notebook-300x170.png 300w, https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/VSCode-running-Jupyter-Notebook-768x435.png 768w, https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/VSCode-running-Jupyter-Notebook-477x270.png 477w, https:\/\/leedavies.dev\/wp-content\/uploads\/2020\/05\/VSCode-running-Jupyter-Notebook.png 1314w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Run the code Jupyter Notebook in VSCode.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>I have been working a lot in Jupyter notebooks; however, as a coding environment, it lacks many of the bells and whistles that you get with an IDE. With the latest version of the VSCode Python plugin, you work directly with the Jupyter Notebook from within the IDE. The extension provides Intellisene support and the ability to run the Python code within the page. For example, here is the previous code I used to demonstrate RDKit running in my Jupyter&#8230;<\/p>\n<p class=\"read-more\"><a class=\"btn btn-default\" href=\"https:\/\/leedavies.dev\/index.php\/2020\/05\/09\/connecting-vscode-to-a-jupyter-notebook\/\"> Read More<span class=\"screen-reader-text\">  Read More<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,24,25,4],"tags":[28,26,30],"class_list":["post-252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-netcore","category-python","category-rdkit","category-technology","tag-jupyter","tag-python","tag-vscode"],"_links":{"self":[{"href":"https:\/\/leedavies.dev\/index.php\/wp-json\/wp\/v2\/posts\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leedavies.dev\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leedavies.dev\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leedavies.dev\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/leedavies.dev\/index.php\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":3,"href":"https:\/\/leedavies.dev\/index.php\/wp-json\/wp\/v2\/posts\/252\/revisions"}],"predecessor-version":[{"id":262,"href":"https:\/\/leedavies.dev\/index.php\/wp-json\/wp\/v2\/posts\/252\/revisions\/262"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/leedavies.dev\/index.php\/wp-json\/wp\/v2\/media\/260"}],"wp:attachment":[{"href":"https:\/\/leedavies.dev\/index.php\/wp-json\/wp\/v2\/media?parent=252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leedavies.dev\/index.php\/wp-json\/wp\/v2\/categories?post=252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leedavies.dev\/index.php\/wp-json\/wp\/v2\/tags?post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}